/* ============================================================================
   Design tokens (T3 Phase 2, 2026-06-21).
   The macOS dark theme palette replaces the previous GitHub-ish dark.
   Reference: https://developer.apple.com/design/human-interface-guidelines/color

   Layering:
     - Semantic tokens (--color-*) are the source of truth.
     - Visual aliases (--bg, --panel, --line, --fg, --dim, --green, --yellow,
       --red, --acc) are kept because the existing templates still read them;
       retiring them is a separate cleanup, not a Phase 2 task.

   If you change a value here, run the visual-regression check (live /login,
   /, /admin/*, /chat) before/after to confirm nothing shifts.

   DARK ONLY. Light mode is out of scope for v1.
   ============================================================================ */

:root {
  /* ----------------------------------------------------------------------
     Palette -- macOS dark theme (system colors + label colors + systemBackgrounds)
     Reference: Apple HIG color (systemBlue/Green/Orange/Red dark,
     label/secondaryLabel/tertiaryLabel dark, systemBackgrounds dark).
     ---------------------------------------------------------------------- */

  /* Accent (primary action, links, focus rings) */
  --color-accent:        #0A84FF;   /* systemBlue dark */
  --color-accent-soft:   rgba(10, 132, 255, 0.18);

  /* Semantic (read / write / status) */
  --color-success:       #30D158;   /* systemGreen dark */
  --color-success-soft:  rgba(48, 209, 88, 0.18);
  --color-warning:       #FF9F0A;   /* systemOrange dark */
  --color-warning-soft:  rgba(255, 159, 10, 0.20);
  --color-danger:        #FF453A;   /* systemRed dark */
  --color-danger-soft:   rgba(255, 69, 58, 0.18);
  --color-info:          var(--color-accent);
  --color-info-soft:     var(--color-accent-soft);

  /* Surfaces (systemBackground / secondarySystemBackground / tertiarySystemBackground dark) */
  --color-bg:            #1C1C1E;   /* systemBackground dark */
  --color-surface:       #2C2C2E;   /* secondarySystemBackground dark */
  --color-surface-raised:#3A3A3C;   /* tertiarySystemBackground dark */

  /* Borders + separators.
     --color-border = separator #3C3C43 at 30% opacity over the surface tone. */
  --color-border:        #48484A;

  /* Text (label / secondaryLabel / tertiaryLabel dark).
     The canonical tokens are RGBA (effective on the bg tone, matches the
     macOS label colors over systemBackground dark). Solid variants exist
     for the rare cases where a non-transparent color is needed (e.g. text
     inside an accent-filled button where rgba would blend with the fill). */
  --color-fg:                #FFFFFF;                  /* label dark */
  --color-fg-muted:          rgba(235, 235, 245, 0.60);/* secondaryLabel dark over systemBackground */
  --color-fg-subtle:         rgba(235, 235, 245, 0.30);/* tertiaryLabel dark over systemBackground */
  --color-fg-muted-solid:    #99999E;                  /* secondaryLabel dark @ 100% effective */
  --color-fg-subtle-solid:   #545458;                  /* tertiaryLabel dark @ 100% effective */

  /* ----------------------------------------------------------------------
     Visual aliases (back-compat, kept during T3 rollout).
     Existing templates read --bg / --panel / --line / --fg / --dim / --green
     / --yellow / --red / --acc / --border directly. Phase 2 keeps them so the
     palette swap is a one-file change. Retiring these is a separate cleanup.
     ---------------------------------------------------------------------- */
  --bg:      var(--color-bg);
  --panel:   var(--color-surface);
  --line:    var(--color-border);
  --fg:      var(--color-fg);
  --dim:     var(--color-fg-muted);
  --green:   var(--color-success);
  --yellow:  var(--color-warning);
  --red:     var(--color-danger);
  --acc:     var(--color-accent);
  --border:  var(--color-border);

  /* ----------------------------------------------------------------------
     Spacing scale (4px grid; unchanged from Phase 1.2a)
     ---------------------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;

  /* ----------------------------------------------------------------------
     Typography (Inter for sans, ui-monospace for mono; scale unchanged)
     ---------------------------------------------------------------------- */
  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-md:   15px;
  --text-lg:   17px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --leading-tight:   1.25;
  --leading-base:    1.5;
  --leading-relaxed: 1.75;
  --font-body: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ----------------------------------------------------------------------
     Radius scale (unchanged)
     ---------------------------------------------------------------------- */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:  12px;
  --radius-pill: 999px;

  /* ----------------------------------------------------------------------
     Elevation (subtle; the macOS dark aesthetic is mostly flat with a
     small amount of depth for floating layers like modal + toast).
     ---------------------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.40);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);

  /* ----------------------------------------------------------------------
     Motion (added in Phase 2; pre-existing durations in components.css
     stay hardcoded for now, the next refactor will swap to these tokens)
     ---------------------------------------------------------------------- */
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-hover:   150ms;
  --dur-details: 200ms;
  --dur-modal:   300ms;

  /* ----------------------------------------------------------------------
     Z-index scale (unchanged)
     ---------------------------------------------------------------------- */
  --z-base:   1;
  --z-sticky: 10;
  /* T3 Phase 5.7 (2026-06-23): popovers / dropdowns (the app-menu
     panel) sit above sticky elements (the chathdr, the composer)
     but below modals. The .app-menu-panel uses this token so it
     always wins the z-index tie against .chathdr (both were 10
     before, the chathdr being later in the DOM won -- the menu
     appeared to be hidden behind the chathdr's right edge). */
  --z-popover: 20;
  --z-modal:  100;
  --z-toast:  200;
}


/* Honor prefers-reduced-motion globally: disable all CSS transitions/animations.
   The macOS aesthetic relies on subtle motion (shimmer on skeleton, fade on
   modal); the reduced-motion preference disables it cleanly without breaking
   layout (transform/opacity-only properties go to instant). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}