/* ========================================================================== orient-luxury-core.css CIO Factory shared design system — dark luxury aesthetic Near-black base + grain overlay + gold accent, dark mode default, light/parchment mode via [data-theme="light"] on . Portable: all tokens are prefixed --ol- to avoid collisions. ========================================================================== */ :root{ /* dark (default) */ --ol-bg:#09080b; --ol-bg-raised:#121016; --ol-bg-card:#16131a; --ol-bg-card-hover:#1c1821; --ol-border:rgba(201,168,76,0.16); --ol-border-strong:rgba(201,168,76,0.32); --ol-text:#ece7db; --ol-text-dim:#a89f8f; --ol-text-faint:#6b6459; --ol-gold:#c9a84c; --ol-gold-soft:rgba(201,168,76,0.14); --ol-gold-strong:#e2c26b; --ol-danger:#c46a5a; --ol-success:#7fae7a; --ol-shadow:0 12px 32px rgba(0,0,0,0.55); --ol-grain-opacity:0.05; --ol-font-display:'Cinzel', serif; --ol-font-body:'Cormorant Garamond', serif; --ol-font-ui:'Syne', sans-serif; --ol-font-mono:'IBM Plex Mono', monospace; } html[data-theme="light"]{ --ol-bg:#f0ebe0; --ol-bg-raised:#e7e0d1; --ol-bg-card:#faf7ee; --ol-bg-card-hover:#f2ecdc; --ol-border:rgba(138,104,32,0.22); --ol-border-strong:rgba(138,104,32,0.4); --ol-text:#2a2418; --ol-text-dim:#5c5240; --ol-text-faint:#8a7f68; --ol-gold:#8a6820; --ol-gold-soft:rgba(138,104,32,0.12); --ol-gold-strong:#6e5119; --ol-danger:#a3392a; --ol-success:#3f6b3a; --ol-shadow:0 10px 26px rgba(90,74,40,0.18); --ol-grain-opacity:0.035; } *{box-sizing:border-box;} html,body{ margin:0; padding:0; background:var(--ol-bg); color:var(--ol-text); font-family:var(--ol-font-body); -webkit-font-smoothing:antialiased; transition:background 0.35s ease, color 0.35s ease; } body{ position:relative; min-height:100vh; } /* grain texture overlay — SVG feTurbulence, soft-light blend */ .ol-grain{ position:fixed; inset:0; z-index:999; pointer-events:none; opacity:var(--ol-grain-opacity); mix-blend-mode:soft-light; background-image:url("data:image/svg+xml;utf8,"); } h1,h2,h3,h4{ font-family:var(--ol-font-display); letter-spacing:0.04em; color:var(--ol-gold); font-weight:600; margin:0 0 0.5em 0; } a{color:var(--ol-gold);} /* buttons */ .ol-btn{ font-family:var(--ol-font-ui); font-size:0.82rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--ol-text); background:var(--ol-bg-raised); border:1px solid var(--ol-border-strong); border-radius:6px; padding:0.6em 1.1em; cursor:pointer; transition:all 0.2s ease; } .ol-btn:hover:not(:disabled){ border-color:var(--ol-gold); color:var(--ol-gold-strong); background:var(--ol-gold-soft); } .ol-btn:disabled{ opacity:0.35; cursor:not-allowed; } .ol-btn-primary{ background:var(--ol-gold); border-color:var(--ol-gold); color:#0c0a08; font-weight:700; } .ol-btn-primary:hover:not(:disabled){ background:var(--ol-gold-strong); border-color:var(--ol-gold-strong); color:#0c0a08; } .ol-btn-primary:disabled{ background:var(--ol-border); border-color:var(--ol-border); color:var(--ol-text-faint); opacity:1; } /* inputs */ .ol-input{ font-family:var(--ol-font-mono); font-size:0.92rem; color:var(--ol-text); background:var(--ol-bg-raised); border:1px solid var(--ol-border); border-radius:5px; padding:0.55em 0.75em; width:100%; transition:border-color 0.2s ease; } .ol-input:focus{ outline:none; border-color:var(--ol-gold); } .ol-label{ font-family:var(--ol-font-ui); font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ol-text-dim); display:block; margin-bottom:0.4em; } .ol-hint{ font-family:var(--ol-font-ui); font-size:0.72rem; color:var(--ol-text-faint); margin-top:0.35em; } /* theme toggle */ .ol-theme-toggle{ position:fixed; top:1.2rem; right:1.2rem; z-index:50; width:2.6rem; height:2.6rem; border-radius:50%; border:1px solid var(--ol-border-strong); background:var(--ol-bg-raised); color:var(--ol-gold); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:1.1rem; box-shadow:var(--ol-shadow); transition:all 0.2s ease; } .ol-theme-toggle:hover{ border-color:var(--ol-gold); transform:scale(1.05); } /* toast */ .ol-toast{ position:fixed; bottom:4.6rem; left:50%; transform:translateX(-50%) translateY(20px); z-index:1000; background:var(--ol-bg-raised); border:1px solid var(--ol-gold); color:var(--ol-text); font-family:var(--ol-font-ui); font-size:0.85rem; padding:0.7em 1.4em; border-radius:8px; box-shadow:var(--ol-shadow); opacity:0; pointer-events:none; transition:opacity 0.25s ease, transform 0.25s ease; } .ol-toast.ol-toast-show{ opacity:1; transform:translateX(-50%) translateY(0); } /* scrollbar (webkit) */ ::-webkit-scrollbar{width:10px;height:10px;} ::-webkit-scrollbar-track{background:var(--ol-bg);} ::-webkit-scrollbar-thumb{background:var(--ol-border-strong);border-radius:6px;} ::-webkit-scrollbar-thumb:hover{background:var(--ol-gold);}