/* ==========================================================================
   DELTA — Design Tokens v1.0
   Primitives → semantic. Everything else in the template reads these vars.

   Theme  : <html data-theme="daylight | after-hours">
   Stage  : <html data-stage="prelaunch | launch | scale">
   Rebrand: override the ~8 semantic tokens (canvas, surface, ink, line,
            action, on-action …) — marketing and app pick them up.
   ========================================================================== */

/* Typography ------------------------------------------------------------- */
:root {
  --font-display: 'Bricolage Grotesque', sans-serif;
  --font-body: 'Instrument Sans', system-ui, sans-serif;
  --font-mono: 'DM Mono', monospace;

  --container: 1280px;       /* marketing content width   */
  --gutter: 24px;            /* marketing side padding    */
  --kit-sidebar: 250px;      /* kit navigation width      */
  --kit-main-max: 1360px;    /* kit content max width     */
}

/* Theme: Daylight (default) ---------------------------------------------- */
:root,
[data-theme="daylight"] {
  --canvas: #FAFAF8;
  --surface: #FFFFFF;
  --surface-2: #F2F2EE;
  --surface-3: #E9E9E4;

  --ink: #111114;
  --ink-2: #474752;
  --ink-3: #63636E;

  --line: #E3E3DE;
  --line-2: #D2D2CC;

  --action: #C8189B;
  --action-hover: #A8127F;
  --on-action: #FFFFFF;
  --action-tint: #FBE8F5;

  --pos: #1E6B43;   --pos-bg: #E3F1E8;
  --neg: #A8342B;   --neg-bg: #F7E4E1;
  --warn: #8A5A00;  --warn-bg: #FBF0D9;
  --info: #2A5BA8;  --info-bg: #E4ECF8;

  /* Categorical data colors */
  --c1: #3E6FB0;
  --c2: #D08A1E;
  --c3: #2F8F7A;
  --c4: #8A5CB8;
  --c5: #C4553B;
  --c6: #5B7F2A;

  --shadow-frame: 0 1px 0 rgba(17,17,20,.04), 0 12px 24px -8px rgba(17,17,20,.10), 0 40px 80px -24px rgba(17,17,20,.18);
  --shadow-pop: 0 12px 32px -8px rgba(17,17,20,.22);

  --inverse: #111114;
  --on-inverse: #EDEDF0;
}

/* Theme: After Hours (dark) ---------------------------------------------- */
[data-theme="after-hours"] {
  --canvas: #0E0E11;
  --surface: #16161B;
  --surface-2: #1E1E25;
  --surface-3: #272730;

  --ink: #EDEDF0;
  --ink-2: #B9B9C3;
  --ink-3: #9494A0;

  --line: #26262E;
  --line-2: #34343E;

  --action: #FF4FCB;
  --action-hover: #FF7AD8;
  --on-action: #111114;
  --action-tint: #3A1631;

  --pos: #62CE94;   --pos-bg: #16301F;
  --neg: #F2857B;   --neg-bg: #3A1C19;
  --warn: #E8B25A;  --warn-bg: #352A14;
  --info: #7FA8E8;  --info-bg: #18243A;

  --c1: #7FA8E8;
  --c2: #E8B25A;
  --c3: #5BC4AC;
  --c4: #B894E0;
  --c5: #EE8A70;
  --c6: #A6CC6A;

  --shadow-frame: 0 1px 0 rgba(255,255,255,.04) inset, 0 24px 60px -20px rgba(0,0,0,.7);
  --shadow-pop: 0 12px 32px -8px rgba(0,0,0,.6);

  --inverse: #EDEDF0;
  --on-inverse: #111114;
}

/* Stage presets: radius, hero scale, section rhythm ---------------------- */
:root,
[data-stage="launch"] {
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --hero-size: clamp(48px, 7.4vw, 112px);
  --hero-wdth: 88;
  --sec-pad: clamp(72px, 10vw, 144px);
}

[data-stage="prelaunch"] {
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --hero-size: clamp(56px, 9.6vw, 148px);
  --hero-wdth: 78;
  --sec-pad: clamp(88px, 12vw, 176px);
}

[data-stage="scale"] {
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --hero-size: clamp(44px, 5.8vw, 84px);
  --hero-wdth: 96;
  --sec-pad: clamp(64px, 8vw, 120px);
}