/* ==========================================================================
   samisee.design v3, DESIGN TOKENS
   Exported from Figma (samisee Design System, qJmxigffkLsyAnhQBdlQu2) on
   October 17, 2026. Figma is the source of truth: change a value there, then
   re-export. Do not hand-tune one value here in isolation.

   Colour system: one OKLCH system, three looks by the visitor's time of day.
   - accents: blue H256, lilac H297, blush H356, matched lightness per look
   - every neutral is tinted to lilac's hue (297)
   - sunset adds two guests only: apricot (accent-2) and gold (opal-warm)
   The page sets body[data-look] to night, sunset or day. No attribute = night.
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------ TYPE */
  --text-micro: 8px;      --lh-micro: 1.6;
  --text-caption: 10px;   --lh-caption: 1.6;
  --text-body: 12px;      --lh-body: 1.5;
  --text-lead: 14px;      --lh-lead: 1.5;
  --text-subhead: 17px;   --lh-subhead: 1.3;
  --text-title: 24px;     --lh-title: 1.3;
  --text-display: 34px;   --lh-display: 1.15;
  --text-hero: 48px;      --lh-hero: 1.15;

  --track-none: 0;
  --track-tight: 0.5px;
  --track-label: 1px;
  --track-wide: 2px;
  --track-wider: 3px;
  --track-widest: 4px;

  /* Voice + wink. Syne is the voice at weight 740: Syne gets wider as it gets
     heavier, and 740 is where it matches Krona One's width while keeping its
     own g and w. Use 700 for smaller headings, 800 for one hero moment at most.
     Bagel Fat One is the wink: earned moments only (boot greeting, stickers,
     snake title, error screens), never content or navigation.
     Instrument Sans tops out at 700, so the three "extrabold" body styles
     render 700. DM Mono has no bold: 500 is the heaviest. */
  --font-display: 'Syne', sans-serif;
  --weight-display: 740;
  --font-accent: 'Bagel Fat One', cursive;
  --font-body: 'Instrument Sans', sans-serif;
  --font-mono: 'DM Mono', monospace;

  /* ----------------------------------------------------------------- SPACE */
  --space-hair: 2px;
  --space-xs: 4px;
  --space-sm: 6px;
  --space-md: 8px;
  --space-lg: 12px;
  --space-xl: 16px;
  --space-2xl: 24px;
  --space-3xl: 32px;

  /* ---------------------------------------------------------------- RADIUS */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ---------------------------------------------------------------- MOTION */
  --motion-state: 110ms;
  --motion-exit: 220ms;
  --motion-enter: 440ms;
  --motion-slow: 880ms;
  --ease-standard: cubic-bezier(0.2, 0, 0.2, 1);
  --ease-enter: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-linear: linear;

  /* --------------------------------------------------------------------- Z */
  --z-sky: 0;
  --z-decor: 1;
  --z-chrome: 2;
  --z-icons: 5;
  --z-rail: 6;
  --z-drag: 8;
  --z-win: 10;
  --z-note: 39;
  --z-dock: 40;
  --z-bubble: 45;
  --z-floaty: 46;
  --z-menu: 50;
  --z-menu-drop: 55;
  --z-phone: 60;
  --z-crt: 65;
  --z-settings: 71;
  --z-modal: 72;
  --z-toast: 80;
  --z-overlay: 90;
  --z-boot: 100;

  /* ---------------------------------------------------------- STATIC COLOUR
     Theme-independent. Status meaning does not change with the look.
     --on-cta follows the look, so it lives with the composites on body. */
  --os-success: #1c7d5a;      --os-success-tint: #1c7d5a1f;
  --os-warning: #9a6410;      --os-warning-tint: #9a64101f;
  --os-danger: #b3243f;       --os-danger-tint: #b3243f1f;
  --os-disabled: #8a8697;

  /* Window lights: blush, lilac and ice at one lightness (OKLCH L 0.65), so all
     three clear 3:1 on the night bar and the day bar. Not look tokens: a window
     control that changes colour with the look stops being a control. */
  --tl-close: #c07591;
  --tl-shade: #9682c5;
  --tl-zoom: #6691cb;

  /* The flat landing-page layer from the original OS shell, moved onto the lilac
     and blush families. Names kept so the lifted os.css still resolves them. */
  --purple-dark: #423362;
  --purple-mid: #775eab;
  --purple-text: #534178;
  --purple-accent: #8d77c0;
  --purple-accent-2: #b8aadf;
  --pink: #a34e71;
  --pink-soft: #dca3b7;
  --lilac: #c2b5e7;
  --button-top: #886fbf;
  --button-bottom: #775eab;
  --card-bg: #fafafcbf;
  --pill-bg: #fafafccc;
  --tag-bg: #fafafc99;
  --grid-line: #f2f0f833;
}

/* ============================================================== LOOKS
   Declared on body, not :root, because the look attribute lives on body and
   the composite gradients at the end must resolve against the active look. */

/* ---- night (default) ---- */
body,
body[data-look="night"] {
  --os-ink: #f2f0f8;
  --os-ink-dim: #8a8697;
  --os-ink-faint: #494553;
  --os-accent: #b8aadf;
  --os-accent-2: #98b8e4;
  --os-accent-3: #dca3b7;
  --on-accent: #0c0a10;
  --os-surface: #15121bdb;
  --os-pill: #191620f2;
  --os-border: #201d29;
  --os-border-strong: #494553;
  --os-glass: #15121b8f;
  --os-glass-dense: #15121beb;
  --glass-edge: #f2f0f824;
  --glass-spec: #f2f0f840;
  --glass-sheen: 0.12;
  --os-inset: #0c0a10e5;
  --os-shadow: #00000073;
  --os-scrim: #0c0a1099;
  --os-selection: #b8aadf4d;
  --os-selection-ink: #f2f0f8;
  --grid-line: #f2f0f80f;
  --motif-op: 0.5;
  --os-sky-stop-1: #0c0a10;
  --os-sky-stop-2: #130f1b;
  --os-sky-stop-3: #0c0a10;
  --t-deco: #dca3b7;
  --t-bar-ink: #f2f0f8;
  --t-bar-chip: #f2f0f814;
  --t-bar-stop-1: #15121b;
  --t-bar-stop-2: #1a1822;
  --t-bar-stop-3: #15121b;
  --t-bar-stop-4: #0c0a10;
  --t-cta-top: #c2b5e7;
  --t-cta-bottom: #b8aadf;
  --t-on-cta: #0c0a10;
  --opal-silver: #c9c8d4;
  --opal-warm: #f6efe6;
  --glass-fill: #15121b4d;
  --glass-fill-chip: #15121b38;
  --window-fill: #15121be6;
  --os-wash: #f2f0f80f;
  --os-accent-wash: #b8aadf24;
  --os-accent-line: #b8aadf4d;
}

/* ---- sunset (sunrise and sunset) ---- */
body[data-look="sunset"] {
  --os-ink: #f2f0f8;
  --os-ink-dim: #8a8697;
  --os-ink-faint: #494553;
  --os-accent: #b8aadf;
  --os-accent-2: #f0b788;
  --os-accent-3: #dca3b7;
  --on-accent: #0c0a10;
  --os-surface: #15121bdb;
  --os-pill: #191620f2;
  --os-border: #201d29;
  --os-border-strong: #494553;
  --os-glass: #15121bc2;
  --os-glass-dense: #15121beb;
  --glass-edge: #f2f0f81f;
  --glass-spec: #f2f0f838;
  --glass-sheen: 0.2;
  --os-inset: #0c0a10e5;
  --os-shadow: #06050c73;
  --os-scrim: #0c0a1099;
  --os-selection: #b8aadf4d;
  --os-selection-ink: #f2f0f8;
  --grid-line: #f2f0f814;
  --motif-op: 0.35;
  --os-sky-stop-1: #221a32;
  --os-sky-stop-2: #c3829a;
  --os-sky-stop-3: #f5d6a3;
  --t-deco: #dca3b7;
  --t-bar-ink: #f2f0f8;
  --t-bar-chip: #f2f0f814;
  --t-bar-stop-1: #15121b;
  --t-bar-stop-2: #1a1822;
  --t-bar-stop-3: #15121b;
  --t-bar-stop-4: #0c0a10;
  --t-cta-top: #c2b5e7;
  --t-cta-bottom: #b8aadf;
  --t-on-cta: #0c0a10;
  --opal-silver: #c9c8d4;
  --opal-warm: #f3d6a7;
  --glass-fill: #15121b66;
  --glass-fill-chip: #15121b4d;
  --window-fill: #15121be6;
  --os-wash: #f2f0f812;
  --os-accent-wash: #b8aadf29;
  --os-accent-line: #b8aadf52;
}

/* ---- day ---- */
body[data-look="day"] {
  --os-ink: #282237;
  --os-ink-dim: #6a6579;
  --os-ink-faint: #a9a5b4;
  --os-accent: #775eab;
  --os-accent-2: #3c6fb3;
  --os-accent-3: #a34e71;
  --on-accent: #fafafc;
  --os-surface: #fafafcdb;
  --os-pill: #fafafcf2;
  --os-border: #dfdce6;
  --os-border-strong: #a9a5b4;
  --os-glass: #fafafccc;
  --os-glass-dense: #fafafceb;
  --glass-edge: #ffffffcc;
  --glass-spec: #fffffff2;
  --glass-sheen: 0.42;
  --os-inset: #ffffffe5;
  --os-shadow: #30284438;
  --os-scrim: #28223773;
  --os-selection: #775eab33;
  --os-selection-ink: #282237;
  --grid-line: #775eab1a;
  --motif-op: 0.25;
  --os-sky-stop-1: #dce5f2;
  --os-sky-stop-2: #efeef2;
  --os-sky-stop-3: #f6ebef;
  --t-deco: #dca3b7;
  --t-bar-ink: #282237;
  --t-bar-chip: #28223714;
  --t-bar-stop-1: #fafafc;
  --t-bar-stop-2: #f4f3f7;
  --t-bar-stop-3: #fafafc;
  --t-bar-stop-4: #efeef2;
  --t-cta-top: #7d64b4;
  --t-cta-bottom: #775eab;
  --t-on-cta: #ffffff;
  --opal-silver: #c4c3d0;
  --opal-warm: #fdfaf5;
  --glass-fill: #fafafc73;
  --glass-fill-chip: #fafafc66;
  --window-fill: #fafafceb;
  --os-wash: #2822370d;
  --os-accent-wash: #775eab1f;
  --os-accent-line: #775eab4d;
}

/* ---- composites, built from the active look's stops ----
   Gradients blend in oklch so the in-between colours stay clean. */
body {
  --on-cta: var(--t-on-cta);
  --os-sky: linear-gradient(180deg in oklch, var(--os-sky-stop-1), var(--os-sky-stop-2), var(--os-sky-stop-3));
  --t-bar: linear-gradient(115deg in oklch, var(--t-bar-stop-1), var(--t-bar-stop-2), var(--t-bar-stop-3), var(--t-bar-stop-4));
  --t-cta: linear-gradient(180deg in oklch, var(--t-cta-top), var(--t-cta-bottom));
}