/* ============================================================================
   OMAA — Design Tokens
   Color, type, spacing, radius, elevation & motion for the OMAA streaming app.
   Dark-first (the product's primary surface) with a full light theme.
   Single signature accent: "Ember" coral-orange.
   ----------------------------------------------------------------------------
   Load AFTER the font links (see fonts/fonts.css or the Google Fonts <link>s).
   ============================================================================ */

/* ---------- Fonts ---------------------------------------------------------- */
:root {
  --font-display: "Sora", "Hanken Grotesk", system-ui, sans-serif;   /* brand, headings, big numbers */
  --font-ui:      "Hanken Grotesk", system-ui, -apple-system, sans-serif; /* body, UI, labels */
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", monospace;   /* EPG times, URLs, codes, stream info */
  --font-arabic:  "Cairo", "Noto Kufi Arabic", system-ui, sans-serif;     /* Arabic display + UI */
}

/* Arabic / RTL: swap display + UI faces to Cairo. Apply data-lang="ar" (and
   dir="rtl") on the app root. Mono stays for digits/times (Cairo also has
   excellent Arabic-Indic + Latin numerals). */
[data-lang="ar"] {
  --font-display: var(--font-arabic);
  --font-ui:      var(--font-arabic);
}

/* ============================================================================
   COLOR — raw palette (theme-agnostic ramps)
   ============================================================================ */
:root {
  /* Ember — the single signature accent */
  --ember-300: #FFB59C;
  --ember-400: #FF8B66;
  --ember-500: #FF6A3D;   /* PRIMARY accent */
  --ember-600: #F2542D;   /* pressed / accent-on-light text */
  --ember-700: #C73E1D;

  /* Obsidian — cool near-black neutrals (dark theme surfaces) */
  --obsidian-950: #07080C;
  --obsidian-900: #0A0B0F;
  --obsidian-850: #101218;
  --obsidian-800: #14161D;
  --obsidian-700: #1C1F28;
  --obsidian-600: #262A35;
  --obsidian-500: #343948;

  /* Mist — warm-cool light neutrals (light theme surfaces) */
  --mist-50:  #FFFFFF;
  --mist-100: #F7F8FA;
  --mist-200: #EEF0F4;
  --mist-300: #E2E5EC;
  --mist-400: #CDD2DC;
  --mist-500: #A6ADBC;

  /* Ink — text neutrals */
  --ink-900: #0C0D12;
  --ink-700: #2C2F3A;
  --ink-500: #5A5F6E;
  --ink-300: #9499A8;

  /* Semantic hues (shared by both themes) */
  --green-500:  #2DD4A7;   /* success / live / watched */
  --amber-500:  #F6B73C;   /* warning / expiring soon */
  --red-500:    #F0463C;   /* error / destructive */
  --blue-500:   #4C8DFF;   /* info / links in body copy */
  --live-red:   #FF3B5C;   /* "LIVE" badge / on-air dot */
}

/* ============================================================================
   THEME — DARK (default / primary product surface)
   ============================================================================ */
:root,
[data-theme="dark"] {
  color-scheme: dark;

  /* Backgrounds (lowest → highest elevation) */
  --bg-base:     var(--obsidian-900);   /* app background */
  --bg-sunken:   var(--obsidian-950);   /* behind cards / player letterbox */
  --bg-raised:   var(--obsidian-800);   /* cards, sheets */
  --bg-overlay:  var(--obsidian-700);   /* menus, popovers, modals */
  --bg-hover:    rgba(255,255,255,0.06);
  --bg-active:   rgba(255,255,255,0.10);

  /* Foreground / text */
  --fg-1: #F5F6FA;   /* primary text */
  --fg-2: #A7ACBA;   /* secondary text, metadata */
  --fg-3: #6B7080;   /* tertiary, captions, disabled-ish */
  --fg-on-accent: #1A0B05;  /* text on ember fills */

  /* Lines & borders */
  --border-1: rgba(255,255,255,0.08);   /* default hairline */
  --border-2: rgba(255,255,255,0.14);   /* stronger / hover */
  --border-strong: rgba(255,255,255,0.24);

  /* Accent */
  --accent:        var(--ember-500);
  --accent-hover:  var(--ember-400);
  --accent-press:  var(--ember-600);
  --accent-quiet:  rgba(255,106,61,0.14);  /* tinted fills, chips */
  --accent-ring:   rgba(255,106,61,0.45);  /* focus glow */

  /* Semantic */
  --success: var(--green-500);
  --warning: var(--amber-500);
  --danger:  var(--red-500);
  --info:    var(--blue-500);
  --live:    var(--live-red);

  /* Backdrops (blurred poster art sits behind this scrim) */
  --scrim-strong: linear-gradient(180deg, rgba(10,11,15,0) 0%, rgba(10,11,15,0.55) 55%, rgba(10,11,15,0.96) 100%);
  --scrim-side:   linear-gradient(90deg, rgba(10,11,15,0.94) 0%, rgba(10,11,15,0.70) 45%, rgba(10,11,15,0) 100%);

  /* Elevation — dark theme leans on tint + ring, shadows are deep & soft */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.40);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.45);
  --shadow-lg: 0 24px 60px rgba(0,0,0,0.55);
  --shadow-pop: 0 16px 48px rgba(0,0,0,0.60);
  --glow-accent: 0 8px 30px rgba(255,106,61,0.35);
}

/* ============================================================================
   THEME — LIGHT
   ============================================================================ */
[data-theme="light"] {
  color-scheme: light;

  --bg-base:     var(--mist-100);
  --bg-sunken:   var(--mist-200);
  --bg-raised:   var(--mist-50);
  --bg-overlay:  var(--mist-50);
  --bg-hover:    rgba(12,13,18,0.04);
  --bg-active:   rgba(12,13,18,0.07);

  --fg-1: var(--ink-900);
  --fg-2: var(--ink-500);
  --fg-3: var(--ink-300);
  --fg-on-accent: #FFFFFF;

  --border-1: var(--mist-300);
  --border-2: var(--mist-400);
  --border-strong: var(--mist-500);

  --accent:        var(--ember-600);   /* slightly deeper for contrast on light */
  --accent-hover:  var(--ember-500);
  --accent-press:  var(--ember-700);
  --accent-quiet:  rgba(242,84,45,0.10);
  --accent-ring:   rgba(242,84,45,0.35);

  --success: #15A87E;
  --warning: #C8881A;
  --danger:  #D43A30;
  --info:    #2F6FE0;
  --live:    #E62347;

  --scrim-strong: linear-gradient(180deg, rgba(247,248,250,0) 0%, rgba(247,248,250,0.55) 55%, rgba(247,248,250,0.97) 100%);
  --scrim-side:   linear-gradient(90deg, rgba(247,248,250,0.95) 0%, rgba(247,248,250,0.70) 45%, rgba(247,248,250,0) 100%);

  --shadow-sm: 0 1px 2px rgba(16,24,40,0.06);
  --shadow-md: 0 8px 24px rgba(16,24,40,0.10);
  --shadow-lg: 0 24px 60px rgba(16,24,40,0.14);
  --shadow-pop: 0 16px 48px rgba(16,24,40,0.16);
  --glow-accent: 0 8px 30px rgba(242,84,45,0.28);
}

/* ============================================================================
   SPACING — 4px base scale
   ============================================================================ */
:root {
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Layout rails */
  --gutter-mobile: 20px;
  --gutter-tv: 64px;       /* 10-foot safe-area inset */
  --maxw-content: 1280px;
}

/* ============================================================================
   RADIUS
   ============================================================================ */
:root {
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;    /* default control / chip */
  --radius-lg: 18px;    /* cards, posters */
  --radius-xl: 24px;    /* sheets, hero panels */
  --radius-2xl: 32px;   /* spotlight, app-icon squircle feel */
  --radius-pill: 999px;
}

/* ============================================================================
   MOTION — calm, cinematic. Focus/press are the loud moments.
   ============================================================================ */
:root {
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);     /* default UI */
  --ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1);  /* enter / spotlight */
  --ease-exit:     cubic-bezier(0.4, 0, 1, 1);

  --dur-1: 120ms;   /* taps, hovers */
  --dur-2: 200ms;   /* default transitions */
  --dur-3: 320ms;   /* sheets, page */
  --dur-4: 480ms;   /* spotlight / backdrop crossfade */

  /* TV focus motif — scale + ember ring + glow */
  --focus-scale: 1.06;
  --focus-ring: 0 0 0 2px var(--bg-base), 0 0 0 5px var(--accent);
  --focus-glow: 0 0 0 2px var(--bg-base), 0 0 0 5px var(--accent), 0 12px 40px var(--accent-ring);
}

/* ============================================================================
   TYPE SCALE — semantic roles
   Display roles are sized for 10-foot (TV) where noted; UI roles for touch.
   ============================================================================ */
:root {
  --text-display: 700 56px/1.04 var(--font-display);   /* spotlight titles, TV hero */
  --text-h1:      700 40px/1.08 var(--font-display);
  --text-h2:      600 30px/1.14 var(--font-display);
  --text-h3:      600 22px/1.22 var(--font-display);
  --text-title:   600 18px/1.3  var(--font-ui);        /* card / row titles */
  --text-body:    400 16px/1.55 var(--font-ui);
  --text-body-sm: 400 14px/1.5  var(--font-ui);
  --text-label:   600 13px/1.2  var(--font-ui);        /* buttons, tabs */
  --text-caption: 500 12px/1.35 var(--font-ui);        /* metadata, badges */
  --text-mono:    500 13px/1.4  var(--font-mono);       /* EPG times, URLs, codes */
  --tracking-caps: 0.08em;   /* for ALL-CAPS labels/badges */
}

/* ----------------------------------------------------------------------------
   Optional opinionated base — apply by adding class="omaa" to <body>.
   Token-only usage (var(--…)) works without this.
   ---------------------------------------------------------------------------- */
.omaa {
  background: var(--bg-base);
  color: var(--fg-1);
  font: var(--text-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.omaa h1 { font: var(--text-h1); margin: 0; letter-spacing: -0.02em; }
.omaa h2 { font: var(--text-h2); margin: 0; letter-spacing: -0.015em; }
.omaa h3 { font: var(--text-h3); margin: 0; letter-spacing: -0.01em; }
.omaa p  { margin: 0; color: var(--fg-2); }
.omaa a  { color: var(--accent); text-decoration: none; }
.omaa ::selection { background: var(--accent-quiet); }

/* Utility: ALL-CAPS micro label (LIVE, NEW, 4K, badges) */
.omaa-caps {
  font: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
}