/* ============================================================
Champagne RGB — portable design tokens + core components
Drop-in:
Fonts:
Dark: set data-theme="dark" on
============================================================ */
:root {
/* base */
--ivory: #FBF7F0;
--ivory-2: #F5EFE4;
--paper: #FFFFFF;
--ink: #1A1A1F;
--ink-2: #2E2E36;
--ink-3: #5E5E68;
--ink-4: #8A8A92;
--hairline: rgba(31, 30, 34, 0.08);
--hairline-2: rgba(31, 30, 34, 0.04);
/* pastels */
--sky: #CFE0FF;
--sky-deep: #3D7BFF;
--turq: #C4FBFF;
--turq-deep: #00BCD9;
--lav: #E4D2FF;
--lav-deep: #8A2BFF;
--blush: #FFD1F1;
--blush-deep: #FF2EC4;
--gold: #F0D89C;
--gold-deep: #BE8B2C;
--green: #C9FF9E;
--green-deep: #6FD400;
/* LED spectrum sweep, from the champagne+RGB hardware */
--led: linear-gradient(90deg, #7CFF2E, #00E5FF 32%, #3D7BFF 55%, #8A2BFF 78%, #FF2EC4);
--led-conic: conic-gradient(from 200deg, #7CFF2E, #00E5FF, #3D7BFF, #8A2BFF, #FF2EC4, #7CFF2E);
--champagne: linear-gradient(135deg, #FBEFD3 0%, #E9CE96 45%, #C79A4B 100%);
/* shadows */
--shadow-soft: 0 1px 2px rgba(31,30,34,.04), 0 6px 24px -10px rgba(31,30,34,.08);
--shadow-card: 0 1px 2px rgba(31,30,34,.05), 0 18px 40px -22px rgba(31,30,34,.18);
--shadow-lift: 0 2px 4px rgba(31,30,34,.04), 0 30px 60px -30px rgba(31,30,34,.25);
--shadow-inner: inset 0 1px 0 rgba(255,255,255,.7);
/* radii */
--r-xs: 10px;
--r-sm: 14px;
--r: 20px;
--r-lg: 28px;
--r-xl: 36px;
--r-2xl: 48px;
/* type */
--font-display: "Instrument Serif", "Cormorant Garamond", "Times New Roman", serif;
--font-ui: "Manrope", "Helvetica Neue", system-ui, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
--bg: var(--ivory);
--bg-2: var(--ivory-2);
--surface: var(--paper);
--fg: var(--ink);
--fg-2: var(--ink-2);
--fg-3: var(--ink-3);
--fg-4: var(--ink-4);
--border: var(--hairline);
}
[data-theme="dark"] {
--ivory: #131318;
--ivory-2: #1B1B22;
--paper: #1F1F27;
--ink: #F2EEE5;
--ink-2: #D6D1C5;
--ink-3: #99959E;
--ink-4: #6E6A75;
--hairline: rgba(242, 238, 229, 0.10);
--hairline-2: rgba(242, 238, 229, 0.05);
--sky: #12294D;
--sky-deep: #5C8FFF;
--turq: #06373D;
--turq-deep: #2BE9FF;
--lav: #241442;
--lav-deep: #A96BFF;
--blush: #3D0E31;
--blush-deep: #FF5CD0;
--gold: #6B4E1A;
--gold-deep: #F0D89C;
--green: #2B4A0F;
--green-deep: #8CFF4D;
--shadow-soft: 0 1px 2px rgba(0,0,0,.3), 0 6px 24px -10px rgba(0,0,0,.5);
--shadow-card: 0 1px 2px rgba(0,0,0,.4), 0 18px 40px -22px rgba(0,0,0,.6);
--shadow-lift: 0 2px 4px rgba(0,0,0,.4), 0 30px 60px -30px rgba(0,0,0,.7);
--shadow-inner: inset 0 1px 0 rgba(255,255,255,.06);
--bg: var(--ivory);
--bg-2: var(--ivory-2);
--surface: var(--paper);
--fg: var(--ink);
--fg-2: var(--ink-2);
--fg-3: var(--ink-3);
--fg-4: var(--ink-4);
--border: var(--hairline);
}
/* ---------- base ---------- */
body{background:var(--bg);color:var(--fg);font-family:var(--font-ui);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--gold-deep);text-decoration-color:color-mix(in oklab,var(--gold-deep) 40%,transparent);text-underline-offset:3px}
a:hover{color:var(--lav-deep);text-decoration-color:currentColor}
/* ---------- type ---------- */
.display,.h1,.h2,.h3{font-family:var(--font-display);font-weight:400;letter-spacing:-.02em;line-height:1.05;margin:0}
.display{font-size:clamp(44px,6vw,84px)}
.h2{font-size:clamp(30px,3.4vw,48px)}
.h3{font-size:clamp(20px,1.6vw,26px);line-height:1.2}
.display em,.h2 em,.h3 em{font-style:italic;color:var(--gold-deep)}
.eyebrow,.mono{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.lede{font-size:19px;color:var(--fg-2);max-width:62ch;text-wrap:pretty}
/* ---------- surfaces ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow-card);padding:24px}
.band{background:var(--bg-2)}
/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-ui);font-weight:600;font-size:14px;padding:12px 20px;border-radius:999px;border:1px solid transparent;cursor:pointer;text-decoration:none;transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-1px)}
.btn--gold{background:var(--champagne);color:#33240A;box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 10px 28px -10px color-mix(in oklab,var(--gold-deep) 70%,transparent)}
.btn--ghost{background:transparent;color:var(--fg);border-color:color-mix(in oklab,var(--fg) 12%,transparent)}
.btn--ghost:hover{border-color:color-mix(in oklab,var(--fg) 16%,transparent)}
/* ---------- accents ---------- */
.pill{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;background:var(--surface);border:1px solid var(--border);font-size:12px;font-weight:600}
.pill .dot{width:6px;height:6px;border-radius:999px;background:var(--green-deep);box-shadow:0 0 0 3px color-mix(in oklab,var(--green) 45%,transparent)}
.pill.sky .dot{background:var(--sky-deep);box-shadow:0 0 0 3px color-mix(in oklab,var(--sky) 60%,transparent)}
.pill.turq .dot{background:var(--turq-deep);box-shadow:0 0 0 3px color-mix(in oklab,var(--turq) 60%,transparent)}
.pill.lav .dot{background:var(--lav-deep);box-shadow:0 0 0 3px color-mix(in oklab,var(--lav) 60%,transparent)}
.pill.blush .dot{background:var(--blush-deep);box-shadow:0 0 0 3px color-mix(in oklab,var(--blush) 60%,transparent)}
/* the LED signature — use once or twice per screen, no more */
.led-bar{height:8px;border-radius:999px;background:var(--led)}
.led-mark{width:34px;height:34px;border-radius:11px;background:var(--led-conic)}
.led-rule{height:2px;border:0;background:var(--led);opacity:.9}