/* design-system.css — Boxing Design System (ADR-0008 three-layer token architecture)
 *
 * Layer 1: Primitive (raw values — the source palette, never referenced directly in components)
 * Layer 2: Semantic (purpose aliases — components reference these; dark mode overrides this layer)
 * Layer 3: Component (component-specific — defined per-component in DESIGN.md, applied via ntp.css)
 *
 * When to edit:
 *   - Changing the palette hue/saturation range → edit Layer 1 primitive values
 *   - Adding a new semantic role → edit Layer 2
 *   - Tweaking a specific component's color → edit Layer 3 in ntp.css (after Q2/D split)
 * Reference: docs/DESIGN.md, ADR-0008, W3C DTCG spec (designtokens.org)
 */

/* ═══════════════════════════════════════════════
 * Layer 1 — Primitive Palette
 * Raw hex values. Never use directly in component CSS.
 * ═══════════════════════════════════════════════ */

:root {
  /* --- Warm neutral ramp (light) --- */
  --color-warm-50: #F1EEE8;
  --color-warm-100: #EEE9E1;
  --color-warm-150: #EBE5DB;
  --color-warm-200: #E0D8CB;
  --color-warm-300: #ECE8E0;
  --color-warm-700: #A89F92;
  --color-warm-800: #7B7167;
  --color-warm-850: #3B342C;
  --color-warm-900: #2A2520;
  --warm-900-rgb: 42, 37, 32;   /* for rgba() derivation */

  /* --- Accent (warm earth) ramp (light) --- */
  --color-accent-300: #B89878;
  --color-accent-500: #A08060;
  --color-accent-600: #6E5540;
  --accent-500-rgb: 160, 128, 96;  /* for rgba() derivation */

  /* --- Dark warm neutral ramp --- */
  --color-warm-dark-50: #1E1C1A;
  --color-warm-dark-100: #252320;
  --color-warm-dark-150: #2A2724;
  --color-warm-dark-200: #302D29;
  --color-warm-dark-300: #3E3A34;
  --color-warm-dark-700: #6A6356;
  --color-warm-dark-800: #9A9285;
  --color-warm-dark-850: #C8C2B6;
  --color-warm-dark-900: #E8E4DB;
  --warm-dark-900-rgb: 232, 228, 219;

  /* --- Dark accent ramp --- */
  --color-accent-dark-300: #C4A882;
  --color-accent-dark-500: #C4A882;
  --color-accent-dark-600: #D4B88C;
  --accent-dark-500-rgb: 196, 168, 130;

  /* ═══════════════════════════════════════════════
   * Layer 2 — Semantic Tokens (light mode defaults)
   * Components reference these. Dark mode overrides below.
   * ═══════════════════════════════════════════════ */

  /* Canvas — warm neutral surface hierarchy */
  --color-canvas: var(--color-warm-50);
  --color-canvas-2: var(--color-warm-300);
  --color-surface: var(--color-warm-100);
  --color-elevated: var(--color-warm-150);
  --color-card-edge: var(--color-warm-200);

  /* Ink — text color hierarchy */
  --color-ink: var(--color-warm-900);
  --color-ink-soft: var(--color-warm-850);
  --color-muted: var(--color-warm-800);
  --color-faint: var(--color-warm-700);

  /* Hairline / divider — derived from ink base via rgba */
  --color-hairline: rgba(var(--warm-900-rgb), 0.06);
  --color-hairline-strong: rgba(var(--warm-900-rgb), 0.12);

  /* Accents — muted warm earth */
  --color-accent: var(--color-accent-500);
  --color-accent-ink: var(--color-accent-600);
  --color-accent-soft: rgba(var(--accent-500-rgb), 0.10);
  --color-accent-soft-2: rgba(var(--accent-500-rgb), 0.18);
  --color-focus: var(--color-accent-300);

  /* Radii / spacing */
  --radius-card: 18px;
  --radius-tile: 12px;
  --radius-pill: 999px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Type */
  --font-display: "Fraunces", "Source Serif Pro", "Songti SC", ui-serif, Georgia, serif;
  --font-stack-ui: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "PingFang SC", "Microsoft YaHei", "Inter", ui-sans-serif, sans-serif;
  --font-stack-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, Consolas, monospace;

  /* Base font size — adjustable via settings */
  --font-size-base: 14px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);    /* enter: smooth decel */
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);     /* state toggle: material standard */
  --ease-hover: cubic-bezier(0.34, 1.56, 0.64, 1); /* hover: subtle bounce-back */
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 360ms;

  /* Shadow — 5-level elevation gradient (ADR-0008 Phase: Shadow-B)
   * Each level uses 3-4 stacked layers for physical depth (Linear/Vercel pattern).
   * Near layer = sharp edge, mid = soft body, far = ambient ground, bottom = contact.
   * --shadow-1/2/pop are aliases for backward compat (zero ref changes needed). */
  --shadow-xs: 0 1px 2px rgba(var(--warm-900-rgb), 0.05), 0 1px 1px rgba(var(--warm-900-rgb), 0.03);
  --shadow-sm: 0 2px 4px rgba(var(--warm-900-rgb), 0.06), 0 1px 2px rgba(var(--warm-900-rgb), 0.04);
  --shadow-md: 0 6px 12px rgba(var(--warm-900-rgb), 0.08), 0 2px 4px rgba(var(--warm-900-rgb), 0.05), 0 1px 1px rgba(var(--warm-900-rgb), 0.03);
  --shadow-lg: 0 12px 24px rgba(var(--warm-900-rgb), 0.10), 0 4px 8px rgba(var(--warm-900-rgb), 0.06), 0 1px 2px rgba(var(--warm-900-rgb), 0.04);
  --shadow-xl: 0 24px 48px rgba(var(--warm-900-rgb), 0.14), 0 8px 16px rgba(var(--warm-900-rgb), 0.08), 0 2px 4px rgba(var(--warm-900-rgb), 0.05), 0 1px 1px rgba(var(--warm-900-rgb), 0.03);
  /* Aliases — map old names to new gradient levels */
  --shadow-1: var(--shadow-xs);
  --shadow-2: var(--shadow-md);
  --shadow-pop: var(--shadow-lg);

  /* Scrollbar (ADR-0014) — thin overlay style, cross-browser standardized */
  --scrollbar-thumb: var(--color-warm-700);
  --scrollbar-track: var(--color-warm-100);
}

/* ═══════════════════════════════════════════════
 * Layer 2 — Dark Mode Semantic Overrides
 * Only primitive references change; component CSS stays unchanged.
 * ═══════════════════════════════════════════════ */

.ntp--dark {
  /* Canvas */
  --color-canvas: var(--color-warm-dark-50);
  --color-canvas-2: var(--color-warm-dark-100);
  --color-surface: var(--color-warm-dark-150);
  --color-elevated: var(--color-warm-dark-200);
  --color-card-edge: var(--color-warm-dark-300);

  /* Ink (inverted ramp — light text on dark bg) */
  --color-ink: var(--color-warm-dark-900);
  --color-ink-soft: var(--color-warm-dark-850);
  --color-muted: var(--color-warm-dark-800);
  --color-faint: var(--color-warm-dark-700);

  /* Hairline — derived from light base in dark mode */
  --color-hairline: rgba(255, 255, 255, 0.06);
  --color-hairline-strong: rgba(255, 255, 255, 0.10);

  /* Accents */
  --color-accent: var(--color-accent-dark-300);
  --color-accent-ink: var(--color-accent-dark-600);
  --color-accent-soft: rgba(var(--accent-dark-500-rgb), 0.12);
  --color-accent-soft-2: rgba(var(--accent-dark-500-rgb), 0.20);
  --color-focus: var(--color-accent-dark-300);

  /* Shadow — black-based dark mode calibrated (Phase 6: Shadow-C) */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.20), 0 1px 1px rgba(0, 0, 0, 0.12);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.24), 0 1px 2px rgba(0, 0, 0, 0.16);
  --shadow-md: 0 6px 12px rgba(0, 0, 0, 0.30), 0 2px 4px rgba(0, 0, 0, 0.20), 0 1px 1px rgba(0, 0, 0, 0.14);
  --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.36), 0 4px 8px rgba(0, 0, 0, 0.24), 0 1px 2px rgba(0, 0, 0, 0.16);
  --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.44), 0 8px 16px rgba(0, 0, 0, 0.30), 0 2px 4px rgba(0, 0, 0, 0.20), 0 1px 1px rgba(0, 0, 0, 0.14);
  /* Aliases */
  --shadow-1: var(--shadow-xs);
  --shadow-2: var(--shadow-md);
  --shadow-pop: var(--shadow-lg);

  /* Scrollbar dark override (ADR-0014) */
  --scrollbar-thumb: var(--color-warm-dark-700);
  --scrollbar-track: var(--color-warm-dark-100);
}


/* ═══════════════════════════════════════════════
 * prefers-reduced-motion: disable all non-essential motion (WCAG 2.2)
 * Applied globally so every transition/animation respects user preference.
 * ═══════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  /* Ticket 05 (ADR-0014 v3): reduced-motion users get a static overlay.
     backdrop-filter:blur is a decorative effect (Chrome Developers / web.dev);
     under reduce it is disabled per the additive graceful-degradation model.
     Defensive: if backdrop-filter is reintroduced on .modal-overlay, this
     forces it off under reduced-motion. */
  .modal-overlay {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}