/* ============================================================
   tokens.css - Deaddit two-layer design-token system
   Layer 1: primitives (ramps). Layer 2: semantic roles.
   Light theme lives under :root; dark under html[data-theme="dark"].
   Both themes are first-class palettes - dark is designed, not
   an inversion of light.

   V2 "Tonal Surface" skin: Google-style soft-surface system.
   Ice-gray canvas + floating white islands + pill controls.
   Borders are retired as sectioning devices (--border: transparent);
   separation comes from the canvas/surface contrast plus soft
   double-layer shadows. Google four-color soft pairs carry all
   status/label chrome.

   Contrast ratios below were computed per WCAG 2.x relative
   luminance formula and must stay >= gate when edited:
     text-1 / text-2 : >= 4.5:1 vs --bg-canvas AND --bg-surface (AA)
     text-3          : >= 3:1   (large/UI)
     accent/down/up  : >= 3:1   (large/UI)
   ============================================================ */

/* ------------------------------------------------------------
   Webfont - Noto Sans SC variable (wght axis, self-hosted)
   ------------------------------------------------------------ */
@font-face {
    font-family: 'Noto Sans SC VF';
    src: url('../fonts/NotoSansSC-VF.ttf') format('truetype-variations'),
         url('../fonts/NotoSansSC-VF.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* ------------------------------------------------------------
   Layer 1 - Primitives
   ------------------------------------------------------------ */

/* Neutral ramp (slightly blue-tinted; never pure #000/#fff) */
:root {
    --gray-50:  #f7f8f9;
    --gray-100: #eef0f2;
    --gray-200: #dfe2e6;
    --gray-300: #c8ccd2;
    --gray-400: #a9aeb7;
    --gray-500: #878d97;
    --gray-600: #6b7078;
    --gray-700: #52565d;
    --gray-800: #3a3d42;
    --gray-900: #23262b;
    --gray-950: #14161a;

    /* Google four-color primitives (brand bar + breathing dots) */
    --g-blue:   #4285F4;
    --g-red:    #EA4335;
    --g-yellow: #FBBC04;
    --g-green:  #34A853;
    --four-color-bar: linear-gradient(90deg,
        var(--g-blue)   0 25%,
        var(--g-red)    25% 50%,
        var(--g-yellow) 50% 75%,
        var(--g-green)  75% 100%);

    /* Accent blue ramp (brand #0B57D0 family) */
    --accent-ramp-50:  #edf3fe;
    --accent-ramp-100: #e8f0fe;
    --accent-ramp-200: #d3e3fd;
    --accent-ramp-300: #a8c7fa;
    --accent-ramp-400: #7cacf8;
    --accent-ramp-500: #4c8df6;
    --accent-ramp-600: #1a73e8;
    --accent-ramp-700: #0b57d0;
    --accent-ramp-800: #0842a0;
    --accent-ramp-900: #06327a;
    --accent-ramp-950: #041e49;

    /* Interaction surfaces (hover fields, active thread lines) */
    --bg-hover-row: var(--gray-100);              /* quiet hover fill on rows/headers */
    --accent-soft-strong: #a8c7fa;                /* hover-chain thread line */

    /* Status ramps - base + soft background each (Google four-color
       soft pairs: light pastel fill + deep readable text) */
    --green-500:      #137333;
    --green-soft-50:  #e6f4ea;
    --yellow-600:     #b06000;
    --yellow-soft-50: #fef7e0;
    --red-600:        #c5221f;
    --red-soft-50:    #fce8e6;
    --info-600:       #0b57d0;
    --info-soft-50:   #e8f0fe;

    /* Card-level tints for KPI / stat surfaces */
    --green-card-50:  #ecf7ee;
    --yellow-card-50: #fef7e0;
    --red-card-50:    #fce8e6;
    --blue-card-50:   #edf3fe;

    --green-400:      #46b45e;
    --green-soft-900: #122b1d;
    --yellow-400:     #e3a008;
    --yellow-soft-900: #291f08;
    --red-400:        #ff7a76;
    --red-soft-900:   #2b1515;
    --info-400:       #79b5ec;
    --info-soft-900:  #14232e;

    --white: #ffffff;
}

/* ------------------------------------------------------------
   Layer 2 - Semantic roles: LIGHT
   ------------------------------------------------------------ */
:root {
    /* Backgrounds: ice-gray canvas + white floating islands */
    --bg-canvas: #f0f4f9;
    --bg-surface: #ffffff;
    --bg-elevated: var(--white);

    /* Text: three-step gray, never pure black */
    --text-1: #1f1f1f;   /* AA 16.10:1 on canvas, 17.44:1 on surface */
    --text-2: #444746;   /* AA  8.16:1 on canvas,  8.84:1 on surface */
    --text-3: #5f6368;   /* UI  5.15:1 on canvas,  5.58:1 on surface */

    /* Lines & chrome: borders are retired; surfaces section via
       tonal contrast. Kept as a token so high-contrast mode can
       restore real lines. */
    --border: transparent;

    /* Brand & interaction (Google blue) */
    --accent: var(--accent-ramp-700);        /* #0b57d0 - AA 6.34:1 on canvas, 6.85:1 on surface */
    --accent-soft: var(--accent-ramp-100);   /* #e8f0fe light-blue capsule fill */
    --on-accent: var(--white);
    --accent-hover: #0842a0;                 /* darker step for hovers */
    --accent-strong: var(--accent-ramp-700);        /* #0b57d0 selected/accent-solid fill; AA 5.95:1 with --on-accent (#ffffff) */
    --accent-strong-hover: var(--accent-ramp-800);  /* #0842a0 - AA 7.61:1 with --on-accent */
    --link: var(--accent-ramp-700);          /* #0b57d0 - AA 6.34:1 on canvas, 6.85:1 on surface */
    --up: var(--green-500);                  /* #137333 - UI 5.13:1 on canvas, 5.56:1 on surface */
    --up-hover: #0d652d;                     /* UI 6.93:1 on canvas, 7.51:1 on surface */
    --down: var(--accent-ramp-700);          /* #0b57d0 */
    --down-hover: var(--accent-ramp-800);    /* #0842a0 */

    /* Rails & highlights */
    --rail: var(--gray-300);                 /* nesting guide line - decorative, non-text (1.45:1 vs canvas) */
    /* Comment thread rails, cycled by nesting depth. Purely decorative
       wayfinding (depth is also carried by indent, chevron and aria), so
       these sit below text contrast gates; they are tuned to read against
       --bg-surface without competing with the comment text itself. */
    --rail-0: #b9c2d4;
    --rail-1: #7fb2d9;
    --rail-2: #86bf9a;
    --rail-3: #d8a86a;
    --rail-4: #b79ed4;
    --rail-5: #d79aa8;
    --highlight-bg: var(--accent-ramp-100);  /* soft permalink flash - 15.11:1 with text-1, 6.77:1 with text-2 */

    /* Status (Google four-color soft pairs) */
    --status-success: var(--green-500);      /* #137333 */
    --status-success-soft: var(--green-soft-50);
    --status-warning: var(--yellow-600);     /* #b06000 - AA 4.54:1 on soft fill */
    --status-warning-strong: #8a5c00;        /* AA small-text 5.24:1 on canvas */
    --status-danger: var(--red-600);         /* #c5221f */
    --status-danger-soft: var(--red-soft-50);
    --status-info: var(--info-600);          /* #0b57d0 */
    --status-info-soft: var(--info-soft-50);

    /* Focus */
    --focus-ring: 0 0 0 3px rgba(11, 87, 208, 0.30);

    /* Elevation: extremely soft double-layer shadows - separation
       comes from the ice-gray canvas, not from heavy drop shadows */
    --shadow-1: 0 1px 2px rgba(31, 41, 55, 0.05), 0 2px 8px rgba(31, 41, 55, 0.05);
    --shadow-2: 0 1px 3px rgba(31, 41, 55, 0.07), 0 6px 20px rgba(31, 41, 55, 0.09);
    --shadow-3: 0 2px 6px rgba(31, 41, 55, 0.08), 0 12px 32px rgba(31, 41, 55, 0.14);

    /* Spacing system */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-xxl: 48px;

    /* Border radius: islands 20-24px, pills 999px */
    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 24px;
    --radius-pill: 999px;

    /* Typography scale */
    --font-family: 'Noto Sans SC VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
        'PingFang SC', 'Microsoft YaHei', Oxygen, Ubuntu, Cantarell, sans-serif;
    --font-size-xs: 12.5px;
    --font-size-sm: 14.5px;
    --font-size-base: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 24px;
    --font-size-xxl: 32px;
    /* Variable-font weight gradient (Noto Sans SC VF wght axis) */
    --wght-body: 490;      /* body/table copy - fuller than 400, never thin */
    --wght-ui: 550;        /* buttons / inputs / filters */
    --wght-strong: 650;    /* table heads / capsule labels / selected nav / card titles */
    --line-height-tight: 1.25;
    --line-height-normal: 1.55;
    --line-height-relaxed: 1.75;

    /* Motion */
    --motion-fast: 150ms;
    --motion-slow: 250ms;
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);

    /* Z-index ladder: dropdown < sticky < overlay < toast */
    --z-dropdown: 10;
    --z-sticky: 100;
    --z-overlay: 1000;
    --z-toast: 1100;
}

/* ------------------------------------------------------------
   Layer 2 - Semantic roles: DARK (designed palette, not inverted;
   same tonal temperament: deep ice-gray canvas + darker floating
   islands + Google four-color soft pairs, dark-tuned)
   ------------------------------------------------------------ */
html[data-theme="dark"] {
    /* Backgrounds */
    --bg-canvas: #0f141a;
    --bg-surface: #171d24;
    --bg-elevated: #1e252d;

    /* Text */
    --text-1: #e3e6ea;   /* AA 14.98:1 on canvas, 12.35:1 on surface */
    --text-2: #9aa4ae;   /* AA  7.24:1 on canvas,  5.97:1 on surface */
    --text-3: #6e7883;   /* UI  3.61:1 on canvas,  3.02:1 on surface */

    /* Lines & chrome */
    --border: transparent;

    /* Brand & interaction (accent shifted lighter: saturated
       mid-tones glow on dark surfaces). Solid fills stay #0b57d0
       with white text, exactly like light. */
    --accent: var(--accent-ramp-300);        /* #a8c7fa - UI 10.5:1 on canvas, 8.7:1 on surface */
    --accent-soft: #1e3358;                  /* dark-tinted blue wash */
    --accent-strong: var(--accent-ramp-700);        /* #0b57d0 solid fill; AA 5.95:1 with --on-accent (#ffffff) */
    --accent-strong-hover: var(--accent-ramp-600);  /* #1a73e8 lighter step for dark hover; AA 4.57:1 with --on-accent */
    --accent-hover: var(--accent-ramp-200);  /* #d3e3fd lighter step for hovers on dark */
    --on-accent: var(--white);
    --link: var(--accent-ramp-300);          /* #a8c7fa - AA 10.5:1 on canvas, 8.7:1 on surface */
    --up: #81c995;                           /* UI 8.4:1 on canvas, 6.9:1 on surface */
    --up-hover: #9cdcaa;                     /* UI 10.5:1 on canvas, 8.7:1 on surface */
    --down: var(--accent-ramp-300);          /* #a8c7fa */
    --down-hover: var(--accent-ramp-200);    /* #d3e3fd */

    /* Rails & highlights */
    --rail: var(--gray-800);                 /* nesting guide line - decorative, non-text */
    /* Depth rails, dark-tuned: same hue order as light, dropped in
       lightness and saturation so a deep thread does not turn into a
       stack of glowing lines. */
    --rail-0: #3c4454;
    --rail-1: #35526b;
    --rail-2: #35583f;
    --rail-3: #63492a;
    --rail-4: #4a3f66;
    --rail-5: #62343f;
    --highlight-bg: #1e3358;                 /* dark-blue wash - 8.4:1 with text-1 */
    --accent-soft-strong: #2a4a7f;           /* visible blue thread line on dark */

    /* Status (dark-tuned soft pairs) */
    --status-success: #81c995;
    --status-success-soft: #122b1d;
    --status-warning: #fdd663;
    --status-warning-strong: #fdd663;
    --status-danger: #f28b82;
    --status-danger-soft: #2b1515;
    --status-info: var(--accent-ramp-300);
    --status-info-soft: #142a47;

    /* Interaction surfaces (dark-tuned) */
    --bg-hover-row: #1e252d;        /* = bg-elevated: lifts without glow */

    /* Card-level tints (dark) */
    --green-card-50: #122b1d;
    --yellow-card-50: #291f08;
    --red-card-50: #2b1515;
    --blue-card-50: #142a47;

    /* Elevation: shadows deepen on dark; islands separate via lightness */
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.40), 0 2px 8px rgba(0, 0, 0, 0.30);
    --shadow-2: 0 1px 3px rgba(0, 0, 0, 0.45), 0 6px 20px rgba(0, 0, 0, 0.40);
    --shadow-3: 0 2px 6px rgba(0, 0, 0, 0.50), 0 12px 32px rgba(0, 0, 0, 0.50);
}