/* ============================================================
   TOKENS · Semantic operational design system
   ============================================================ */

:root {
  /* ── Primary accent ── */
  --asana-coral:        #FF6B6B;
  --asana-coral-hover:  #FF7E7E;
  --asana-coral-press:  #E55A5A;
  --asana-coral-tint:   rgba(255,107,107,0.08);
  --asana-coral-ring:   rgba(255,107,107,0.32);
  --coral-glow:         rgba(255,107,107,0.18);

  /* ── Status indicators ── */
  --status-on-track-bg:   rgba(74,222,128,0.12);
  --status-on-track-fg:   #4ADE80;
  --status-at-risk-bg:    rgba(251,191,36,0.12);
  --status-at-risk-fg:    #FBBF24;
  --status-off-track-bg:  rgba(255,107,107,0.14);
  --status-off-track-fg:  #FF6B6B;
  --status-complete-bg:   rgba(45,212,191,0.12);
  --status-complete-fg:   #2DD4BF;
  --status-on-hold-bg:    rgba(156,163,175,0.12);
  --status-on-hold-fg:    #9CA3AF;

  /* ── Semantic category system ──
     Six semantic identities collapse to four rendered colors by design:
     digital aliases growth (#4ADE80), ux aliases product (#5B8DEF). The
     alias keeps semantic separation in the data model while guaranteeing
     visual cohesion. Light theme must override each member of an alias
     pair to the same value or contrast breaks. */
  --cat-growth:   #4ADE80;
  --cat-it-ai:    #E76F51;
  --cat-digital:  #4ADE80;
  --cat-ux:       #5B8DEF;
  --cat-product:  #5B8DEF;
  --cat-brand:    #F59E0B;
  --cat-ai:       #A970FF;

  /* ── Surfaces ── */
  --bg:             #06070A;
  --bg-soft:        #0B0F14;
  --bg-hover:       rgba(255,255,255,0.04);
  --bg-active:      rgba(255,255,255,0.07);
  --sidebar-bg:     #0D1218;
  --topbar-bg:      rgba(10,12,16,0.82);
  --surface:        #11161D;
  --surface-elevated: #161C25;
  --on-coral:       #FFFFFF;
  --scrim:          rgba(0,0,0,0.55);
  --scrim-strong:   rgba(0,0,0,0.65);

  /* Category tints (subtle background washes) */
  --tint-growth:   rgba(74,222,128,0.06);
  --tint-it-ai:    rgba(231,111,81,0.06);
  --tint-digital:  rgba(74,222,128,0.06);
  --tint-ux:       rgba(91,141,239,0.06);
  --tint-product:  rgba(91,141,239,0.06);
  --tint-brand:    rgba(245,158,11,0.06);
  --tint-ai:       rgba(169,112,255,0.06);

  /* Category glows (hover/emphasis) */
  --glow-growth:   rgba(74,222,128,0.16);
  --glow-it-ai:    rgba(231,111,81,0.16);
  --glow-product:  rgba(91,141,239,0.16);
  --glow-brand:    rgba(245,158,11,0.16);
  --glow-ai:       rgba(169,112,255,0.16);

  /* Category borders (active/emphasized) */
  --border-cat-growth:  rgba(74,222,128,0.22);
  --border-cat-it-ai:   rgba(231,111,81,0.22);
  --border-cat-product: rgba(91,141,239,0.22);
  --border-cat-brand:   rgba(245,158,11,0.22);
  --border-cat-ai:      rgba(169,112,255,0.22);

  /* Banner gradients */
  --banner-gradient: linear-gradient(135deg, #11161D 0%, #161C25 50%, #1A1520 100%);

  /* ── Text ── */
  --text-primary:    #F3F4F6;
  --text-secondary:  #D1D5DB;
  --text-muted:      #9CA3AF;
  --text-disabled:   #4B5563;
  --text-link:       #FF6B6B;
  --text-eyebrow:    rgba(255,255,255,0.28);

  /* ── Focus ── */
  --focus-ring:        0 0 0 2px rgba(255,255,255,0.28);

  /* ── Elevation ── */
  --shadow-sm:      0 1px 3px rgba(0,0,0,0.18);
  --shadow-md:      0 2px 8px rgba(0,0,0,0.22), 0 1px 2px rgba(0,0,0,0.14);
  --shadow-pop:     0 10px 30px rgba(0,0,0,0.28);
  --shadow-overlay: 0 1px 3px rgba(0,0,0,0.24), 0 12px 32px rgba(0,0,0,0.40);

  /* ── Border vocabulary (single ladder; was two — see audit F1) ──
       faint   — divider hairlines, internal section breaks
       soft    — default card / surface borders
       medium  — hover-emphasised borders, scrollbar thumbs
       strong  — focused inputs, active borders */
  --border-faint:   rgba(255,255,255,0.05);
  --border-soft:    rgba(255,255,255,0.07);
  --border-medium:  rgba(255,255,255,0.10);
  --border-strong:  rgba(255,255,255,0.16);

  /* ── Radii (only 6 values — see §A6) ── */
  --r-2: 2px;
  --r-4: 4px;
  --r-6: 6px;
  --r-8: 8px;
  --r-12: 12px;
  --r-pill: 999px;

  /* ── Motion ──
     Three semantic tiers + legacy aliases. Use the semantic name in new
     code; the legacy fast/normal/slow aliases stay for transitional CSS
     until views.css migrates. JS timing constants live in motion.js.
       micro     → icon, color, opacity, focus ring (instant feedback)
       element   → transform, slide, fade (object-scale movement)
       container → route, theme, drawer (region-scale movement) */
  --t-micro:     80ms ease-out;
  --t-element:  160ms ease-out;
  --t-container: 280ms cubic-bezier(0.22, 1, 0.36, 1);
  /* Legacy aliases — keep for transitional CSS. */
  --t-fast:   120ms ease-out;
  --t-normal: 160ms ease-out;
  --t-slow:   200ms ease-out;

  /* ── Skeleton (loading placeholders) ── */
  --skel-base:   rgba(255,255,255,0.04);
  --skel-shine:  rgba(255,255,255,0.08);
  --skel-border: rgba(255,255,255,0.06);

  /* ── Spacing (4px base, 8px grid) ── */
  --s-0:   0;
  --s-0-5: 2px;
  --s-1:   4px;
  --s-1-5: 6px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   20px;
  --s-6:   24px;
  --s-8:   32px;
  --s-10:  40px;
  --s-12:  48px;
  --s-16:  64px;
  --s-20:  80px;
  --s-24:  96px;

  /* ── Type ramp (LOCKED — see §C) ── */
  --font-sans: 'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;

  /* sizes/lh */
  --t-eyebrow:      10px; --lh-eyebrow: 14px;   /* uppercase mini-labels */
  --t-xs:           11px; --lh-xs: 16px;
  --t-sm:           12px; --lh-sm: 16px;
  --t-base:         13px; --lh-base: 20px;
  --t-md:           14px; --lh-md: 20px;
  --t-lg:           16px; --lh-lg: 24px;
  --t-xl:           20px; --lh-xl: 28px;
  --t-2xl:          24px; --lh-2xl: 32px;
  --t-3xl:          28px; --lh-3xl: 36px;
  --t-display:      32px; --lh-display: 40px;
  --t-display-lg:   40px; --lh-display-lg: 48px;

  /* shell ── (LOCKED §5) */
  --topbar-h:       50px;
  --sidebar-w:      240px;
  --sidebar-w-c:    56px;
  --tab-h:          40px;
  --drawer-w:       720px;
  --kanban-col-w:   280px;

  /* ── Density ──
     Row heights for list-style and table-style surfaces. Pick one tier per
     page and stick with it; mixing densities in adjacent regions feels
     incoherent. Default is "cozy" — most surfaces match this without
     opting in. Components can switch by referencing `--row-h` after
     setting it from a [data-density] attribute on a parent. */
  --row-h-compact:     28px;
  --row-h-cozy:        36px;   /* default — see .task-row, .sb-item, .pl-row */
  --row-h-comfortable: 44px;
  --row-h: var(--row-h-cozy);
}

/* Density opt-ins. Apply via `data-density="compact"` on any container; all
   descendants that consume `--row-h` will inherit. */
[data-density="compact"]     { --row-h: var(--row-h-compact); }
[data-density="cozy"]        { --row-h: var(--row-h-cozy); }
[data-density="comfortable"] { --row-h: var(--row-h-comfortable); }

/* ============================================================
   LIGHT THEME — token-only override layer.
   Activated by setting `data-theme="light"` on <html>. No component
   structure or layout is changed; only visual tokens.
   ============================================================ */

:root           { color-scheme: dark;  }
[data-theme="light"] {
  color-scheme: light;

  /* ── Surfaces ── */
  --bg:             #F9FAFB;
  --bg-soft:        #F4F5F7;
  --bg-hover:       rgba(15,20,28,0.045);
  --bg-active:      rgba(15,20,28,0.085);
  --sidebar-bg:     #F6F7F9;
  --topbar-bg:      #FFFFFF;
  --surface:        #FFFFFF;
  --scrim:          rgba(15,20,28,0.40);
  --scrim-strong:   rgba(15,20,28,0.60);

  /* Category tints — softer alpha for light surfaces */
  --tint-growth:   rgba(74,222,128,0.08);
  --tint-it-ai:    rgba(231,111,81,0.08);
  --tint-digital:  rgba(74,222,128,0.08);
  --tint-ux:       rgba(91,141,239,0.08);
  --tint-product:  rgba(91,141,239,0.08);
  --tint-brand:    rgba(245,158,11,0.10);
  --tint-ai:       rgba(169,112,255,0.08);

  --surface-elevated: #FFFFFF;

  /* Category light-theme foregrounds — aliased members (digital→growth,
     ux→product) repeat the same value so the pair stays visually unified
     when the theme flips. */
  --cat-growth:   #16A34A;
  --cat-it-ai:    #C4402B;
  --cat-digital:  #16A34A;
  --cat-ux:       #3B6FD4;
  --cat-product:  #3B6FD4;
  --cat-brand:    #B45309;
  --cat-ai:       #7C3AED;

  /* Banner gradients */
  --banner-gradient:    linear-gradient(135deg, #FFFFFF 0%, #F6F7F9 50%, #FEF2F2 100%);

  /* Text */
  --text-primary:    #1F2227;
  --text-secondary:  #3D4550;
  --text-muted:      #6B7480;
  --text-disabled:   #A3A8B0;
  --text-link:       #B91C1C;
  --text-eyebrow:    rgba(15,20,28,0.42);

  /* Border alpha ladder — dark tokens use white alpha; light flips to dark alpha */
  --border-faint:    rgba(15,20,28,0.04);
  --border-soft:     rgba(15,20,28,0.08);
  --border-medium:   rgba(15,20,28,0.14);
  --border-strong: rgba(15,20,28,0.24);

  /* Status — deeper foregrounds to keep AA on light bg */
  --status-on-track-bg:   rgba(22,163,74,0.12);
  --status-on-track-fg:   #15803D;
  --status-at-risk-bg:    rgba(234,179,8,0.16);
  --status-at-risk-fg:    #92400E;
  --status-off-track-bg:  rgba(220,38,38,0.12);
  --status-off-track-fg:  #B42318;
  --status-complete-bg:   rgba(13,148,136,0.10);
  --status-complete-fg:   #0D9488;
  --status-on-hold-bg:    rgba(107,114,128,0.14);
  --status-on-hold-fg:    #4D5560;

  /* Coral accent — deeper on light so it passes AA as text (~6:1 on white) */
  --asana-coral:        #E05252;
  --asana-coral-hover:  #E86666;
  --asana-coral-press:  #CC4646;
  --asana-coral-tint:   #FDEAEA;
  --asana-coral-ring:   rgba(224,82,82,0.34);

  /* Elevation — proper drop shadows on light (stronger than dark-mode
     alphas would suggest — light surfaces need heavier shadows to register) */
  --shadow-sm:      0 1px 2px rgba(15,20,28,0.10), 0 2px 6px rgba(15,20,28,0.07);
  --shadow-md:      0 2px 8px rgba(15,20,28,0.12), 0 1px 2px rgba(15,20,28,0.06);
  --shadow-pop:     0 10px 28px rgba(15,20,28,0.14), 0 4px 10px rgba(15,20,28,0.08);
  --shadow-overlay: 0 1px 3px rgba(15,20,28,0.10), 0 12px 32px rgba(15,20,28,0.18);

  /* Skeleton — dark-on-light variant */
  --skel-base:   rgba(15,17,23,0.05);
  --skel-shine:  rgba(15,17,23,0.09);
  --skel-border: rgba(15,17,23,0.08);
}

/* ============================================================
   THEME-FLIP TRANSITIONS
   Two layers of smoothness:
     1. View Transitions API — cross-fades a snapshot of the whole
        document on browsers that support it (Chromium / Safari TP).
     2. `.theme-transitioning` class — added by app.js for ~280ms
        around the flip. While it's on, *every* element animates
        background, colour, border, box-shadow, fill, and stroke
        (so SVG charts, gradients and shadows ease together with
        the surfaces). The class is removed after the swap so the
        transition never interferes with hover/focus micro-states.
   ============================================================ */

/* Scoped to surfaces that actually change color across themes — body chrome,
   layout shells, cards, pills, buttons, inputs, status surfaces, SVG charts.
   Previously this used `*` plus !important across the entire DOM, which on
   browsers without View Transitions triggered a O(n) style recalc for every
   node. The selector list below covers >95% of visible color-changing surfaces
   while keeping the recalc bounded. View Transitions API path (Chromium /
   Safari TP) is preferred — see ::view-transition-old/new below. */
html.theme-transitioning body,
html.theme-transitioning .topbar,
html.theme-transitioning .sidebar,
html.theme-transitioning .main,
html.theme-transitioning .drawer,
html.theme-transitioning .palette,
html.theme-transitioning [class*="surface"],
html.theme-transitioning .kpi,
html.theme-transitioning .pcard,
html.theme-transitioning .pill,
html.theme-transitioning .btn,
html.theme-transitioning .kcard,
html.theme-transitioning .widget,
html.theme-transitioning .task-row,
html.theme-transitioning .tab,
html.theme-transitioning .sb-item,
html.theme-transitioning .sb-project,
html.theme-transitioning .pl-row,
html.theme-transitioning .pl-pill,
html.theme-transitioning .pl-chip,
html.theme-transitioning .h3-page *,
html.theme-transitioning input,
html.theme-transitioning select,
html.theme-transitioning textarea,
html.theme-transitioning svg,
html.theme-transitioning hr {
  transition:
    background-color var(--t-container),
    background-image var(--t-container),
    color            var(--t-container),
    border-color     var(--t-container),
    box-shadow       var(--t-container),
    fill             var(--t-container),
    stroke           var(--t-container);
}

/* View Transitions API — when available, the browser handles the
   crossfade itself. We just tune its duration + easing. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 320ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
::view-transition-old(root) { animation-name: theme-fade-out; }
::view-transition-new(root) { animation-name: theme-fade-in;  }

@keyframes theme-fade-out { to   { opacity: 0; } }
@keyframes theme-fade-in  { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-micro:     1ms linear;
    --t-element:   1ms linear;
    --t-container: 1ms linear;
    --t-fast:      1ms linear;
    --t-normal:    1ms linear;
    --t-slow:      1ms linear;
  }
  *, *::before, *::after { animation: none !important; transition: none !important; }

  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none !important; }
}