/* ===================================================================
   TDS DESIGN TOKENS (LIGHT & OBSIDIAN DARK THEMES)
   =================================================================== */

:root, [data-theme="light"] {
  /* Native widgets (date pickers, scrollbars, selects) follow the theme */
  color-scheme: light;
  --tds-canvas: #f4f6f8;
  --tds-canvas-fade: rgba(244, 246, 248, 0);
  --tds-card: #ffffff;
  --tds-bg-app: var(--tds-canvas);
  --tds-bg-surface: var(--tds-card);
  --tds-bg-subtle: #e5e8eb;
  --tds-bg-input: #f9fafb;
  --tds-bg-table-th: #fafbfc;

  --tds-ink-primary: #191f28;
  --tds-ink-secondary: #6b7684;
  --tds-ink-muted: #8b95a1;
  --tds-ink-on-accent: #ffffff;
  --tds-border: #eceef0;

  --tds-blue: #3182f6;
  --tds-blue-hover: #1b64da;
  --tds-blue-soft: #e8f3ff;
  --tds-blue-glow: rgba(49, 130, 246, 0.14);

  --tds-emerald: #059669;
  --tds-emerald-soft: #e6f9f0;
  --tds-ruby: #f04452;
  --tds-ruby-soft: #feebeb;

  --tds-radius-sheet: 32px;
  --tds-radius-card: 24px;
  --tds-radius-btn: 16px;
  --tds-radius-pill: 9999px;
  --tds-radius-badge: 8px;

  --tds-shimmer-base: #eceef0;
  --tds-shimmer-highlight: #f7f8f9;

  /* Elevation. In Obsidian Dark these all collapse to `none`: depth comes
     from surface lightness, never from drop shadows (see SECTION 3.2). */
  --tds-shadow-card: 0 4px 20px -2px rgba(0, 0, 0, 0.02);
  --tds-shadow-dock: 0 8px 24px rgba(0, 0, 0, 0.04);
  --tds-shadow-sheet: 0 -10px 40px rgba(0, 0, 0, 0.1);
  --tds-shadow-drawer: -12px 0 40px rgba(0, 0, 0, 0.08);
  --tds-shadow-segment: 0 2px 6px rgba(0, 0, 0, 0.06);
  --tds-shadow-toast: 0 8px 24px rgba(0, 0, 0, 0.15);

  --content-max-width: 680px;
  --shell-max-width: 1200px;
  --nav-height-desktop: 64px;
  /* The pill dock's geometry, declared ONCE (0.1.52). The dock reads these
     for its own padding and the pill's min-height, so the tokens are
     ENFORCED, not described — before, `--nav-height-mobile: 72px` sat
     beside a dock that occupied 88 px (12 + 64 + 12), and the sticky CTA
     lifted by the token landed 4–6 px inside the pill on every form
     screen (LAW 4, django-tds #1). `--tds-dock-clear` is what the dock
     occupies from the bottom edge, safe area INCLUDED: anything that must
     clear the dock lifts by exactly this and adds nothing. */
  --tds-dock-gap: 12px;
  --tds-dock-bar: 64px;
  --tds-dock-clear: calc(var(--tds-dock-gap) + var(--tds-dock-bar) + max(var(--tds-dock-gap), env(safe-area-inset-bottom)));
  /* The sticky CTA's own box — measured 84 px on a phone (12 + 54 + 10
     plus the hint slot's margin) — and the dirty-indicator line it grows
     by (a 24 px pill + 8 px margin). `.tds-cta-reserve` on a page root
     keeps the last content above both; consumers used to guess 96 px by
     hand, in thirty-four templates. */
  --tds-cta-height: 84px;
  --tds-cta-hint: 32px;
  /* Kept for embedders that read it; it now means the occupied height
     WITH the safe area, so never add env(safe-area-inset-bottom) to it. */
  --nav-height-mobile: var(--tds-dock-clear);
  --tds-dock-bg: rgba(255, 255, 255, 0.92);
  --tds-dock-border: rgba(229, 232, 235, 0.8);

  /* Toast pill: dark ink slab in light mode; in Obsidian dark it must be an
     ELEVATED (lighter) slab or it disappears against the canvas. */
  --tds-toast-bg: rgba(25, 31, 40, 0.94);
  --tds-toast-ink: #ffffff;
  --tds-toast-border: transparent;

  /* AI assistance accent — violet is RESERVED for AI affordances */
  --tds-ai: #7c3aed;
  --tds-ai-soft: #f1eafe;

  --font-stack: -apple-system, BlinkMacSystemFont, "Pretendard", "SF Pro Display", "Segoe UI", Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --tds-canvas: #0f1317;
    --tds-canvas-fade: rgba(15, 19, 23, 0);
    --tds-card: #181d24;
    --tds-bg-app: var(--tds-canvas);
    --tds-bg-surface: var(--tds-card);
    --tds-bg-subtle: #242b35;
    --tds-bg-input: #13171c;
    --tds-bg-table-th: #14181f;

    --tds-ink-primary: #f2f4f6;
    --tds-ink-secondary: #8b95a1;
    --tds-ink-muted: #5c6675;
    --tds-border: #242b35;

    --tds-blue: #4593fc;
    --tds-blue-hover: #5ea4ff;
    --tds-blue-soft: rgba(69, 147, 252, 0.15);
    --tds-blue-glow: rgba(69, 147, 252, 0.25);

    --tds-emerald: #10b981;
    --tds-emerald-soft: rgba(16, 185, 129, 0.15);
    --tds-ruby: #f87171;
    --tds-ruby-soft: rgba(248, 113, 113, 0.15);

    --tds-shimmer-base: #1c222b;
    --tds-shimmer-highlight: #28303c;

    --tds-shadow-card: none;
    --tds-shadow-dock: none;
    --tds-shadow-sheet: none;
    --tds-shadow-drawer: none;
    --tds-shadow-segment: none;
    --tds-shadow-toast: none;

    --tds-dock-bg: rgba(24, 29, 36, 0.92);
    --tds-dock-border: rgba(36, 43, 53, 0.8);

    --tds-toast-bg: rgba(64, 75, 92, 0.96);
    --tds-toast-ink: #f2f4f6;
    --tds-toast-border: rgba(255, 255, 255, 0.08);

    --tds-ai: #a78bfa;
    --tds-ai-soft: rgba(167, 139, 250, 0.15);
  }
}

[data-theme="dark"] {
  color-scheme: dark;
  --tds-canvas: #0f1317;
  --tds-canvas-fade: rgba(15, 19, 23, 0);
  --tds-card: #181d24;
  --tds-bg-app: var(--tds-canvas);
  --tds-bg-surface: var(--tds-card);
  --tds-bg-subtle: #242b35;
  --tds-bg-input: #13171c;
  --tds-bg-table-th: #14181f;

  --tds-ink-primary: #f2f4f6;
  --tds-ink-secondary: #8b95a1;
  --tds-ink-muted: #5c6675;
  --tds-border: #242b35;

  --tds-blue: #4593fc;
  --tds-blue-hover: #5ea4ff;
  --tds-blue-soft: rgba(69, 147, 252, 0.15);
  --tds-blue-glow: rgba(69, 147, 252, 0.25);

  --tds-emerald: #10b981;
  --tds-emerald-soft: rgba(16, 185, 129, 0.15);
  --tds-ruby: #f87171;
  --tds-ruby-soft: rgba(248, 113, 113, 0.15);

  --tds-shimmer-base: #1c222b;
  --tds-shimmer-highlight: #28303c;

  --tds-shadow-card: none;
  --tds-shadow-dock: none;
  --tds-shadow-sheet: none;
  --tds-shadow-drawer: none;
  --tds-shadow-segment: none;
  --tds-shadow-toast: none;

  --tds-dock-bg: rgba(24, 29, 36, 0.92);
  --tds-dock-border: rgba(36, 43, 53, 0.8);

  --tds-toast-bg: rgba(64, 75, 92, 0.96);
  --tds-toast-ink: #f2f4f6;
  --tds-toast-border: rgba(255, 255, 255, 0.08);

  --tds-ai: #a78bfa;
  --tds-ai-soft: rgba(167, 139, 250, 0.15);
}