/* 1-tokens.css — the design system, extracted live from the reference app.
   The ONLY place raw values live (P3/P6): every other file references var(--…).
   A rebrand edits this file + Config::brand — never a component. Light + dark. */

:root {
  /* ── Brand accent (Plasma Magenta) — CTAs/highlights only, never status ── */
  --color-primary: #ec4899;
  --color-primary-light: #f472b6;
  --color-primary-dark: #db2777;
  --color-primary-foreground: #ffffff;
  --color-ring: #ec4899;

  /* ── Surfaces / neutrals ── */
  --color-background: #f7f7f9;
  --color-surface: #ffffff;
  --color-surface-2: #f1f2f6;
  --color-surface-3: #fdf2f8;      /* pink-tinted surface */
  --color-foreground: #0f172a;
  --color-card: #ffffff;
  --color-muted: #f1f2f6;
  --color-muted-foreground: #64748b;
  --color-border: rgba(15, 23, 42, 0.10);
  --color-border-strong: rgba(15, 23, 42, 0.18);
  --color-input: rgba(15, 23, 42, 0.14);

  /* ── Status (semantic set, distinct from the magenta accent) ── */
  --status-fine: #16a34a;
  --status-help: #d97706;
  --status-distress: #dc2626;
  --status-pending: #64748b;

  /* ── Sprint Pulse phase states ── */
  --phase-active: #ec4899;
  --phase-done: rgba(15, 23, 42, 0.32);
  --phase-future: rgba(15, 23, 42, 0.14);

  /* ── Radius (measured: card 14, input 8, button 6, pill full) ── */
  --radius: 10px;
  --radius-card: 14px;
  --radius-input: 8px;
  --radius-button: 6px;
  --radius-pill: 9999px;

  /* ── Typography ── */
  --font-headline: "Clash Display", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Satoshi", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  --text-h1: 36px;
  --text-h2: 28px;
  --text-h3: 20px;
  --text-body: 16px;
  --text-small: 14px;
  --text-eyebrow: 11px;
  --leading-body: 1.5;
  --tracking-h1: -0.015em;
  --tracking-eyebrow: 0.1em;

  /* ── Spacing / layout ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --max-content: 1200px;
  --max-reading: 720px;

  /* ── Breakpoints (referenced by JS; CSS uses the px directly in media) ── */
  --bp-sm: 640px;
  --bp-md: 1024px;
  --bp-lg: 1280px;

  --color-inverse: #ffffff;
  --shadow-none: none;
  --shadow-pop: 0 6px 20px rgba(0, 0, 0, 0.15);
  --z-header: 50;
  --z-toast: 100;
  --z-dialog: 90;

  /* ── Report / likert bricks — upstreamed from Choreografy (blue/orange dual accent) ── */
  --color-accent: #3498db;               /* report primary accent (blue) — distinct from brand magenta */
  --color-accent-hover: #2980b9;
  --color-accent-2: #e67e22;             /* report secondary accent (orange) */
  --color-accent-subtle: rgba(52, 152, 219, 0.10);
  --color-accent-border: rgba(52, 152, 219, 0.25);
  --color-accent-2-border: rgba(230, 126, 34, 0.25);

  --status-fine-subtle: rgba(16, 185, 129, 0.10);
  --status-help-subtle: rgba(245, 158, 11, 0.10);
  --status-distress-subtle: rgba(239, 68, 68, 0.10);

  --gradient-primary: linear-gradient(135deg, #3498db 0%, #5dade2 100%);
  --gradient-secondary: linear-gradient(135deg, #e67e22 0%, #f39c12 100%);
  --gradient-vibrant: linear-gradient(135deg, #3498db 0%, #8e44ad 50%, #e67e22 100%);

  --font-serif: "Cardo", Georgia, serif;   /* editorial heading face for reports */

  --shadow-card-xs: 0 1px 2px rgba(52, 152, 219, 0.05);
  --shadow-card-sm: 0 2px 4px rgba(52, 152, 219, 0.08);
  --shadow-card: 0 4px 12px rgba(52, 152, 219, 0.12);

  /* Report "dashboard" always-dark hero surfaces */
  --report-dark-950: #090c16;
  --report-dark-900: #0e1120;
  --report-dark-850: #141826;
  --report-dark-800: #1c2135;
  --report-dark-700: #30374e;
  --report-dark-500: #6e7a94;
  --report-dark-400: #9aa3bc;
  --report-dark-200: #dde3f0;
  --report-dark-50: #f7f8fc;
}

.dark {
  --color-background: #0f172a;
  --color-surface: #131a2c;
  --color-surface-2: #1a2136;
  --color-surface-3: #1a1520;
  --color-foreground: #f8fafc;
  --color-card: #131a2c;
  --color-muted: #1a2136;
  --color-muted-foreground: #94a3b8;
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(255, 255, 255, 0.14);
  --color-input: rgba(255, 255, 255, 0.10);

  --status-fine: #22c55e;
  --status-help: #eab308;
  --status-distress: #ef4444;
  --status-pending: #94a3b8;

  --phase-done: rgba(255, 255, 255, 0.28);
  --phase-future: rgba(255, 255, 255, 0.14);

  /* ── Report / likert bricks (dark) ── */
  --color-accent: #5dade2;
  --color-accent-hover: #85c1e9;
  --color-accent-2: #f5b041;
  --color-accent-subtle: rgba(93, 173, 226, 0.12);
  --color-accent-border: rgba(93, 173, 226, 0.28);
  --color-accent-2-border: rgba(245, 176, 65, 0.25);

  --status-fine-subtle: rgba(52, 211, 153, 0.12);
  --status-help-subtle: rgba(251, 191, 36, 0.12);
  --status-distress-subtle: rgba(248, 113, 113, 0.12);

  --shadow-card-xs: 0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-card-sm: 0 2px 4px rgba(0, 0, 0, 0.42);
  --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.45);
}

/* Mobile type scale (P9) */
@media (max-width: 1024px) {
  :root {
    --text-h1: 28px;
    --text-h2: 22px;
    --text-body: 15px;
  }
}

/* Respect reduced-motion: neutralise the pack's transitions + animations. */
@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;
  }
}