/* ══════════════════════════════════════════════════════════════════════════
   Chattington design tokens (UI-Redesign Phase 1, 2026-10)
   ──────────────────────────────────────────────────────────────────────────
   The ONLY place in the app CSS with raw color, size and timing values.
   Every other stylesheet uses these variables — see DESIGN.md (normative
   spec) and scripts/check-css-tokens.js (enforcement). Exceptions, also in
   DESIGN.md: Twitch name colors and 7TV paints (data, inline styles), the
   Google logo's brand colors, the OBS overlay (client/overlay.css, styled
   for the stream picture, not the app).

   Naming: new, unambiguous names on purpose (--color-*, --s-*, --r-*,
   --fs-*, …). The legacy :root block in style.css (--space-*, --radius-*,
   --text, …) means different values under similar names; it goes away in
   Phase 2/3 as the components move over, so no token here shadows it.

   Contrast (WCAG, checked numerically, 2026-10-15): text-primary ≥ 14:1,
   text-secondary ≥ 6.5:1, text-tertiary ≥ 4.5:1 on every surface;
   white on accent 4.7:1 (hover 5.4:1); accent vs panel 3.9:1 (focus ring,
   non-text ≥ 3:1).
   ══════════════════════════════════════════════════════════════════════════ */

/* Inter (UI font), self-hosted variable font, weights 100–900.
   SIL Open Font License 1.1 — assets/fonts/LICENSE-Inter.txt. Subsets and
   unicode ranges as published by @fontsource-variable/inter 5.1.0. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/assets/fonts/inter-latin-ext.woff2') format('woff2-variations');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* No color-scheme here on purpose: it would restyle native controls
     (sliders, checkboxes, scrollbars) immediately. The Phase 2 base styles
     set `color-scheme: dark` together with the components that use it. */

  /* ── Surfaces: neutral dark gray, never pure black. Each step is only a
        few points lighter than the one below — depth comes from 1px
        borders, not from contrast between planes or shadows. ─────────── */
  --color-bg-canvas:   #0f1012; /* app frame + sidebar */
  --color-bg-panel:    #141518; /* main content area, chat pane */
  --color-bg-raised:   #191a1e; /* cards, list containers, composer */
  --color-bg-overlay:  #1e1f24; /* dropdowns, popovers, modals, toasts */
  --color-bg-input:    #111215; /* text fields, selects */
  --color-bg-hover:    rgba(255, 255, 255, .04); /* hover = a slight lightening only */
  --color-bg-active:   rgba(255, 255, 255, .07); /* pressed / current row in a neutral list */
  --color-bg-selected: rgba(94, 106, 210, .14);  /* selected item (accent-tinted) */
  --color-scrim:       rgba(8, 9, 10, .64);      /* behind modals / mobile drawer */

  /* ── Borders: 1px, low contrast. ──────────────────────────────────────── */
  --color-border-subtle: rgba(255, 255, 255, .06); /* dividers inside a surface */
  --color-border:        rgba(255, 255, 255, .09); /* default edge of cards, inputs, popovers */
  --color-border-strong: rgba(255, 255, 255, .14); /* hover edge of inputs/secondary buttons */

  /* ── Text: hierarchy through gray steps (and weight), not size. ───────── */
  --color-text-primary:   #ededf0;
  --color-text-secondary: #a0a3ab; /* descriptions, inactive nav, labels */
  --color-text-tertiary:  #868993; /* meta: timestamps, counts, hints — still AA */
  --color-text-disabled:  #55585f; /* disabled controls only, never information */
  --color-text-on-accent: #ffffff;

  /* ── Accent: ONE color (indigo), sparingly — active, focus, primary. ──── */
  --color-accent:        #5e6ad2;
  --color-accent-hover:  #5560c8; /* darker on hover, keeps white text ≥ 5:1 */
  --color-accent-press:  #4c56b8;
  --color-accent-text:   #939cf0; /* accent as text/icon color on dark surfaces */
  --color-accent-subtle: rgba(94, 106, 210, .14);
  --color-accent-faint:  rgba(94, 106, 210, .08); /* ranking share bars — quieter than subtle */
  --color-accent-border: rgba(94, 106, 210, .45);
  --color-focus-ring:    #5e6ad2;

  /* ── Status: functional only (meaning), never decorative. ─────────────── */
  --color-success:        #4cb782;
  --color-success-subtle: rgba(76, 183, 130, .14);
  --color-warning:        #e2a33f;
  --color-warning-subtle: rgba(226, 163, 63, .14);
  --color-danger:         #eb5757; /* icons, dots (incl. "live"), borders */
  --color-danger-text:    #f28b8b; /* danger as text on dark surfaces */
  --color-danger-subtle:  rgba(235, 87, 87, .14);
  --color-danger-fill:    #c93d3d; /* destructive button background, white text 5:1 */
  --color-danger-fill-hover: #b83636;

  /* ── Chat highlights (functional): keyword ping / highlighted user. ───── */
  --color-ping-bg:        rgba(94, 106, 210, .16);
  --color-ping-edge:      #5e6ad2;
  --color-highlight-bg:   rgba(226, 163, 63, .10);
  --color-highlight-edge: #e2a33f;

  /* ── Identity: avatar fallback circles (initial on a tone derived from
        the logo). Functional coding, not decoration — the logo itself keeps
        its own colors. Text on them: --color-text-on-accent. ─────────── */
  --color-identity-1: #3c3489;
  --color-identity-2: #534ab7;
  --color-identity-3: #6a62c9;
  --color-identity-4: #4a4f8f;

  /* ── Spacing: 4px grid. --s-N = N × 4px. ──────────────────────────────── */
  --s-0:  0;
  --s-px: 1px;
  --s-0-5: 2px;
  --s-1:  4px;
  --s-1-5: 6px;
  --s-2:  8px;
  --s-2-5: 10px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;

  /* ── Radii: small. ────────────────────────────────────────────────────── */
  --r-sm:   4px;  /* badges, chips, small buttons, inputs inside dense rows */
  --r-md:   6px;  /* buttons, inputs, list rows, menu items */
  --r-lg:   8px;  /* cards, popovers, modals */
  --r-full: 9999px; /* avatars, dots, pills */

  /* ── Typography ───────────────────────────────────────────────────────── */
  --font-ui:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
  /* The CHAT font is a user setting (IBM Plex Sans / Segoe UI), applied by
     settings.js as --chat-font-family / --chat-font-size — not a token. */

  --fs-2xs: 11px; /* floor for any functional text (labels, badges, meta) */
  --fs-xs:  12px; /* secondary meta, table cells, helper text */
  --fs-sm:  13px; /* base UI text, menu items, buttons */
  --fs-md:  14px; /* emphasized body, inputs on touch devices */
  --fs-lg:  16px; /* page titles */
  --fs-xl:  20px; /* KPI numbers, modal hero numbers */
  --fs-2xl: 24px; /* login heading */
  --fs-chart: 10px; /* chart axis labels only (data-viz exception, DESIGN.md) */

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;

  --lh-tight:  1.25; /* headings, single-line controls */
  --lh-normal: 1.45; /* UI text */
  --lh-relaxed: 1.6; /* chat rows, log lines */

  --ls-tight: -0.011em; /* Inter at 13–16px reads better slightly tightened */
  --ls-caps:  0.04em;   /* small uppercase section labels */

  /* ── Borders / focus ──────────────────────────────────────────────────── */
  --bw:      1px;
  --bw-thick: 2px; /* focus outline, active-row indicator */
  --focus-offset: 2px;

  /* ── Elevation: borders first; a single soft shadow only for things that
        float above the page (popover, modal, toast). ─────────────────── */
  --shadow-popover: 0 8px 24px rgba(0, 0, 0, .36);
  --shadow-modal:   0 16px 48px rgba(0, 0, 0, .48);

  /* ── Motion: short and plain. ─────────────────────────────────────────── */
  --dur-fast: 100ms; /* hover, color changes */
  --dur-base: 150ms; /* open/close of popovers, modals, drawer */
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --ease-out:      cubic-bezier(0, 0, .2, 1);

  /* ── Sizes ────────────────────────────────────────────────────────────── */
  --icon-xs: 12px; /* inline markers in dense text (note icon after a chat name) */
  --icon-sm: 14px;
  --icon-md: 16px; /* default — Lucide, everywhere */
  --icon-lg: 20px;

  --control-h-sm: 28px; /* dense: row actions, toolbar buttons */
  --control-h-md: 32px; /* default buttons, inputs, selects */
  --control-h-lg: 40px; /* login, primary actions on touch */
  --touch-min:    44px; /* minimum hit target on touch devices (Phase 5) */

  --avatar-xs: 16px;
  --avatar-sm: 20px;
  --avatar-md: 24px;
  --avatar-lg: 32px;
  --avatar-xl: 48px;

  --dot-sm: 6px;  /* live / status dots */
  --dot-md: 8px;

  /* ── Layout ───────────────────────────────────────────────────────────── */
  --sidebar-w:    240px;
  --content-max:  1320px;
  --topbar-h:     48px;  /* mobile top bar (Phase 5) */
  --modal-w-sm:   420px;
  --modal-w-md:   560px;
  --modal-w-lg:   880px;
  --popover-w:    280px;
  --toast-w:      360px;

  /* ── Phase 2 additions (2026-10-22) ───────────────────────────────────── */
  --color-skeleton:      rgba(255, 255, 255, .06); /* skeleton block at rest */
  --color-skeleton-shine: rgba(255, 255, 255, .10); /* skeleton pulse peak */
  --fs-3xl:  28px;   /* stat-card numbers on the dashboard's day view */
  --chart-h: 160px;  /* hour/trend bar chart plot height */
  --sidebar-filter-h: 28px;
  --nav-row-h: 30px; /* sidebar nav + channel rows */
  --list-row-h: 56px; /* account/channel list rows with a 32px avatar */
  --log-row-min-h: 24px; /* virtual-list row estimate in the Logs view */
  --empty-icon: 32px;   /* icon tile in empty states */
  --content-narrow: 880px; /* single-column pages (Accounts, Admin forms) */
  --dur-enter: 150ms; /* view/page enter fade (same as --dur-base, own name for intent) */

  /* ── User card (2026-10-22) ───────────────────────────────────────────── */
  --usercard-w:         360px; /* desktop popover width */
  --usercard-history-h: 280px; /* scrolling history list inside the card */
  --sheet-max-h:        85vh;  /* mobile bottom sheet */

  /* ── Layers ───────────────────────────────────────────────────────────── */
  --z-sticky:   10;
  --z-sidebar:  20;
  --z-dropdown: 50;
  --z-modal:    100;
  --z-toast:    200;
}

/* Respect the OS "reduce motion" setting: transitions become instant. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-enter: 0ms;
  }
}