/* Somatro Aurora — Colour tokens
   Near-black + midnight-navy foundations, dark translucent navy surfaces,
   cyan→violet Aurora accents, electric-cyan remote focus, restrained violet
   ambient. Red is RESERVED for LIVE / errors / urgent / destructive. */
:root {
  /* ---- Raw palette ---------------------------------------------------- */
  --sa-black: #05060c;            /* app floor, true near-black */
  --sa-navy-900: #070a16;         /* base canvas */
  --sa-navy-850: #0a0e1e;         /* rail / deep panel */
  --sa-navy-800: #0e1428;         /* raised panel */
  --sa-navy-700: #131b33;         /* card surface (opaque equivalent) */
  --sa-navy-600: #1b2544;         /* hover surface */
  --sa-navy-500: #26325a;         /* active / selected fill */

  --sa-focus: #12b5c9;             /* FROZEN interactive/focus cyan (handoff) */
  --sa-cyan-400: #22d3ee;         /* brand highlight (aurora gradient/logo) */
  --sa-cyan-300: #55e3f4;         /* cyan highlight */
  --sa-cyan-500: #0fb6d6;         /* cyan pressed */
  --sa-violet-500: #7c4dff;       /* violet ambient / brand */
  --sa-violet-400: #9a6bff;       /* violet highlight */
  --sa-violet-600: #6a3ce0;       /* violet deep */

  --sa-red-500: #f0384b;          /* LIVE / error / destructive */
  --sa-red-400: #ff5468;          /* red highlight */
  --sa-green-400: #34d399;        /* upcoming / reminder / success */
  --sa-amber-400: #f5b74d;        /* caution (rare) */

  --sa-white: #ffffff;
  --sa-grey-100: #eef2f8;
  --sa-grey-200: #c4d1e2;         /* secondary text at TV distance — 12.75:1 on canvas */
  --sa-grey-300: #aab4c6;
  --sa-grey-400: #8a93a6;         /* cool secondary text */
  --sa-grey-500: #5c6577;         /* muted / tertiary */
  --sa-grey-600: #3a4258;         /* faint dividers */

  /* ---- Semantic aliases ---------------------------------------------- */
  /* Backgrounds & surfaces (translucent over the navy canvas) */
  --color-bg-app: var(--sa-navy-900);
  --color-bg-floor: var(--sa-black);
  --color-bg-rail: var(--sa-navy-850);
  --surface-1: rgba(255, 255, 255, 0.022);   /* base card */
  --surface-2: rgba(255, 255, 255, 0.045);   /* raised card */
  --surface-3: rgba(255, 255, 255, 0.075);   /* hover */
  --surface-selected: rgba(18, 181, 201, 0.10); /* cyan-tinted focus fill */
  --surface-input: rgba(8, 12, 24, 0.55);

  /* Shell surfaces — MEASURED from the approved Movies screen (Batch 1). */
  --surface-rail: rgba(16, 27, 43, 0.9);    /* floating rail card */
  --surface-panel: rgba(11, 18, 30, 0.5);   /* floating secondary panel */
  --surface-scrim: rgba(4, 6, 12, 0.72);      /* dialog / overlay backdrop */

  /* Text */
  /* Four-step text ramp, measured from the approved screens. TV viewing distance
     needs more contrast than desktop: secondary text was #8a93a6 (6.40:1), which
     the real screens rejected in favour of #c4d1e2 (12.75:1) across 20 uses. */
  --text-primary: var(--sa-grey-100);    /* 17.57:1 */
  --text-strong: var(--sa-white);
  --text-secondary: var(--sa-grey-200);  /* 12.75:1 — was grey-400 */
  --text-tertiary: var(--sa-grey-300);   /*  9.45:1 */
  --text-muted: var(--sa-grey-500);
  --text-accent: var(--sa-cyan-300);          /* eyebrow labels, links */
  --text-on-accent: #041016;                  /* dark text on cyan fills */

  /* Accents — interactive cyan is the FROZEN #12b5c9; #22d3ee is brand-only */
  --accent-primary: var(--sa-focus);
  --accent-focus: var(--sa-focus);
  --accent-violet: var(--sa-violet-500);

  /* Semantic status */
  --status-live: var(--sa-red-500);
  --status-error: var(--sa-red-500);
  --status-success: var(--sa-green-400);
  --status-upcoming: var(--sa-green-400);
  --status-caution: var(--sa-amber-400);

  /* Borders */
  --border-hairline: rgba(255, 255, 255, 0.07);
  --border-soft: rgba(255, 255, 255, 0.11);
  --border-strong: rgba(255, 255, 255, 0.16);
  --border-focus: var(--sa-focus);

  /* Channel-tile fallback gradient */
  --tile-fallback: linear-gradient(150deg, #2a3b6b, #182449); /* @kind color */
}