/* Avance brand tokens
   Source of truth: Avance_Brand_Guidelines.html (sections 03 to 14).
   Dark is the default face; [data-theme="light"] is Nebula by day. */

@font-face { font-family: 'Clash Display'; src: url('fonts/ClashDisplay-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Clash Display'; src: url('fonts/ClashDisplay-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('fonts/Satoshi-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('fonts/Satoshi-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('fonts/Satoshi-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('fonts/JetBrainsMono-500.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; }

/* Animatable angle for the chrome rim (Chromium, Safari 16.4+, Firefox 128+). */
@property --chrome-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
/* Animatable positions for the living chrome button: each light drifts on its own clock. */
@property --lm-x { syntax: '<percentage>'; inherits: false; initial-value: 18%; }
@property --lm-y { syntax: '<percentage>'; inherits: false; initial-value: 30%; }
@property --lb-x { syntax: '<percentage>'; inherits: false; initial-value: 82%; }
@property --lb-y { syntax: '<percentage>'; inherits: false; initial-value: 70%; }
@property --lv-x { syntax: '<percentage>'; inherits: false; initial-value: 50%; }
@property --glint { syntax: '<percentage>'; inherits: false; initial-value: -30%; }
@property --glow { syntax: '<number>'; inherits: false; initial-value: .7; }

:root {
  /* ── the depths ─────────────────────────────────────────────── */
  --void: #07070F;          /* page ground                        */
  --abyss: #0E0D1C;         /* nav, alternating bands, code       */
  --deep: #121124;          /* cards, panels                      */
  --kir-royale: #1C1A36;    /* raised cards, inputs, active row   */
  --plum-violet: #2A2650;   /* strong lines, selected chips       */
  --starlight: #F3F0FA;     /* type on dark, the mark's lead form */

  /* ── the spectrum: shapes, fills, lines. Never body text. ──── */
  --magenta: #C12E8E;
  --pink: #FF6AD5;
  --orchid: #9B5CFF;
  --violet: #6A2FD0;
  --electric: #4C6BFF;

  /* ── readable shades: the only spectrum colours set as text ── */
  --violet-lift: #B18CFF;   /* on dark, 7.71:1 on void  */
  --magenta-lift: #FF8AE0;  /* on dark, 9.52:1 on void  */
  --violet-ink: #6A2FD0;    /* on day, 6.46:1 on #F4F2FA */
  --magenta-ink: #A3137A;   /* on day, 6.46:1 on #F4F2FA */

  /* ── gradients ──────────────────────────────────────────────── */
  --spectrum: linear-gradient(115deg, #C12E8E 0%, #8B3FE8 48%, #3A5BFF 100%);   /* white label ≥ 5.10:1 */
  --spectrum-line: linear-gradient(90deg, #FF6AD5, #9B5CFF 45%, #4C6BFF 80%, transparent);
  --sheen: linear-gradient(100deg, #FFFFFF 0%, #EEDFFF 40%, #FFC2EF 72%, #B9C8FF 100%);   /* display headline, dark only */
  --chrome-rim: conic-gradient(from var(--chrome-angle), #FFFFFF 0%, #FF6AD5 18%, #9B5CFF 38%, #4C6BFF 58%, #B9C8FF 76%, #FFFFFF 99.5%);
  --chrome-flow: linear-gradient(115deg, #C12E8E 0%, #8B3FE8 24%, #3A5BFF 50%, #8B3FE8 76%, #C12E8E 100%);   /* chrome button fill, background-size 200% */
  --specular: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.55) 48%, rgba(255,255,255,.12) 56%, transparent 70%);
  --mark-gradient: linear-gradient(135deg, #FF6AD5 0%, #9B5CFF 55%, #4C6BFF 100%);      /* trailing form, dark grounds */
  --mark-gradient-ink: linear-gradient(135deg, #C12E8E 0%, #7B35E0 55%, #3A5BFF 100%);  /* trailing form, light grounds */

  /* ── type ───────────────────────────────────────────────────── */
  --display: 'Clash Display', 'Segoe UI', Helvetica, Arial, sans-serif;
  --body: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --fs-display: clamp(48px, 6vw, 88px);  --lh-display: 1.0;   --ls-display: -0.02em;   /* Clash 600 */
  --fs-h1: clamp(38px, 4.4vw, 56px);     --lh-h1: 1.04;       --ls-h1: -0.015em;       /* Clash 600 */
  --fs-h2: clamp(28px, 3vw, 36px);       --lh-h2: 1.1;        --ls-h2: -0.01em;        /* Clash 600 */
  --fs-h3: 22px;                         --lh-h3: 1.2;        --ls-h3: 0;              /* Clash 500 */
  --fs-body: 16px;                       --lh-body: 1.6;                                /* Satoshi 400 */
  --fs-small: 13.5px;                    --lh-small: 1.5;                               /* Satoshi 400 */
  --fs-eyebrow: 11.5px;                  --ls-eyebrow: 0.14em;                          /* JetBrains Mono 500, uppercase */

  /* ── space, radius ──────────────────────────────────────────── */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --radius-xs: 10px; --radius-sm: 14px; --radius: 18px; --radius-lg: 26px; --radius-pill: 999px;

  /* ── motion ─────────────────────────────────────────────────── */
  --ease: cubic-bezier(.2,.7,.2,1);         /* standard state change            */
  --ease-out: cubic-bezier(.16,1,.3,1);     /* entrances, no overshoot          */
  --ease-in: cubic-bezier(.4,0,1,1);        /* exits                            */
  --ease-spring: cubic-bezier(.2,.9,.1,1.15); /* small UI only: press, toggle, chip, tag */
  --dur-fast: 160ms; --dur: 240ms; --dur-spring: 320ms; --dur-enter: 420ms; --dur-slow: 700ms;
  --dur-sweep: 900ms;       /* specular sweep across a chrome button */
  --dur-rim: 6s;            /* one rotation of the chrome rim         */
  --dur-drift: 30s;         /* ambient chrome background              */
  --dur-flow: 9s;           /* chrome button fill drift, alternate    */
  --dur-ring: 520ms;        /* press ring                             */
  --stagger: 80ms;

  /* ── dark: the face of the brand ────────────────────────────── */
  --bg: var(--void);
  --surface: var(--deep);
  --raised: var(--kir-royale);
  --line: #252244;
  --line-hi: #3D3670;
  --ink: var(--starlight);
  --ink-2: #C9C3DF;          /* 11.81:1 */
  --mut: #948DB3;            /* 6.42:1  */
  --accent: var(--violet-lift);
  --accent-2: var(--magenta-lift);
  --accent-soft: rgba(177,140,255,.15);
  --btn-ink: #FFFFFF;
  --bloom: rgba(155,92,255,.34);
  --glare: rgba(255,255,255,.07);
  --inset: inset 0 1px 0 rgba(255,255,255,.04);
  --lit: inset 0 1px 0 rgba(255,255,255,.05), 0 0 0 1px rgba(155,92,255,.12), 0 18px 40px -26px rgba(139,63,232,.55);
  --scrim: linear-gradient(0deg, rgba(7,7,15,.92) 0%, rgba(7,7,15,.62) 52%, rgba(7,7,15,0) 100%);
  --scrim-window: linear-gradient(180deg, rgba(7,7,15,.60) 0%, rgba(7,7,15,.68) 42%, rgba(7,7,15,.84) 100%);   /* chrome window, every line ≥ 4.7:1 */
  --glass: color-mix(in srgb, var(--surface) 80%, transparent);
  --glass-blur: blur(20px) saturate(1.4);
  --focus: 0 0 0 4px rgba(155,92,255,.28);
  --mark-lead: var(--starlight);
  color-scheme: dark;
}

[data-theme="light"] {
  --bg: #F4F2FA;
  --surface: #FFFFFF;
  --raised: #EEEAF7;
  --line: #E0DAF0;
  --line-hi: #C9BFE3;
  --ink: #16122B;            /* 16.38:1 */
  --ink-2: #4A4466;          /* 8.19:1  */
  --mut: #6F6890;            /* 4.66:1  */
  --accent: var(--violet-ink);
  --accent-2: var(--magenta-ink);
  --accent-soft: rgba(106,47,208,.10);
  --bloom: rgba(155,92,255,.20);
  --glare: rgba(155,92,255,.06);
  --inset: 0 1px 2px rgba(22,18,43,.05);
  --lit: 0 0 0 1px rgba(106,47,208,.14), 0 18px 40px -24px rgba(106,47,208,.35);
  --focus: 0 0 0 4px rgba(106,47,208,.20);
  --mark-lead: #16122B;
  color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-sweep: 0ms; --dur-rim: 0s; --dur-drift: 0s; --dur-flow: 0s; --dur-ring: 0ms; --stagger: 0ms; }
}