/**
 * StreamVerse — Design Tokens
 * Source of truth: design-system.md v1.1
 *
 * Every value here is copied verbatim from the locked spec. Do not invent
 * or modify tokens here — if a value is missing, go back to the spec,
 * do not guess.
 *
 * Breakpoint tokens (--bp-*) are documented as custom properties for
 * reference, but vanilla CSS cannot interpolate custom properties into
 * @media conditions, so raw px values are used inside @media rules
 * throughout the component files. Those raw values must always match
 * this table:
 *   --bp-xs   0–479px    (small phones)
 *   --bp-sm   480–767px  (large phones)
 *   --bp-md   768–1023px (tablets)
 *   --bp-lg   1024–1279px (small laptops)
 *   --bp-xl   1280px+    (desktop / large screens)
 */

:root {
  /* ============================================================
   * 3. COLOR PALETTE
   * Premium streaming platform identity — deep cinematic dark base
   * with Electric Violet as the primary brand light and Electric Cyan
   * as a secondary, more sparingly-used accent (quality/energy cues
   * like the 4K badge) — never competing with movie/show artwork
   * itself. Four dark tiers (base -> surface -> elevated -> elevated
   * hover) preserve the same depth hierarchy the layout already
   * relies on; only the hues changed, not which tier does what.
   * ============================================================ */

  /* Base (Backgrounds) */
  --color-bg-base: #080A0F;          /* Midnight Black */
  --color-bg-surface: #0D111A;       /* Dark Navy */
  --color-bg-elevated: #111827;      /* Dark Surface */
  --color-bg-elevated-hover: #161D2B; /* Elevated Surface */
  --color-border-subtle: #1E293B;    /* Border */
  --color-border-strong: #2A3A52;    /* derived — one step up from Border,
                                         toward Slate, for hover/stronger edges */

  /* Accent (Primary Brand Color) — Electric Violet */
  --color-accent: #7C3AED;
  --color-accent-hover: #8B5CF6;     /* Bright Violet */
  --color-accent-muted: rgba(124, 58, 237, 0.16); /* tinted glass fill, e.g. badges */
  --color-accent-glow: rgba(124, 58, 237, 0.35);

  /* Secondary Accent — Electric Cyan. Used sparingly and intentionally
     (quality badges, small highlight moments) rather than everywhere,
     so it reads as a deliberate second light source, not decoration. */
  --color-highlight: #22D3EE;
  --color-highlight-glow: rgba(34, 211, 238, 0.30);

  /* Semantic Colors */
  --color-success: #22C55E;
  --color-error: #EF4444;
  --color-star: #22D3EE; /* not currently rendered anywhere in this build;
                             kept aligned with the Cyan secondary accent
                             for whenever ratings/reviews are added */

  /* Text */
  --color-text-primary: #F8FAFC;     /* White */
  --color-text-secondary: #94A3B8;   /* Slate */
  --color-text-muted: #64748B;       /* derived — one step darker than Slate,
                                         for the lowest-emphasis text tier */
  --color-text-on-accent: #F8FAFC;

  /* ============================================================
   * 4. TYPOGRAPHY
   * ============================================================ */

  --font-heading: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Type scale (1.25 modular scale, 16px root) */
  --text-display: 3.5rem;        /* 56px — Hero headline (desktop) only, weight 700 */
  --text-display-line-height: 1.1;

  --text-h1: 2.75rem;            /* 44px — section titles, weight 700 */
  --text-h1-line-height: 1.15;

  --text-h2: 2.25rem;            /* 36px — sub-section titles, weight 700 */
  --text-h2-line-height: 1.2;

  --text-h3: 1.75rem;            /* 28px — card/feature titles, weight 600 */
  --text-h3-line-height: 1.25;

  --text-h4: 1.375rem;           /* 22px — small headings, plan names, weight 600 */
  --text-h4-line-height: 1.3;

  --text-body-lg: 1.125rem;      /* 18px — hero subheadline, lead paragraphs, weight 400 */
  --text-body-lg-line-height: 1.6;

  --text-body: 1rem;             /* 16px — standard body copy, weight 400 */
  --text-body-line-height: 1.6;

  --text-body-sm: 0.875rem;      /* 14px — secondary text/captions, weight 400 */
  --text-body-sm-line-height: 1.5;

  --text-micro: 0.75rem;         /* 12px — badges, labels, meta, weight 500 */
  --text-micro-line-height: 1.4;

  --letter-spacing-display: -0.02em; /* large display text only */

  /* ============================================================
   * 10. BORDER RADIUS
   * ============================================================ */

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;

  /* ============================================================
   * 11. SHADOWS & GLOW
   * ============================================================ */

  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-cta-glow: 0 0 24px var(--color-accent-glow);
  --shadow-hero-media-glow: 0 0 48px var(--color-accent-glow);
  --shadow-highlight-glow: 0 0 32px var(--color-highlight-glow);
  --shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.6);

  /* ============================================================
   * 12. SPACING SYSTEM (8px base unit)
   * ============================================================ */

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ============================================================
   * 14. RESPONSIVE BREAKPOINTS (reference only — see file header note)
   * ============================================================ */

  --bp-xs: 0px;
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* ============================================================
   * 13. GRID SYSTEM
   * ============================================================ */

  --grid-max-width: 1280px;
  --grid-columns: 12;
  --grid-gap: var(--space-5);

  /* ============================================================
   * 15. ANIMATION PRINCIPLES
   * ============================================================ */

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-micro: 200ms;      /* 150–250ms range: hover / focus / press */
  --duration-transition: 350ms; /* 300–400ms range: modals / drawers / reveals */
}