/*
 * Blast TV design-token reference candidate.
 * This file is intentionally not loaded by the approval prototypes yet.
 * Values are extracted from the shared rules present in Variants A, B, and C
 * on 2026-08-05. Adopt incrementally after a direction is approved.
 */

:root {
  /* Primitive palette */
  --ds-color-white: #fff;
  --ds-color-black: #09070c;
  --ds-color-magenta-500: #bf0096;
  --ds-color-magenta-400: #dc18ae;
  --ds-color-yellow-400: #ffbd18;
  --ds-color-red-400: #f04452;
  --ds-color-green-400: #38c98d;
  --ds-color-red-300: #ff6b76;

  /* Semantic color */
  --ds-color-canvas: var(--ds-color-black);
  --ds-color-surface-1: #15111a;
  --ds-color-surface-2: #211a27;
  --ds-color-surface-3: #2b2233;
  --ds-color-border: #39303f;
  --ds-color-text: var(--ds-color-white);
  --ds-color-text-muted: #bbb4c3;
  --ds-color-text-secondary: #d8d2dd;
  --ds-color-action: var(--ds-color-magenta-500);
  --ds-color-action-hover: var(--ds-color-magenta-400);
  --ds-color-focus: #ffd15c;
  --ds-color-live: var(--ds-color-red-400);
  --ds-color-success: var(--ds-color-green-400);
  --ds-color-warning: var(--ds-color-yellow-400);
  --ds-color-error: var(--ds-color-red-300);

  /* Typography */
  --ds-font-family-ui: Gotham, Arial, sans-serif;
  --ds-font-weight-medium: 500;
  --ds-font-weight-bold: 700;
  --ds-font-size-caption: 0.75rem;
  --ds-font-size-label: 0.8125rem;
  --ds-font-size-body-sm: 0.875rem;
  --ds-font-size-body: 1rem;
  --ds-font-size-body-lg: 1.0625rem;
  --ds-font-size-title-sm: 1.25rem;
  --ds-font-size-title-lg: 2.375rem;
  --ds-font-size-display: 3.625rem;
  --ds-line-height-tight: 1.06;
  --ds-line-height-body: 1.55;
  --ds-letter-spacing-tight: -0.035em;

  /* Spacing: 4px base grid */
  --ds-space-1: 0.25rem;
  --ds-space-2: 0.5rem;
  --ds-space-3: 0.75rem;
  --ds-space-4: 1rem;
  --ds-space-5: 1.25rem;
  --ds-space-6: 1.5rem;
  --ds-space-8: 2rem;
  --ds-space-10: 2.5rem;
  --ds-space-12: 3rem;
  --ds-space-16: 4rem;

  /* Shape and controls */
  --ds-radius-sm: 0.5rem;
  --ds-radius-md: 0.75rem;
  --ds-radius-lg: 1rem;
  --ds-radius-pill: 999px;
  --ds-control-min-height: 2.75rem;

  /* Layout */
  --ds-content-max: 90rem;
  --ds-gutter-desktop: 2.25rem;
  --ds-gutter-mobile: 1.25rem;
  --ds-header-height: 4.75rem;
  --ds-mobile-nav-height: 4.75rem;

  /* Layering */
  --ds-z-base: 0;
  --ds-z-sticky: 20;
  --ds-z-backdrop: 30;
  --ds-z-dialog: 40;
  --ds-z-review-tools: 50;
  --ds-z-toast: 60;
  --ds-z-tooltip: 70;

  /* Motion */
  --ds-duration-fast: 150ms;
  --ds-duration-state: 260ms;
  --ds-duration-layout: 420ms;
  --ds-ease-out: cubic-bezier(.25, 1, .5, 1);
  --ds-ease-out-emphasized: cubic-bezier(.22, 1, .36, 1);
}

@media (max-width: 720px) {
  :root {
    --ds-header-height: 4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ds-duration-fast: 1ms;
    --ds-duration-state: 1ms;
    --ds-duration-layout: 1ms;
  }
}