/* Wheelhouse Media Design System — tokens.
   Every value here comes from the design handoff (docs/design-handoff.md).
   Nothing in the app should introduce a colour, radius or type size that is
   not declared in this file. */

:root {
  /* ---- Surfaces ---------------------------------------------------- */
  --surface-page:  #0A0A0A;   /* canvas behind app chrome; sidebars, rails */
  --surface-app:   #111111;   /* main app surface — "Dark Grey" */
  --surface-card:  #1C1C1C;   /* cards, list rows, modals */
  --surface-panel: rgba(51, 51, 51, .20);  /* charcoal @20% — inset panels */
  --surface-well:  #262626;   /* media wells, avatars, empty thumbnails */
  --surface-bar:   #404040;   /* edit/post bars in the timeline */
  --surface-light: #F2F2F2;   /* call sheet document only */

  /* ---- Type -------------------------------------------------------- */
  --text-primary:     #F2F2F2;
  --text-body:        rgba(242, 242, 242, .90);
  --text-secondary:   rgba(242, 242, 242, .75);
  --text-meta:        rgba(242, 242, 242, .50);
  --text-placeholder: rgba(242, 242, 242, .40);

  --text-on-light:           #111111;
  --text-on-light-secondary: rgba(17, 17, 17, .60);
  --text-on-light-meta:      rgba(17, 17, 17, .50);

  /* ---- Borders ----------------------------------------------------- */
  --border-hairline:       rgba(242, 242, 242, .14);
  --border-strong:         rgba(242, 242, 242, .28);
  --border-hairline-light: rgba(17, 17, 17, .12);

  /* ---- Brand gradient — always 30deg, the only gradient in use ------ */
  --gradient-1: linear-gradient(30deg, #FE5343 0%, #FCA725 50%, #96E02A 96%);
  --g1-start: #FE5343;
  --g1-mid:   #FCA725;
  --g1-end:   #96E02A;

  /* ---- Status: the gradient's own stops, so no new palette --------- */
  --status-ok:   #96E02A;   /* done, approved, on track, available */
  --status-warn: #FCA725;   /* in progress, awaiting you, at risk, near full */
  --status-risk: #FE5343;   /* conflict, overloaded, blocked, avoid */

  --status-ok-tint:   rgba(150, 224, 42, .14);
  --status-warn-tint: rgba(252, 167, 37, .14);
  --status-risk-tint: rgba(254, 83, 67, .14);

  --status-ok-border:   rgba(150, 224, 42, .50);
  --status-warn-border: rgba(252, 167, 37, .40);
  --status-risk-border: rgba(254, 83, 67, .50);

  --neutral-tint: rgba(242, 242, 242, .10);

  /* ---- Spacing — 4px base ------------------------------------------ */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-7: 28px;  --space-8: 32px;
  --space-9: 36px;  --space-10: 40px; --space-12: 48px;

  /* ---- Radii — one curvature family -------------------------------- */
  --radius-pill:  999px;  /* buttons, chips, pills, avatars, status dots */
  --radius-card:  24px;   /* cards, callouts, modals, screen frames */
  --radius-media: 16px;   /* media wells, rows inside cards, inset panels */
  --radius-input: 8px;    /* inputs, small thumbnails, collision blocks */
  --radius-check: 4px;    /* checkbox */

  /* ---- Typography --------------------------------------------------- */
  /* Suisse Int'l is licensed and is not installed system-wide. Name it
     first; the stack falls through to the system face. Weight 450 (Book)
     resolves to the nearest available cut in the fallback. */
  --font: "Suisse Intl", "Suisse Int'l", -apple-system, BlinkMacSystemFont,
          Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, Menlo, monospace;

  --fs-display: 52px;  --lh-display: 1.02;
  --fs-h1:      40px;  --lh-h1:      1.08;
  --fs-h2:      28px;  --lh-h2:      1.15;
  --fs-h3:      20px;  --lh-h3:      1.20;
  --fs-row:     15px;  --lh-row:     1.30;
  --fs-body:    14px;  --lh-body:    1.55;
  --fs-meta:    12px;  --lh-meta:    1.40;
  --fs-label:   10px;  --lh-label:   1.20;

  --tracking-tight: -.01em;  /* headings and body */
  --tracking-label:  .10em;  /* eyebrows, labels, buttons */

  /* ---- Elevation ---------------------------------------------------- */
  --shadow-modal: 0 18px 48px rgba(0, 0, 0, .28);
  /* no shadows on dark cards */

  /* ---- Motion ------------------------------------------------------- */
  --dur-fast:   150ms;
  --dur-base:   240ms;
  --dur-slow:   420ms;
  --dur-reveal: 700ms;
  --ease: cubic-bezier(.4, 0, .2, 1);

  /* ---- Focus — always visible, never removed ------------------------ */
  --focus-ring: 2px solid var(--status-warn);
  --focus-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; --dur-reveal: 1ms;
  }
}