/* ============================================================
   eur.ma IPTV — Design tokens
   Direction: "Broadcast control room" — deep ink-navy surfaces,
   amber "on-air" primary, sky accent for interaction, mono for data.
   ============================================================ */
:root {
  /* Surfaces */
  --bg:        #0A0F1E;
  --bg-grad:   radial-gradient(1200px 600px at 80% -10%, #16213f 0%, rgba(10,15,30,0) 60%),
               radial-gradient(900px 500px at 0% 0%, #131a33 0%, rgba(10,15,30,0) 55%),
               var(--bg);
  --panel:     #111829;
  --card:      #161f36;
  --card-2:    #1b2542;
  --border:    #283356;
  --border-soft:#1e294708;

  /* Text */
  --text:      #E9EDF8;
  --muted:     #93A0BD;
  --faint:     #5e6c8c;

  /* Accents */
  --amber:     #F6B23C;   /* primary / on-air / premium */
  --amber-700: #d8911f;
  --amber-soft:rgba(246,178,60,.12);
  --sky:       #5BC8FF;   /* interactive, links, focus */
  --sky-soft:  rgba(91,200,255,.12);
  --green:     #41D69C;   /* active / success */
  --green-soft:rgba(65,214,156,.13);
  --red:       #FF6B6B;   /* danger / suspended */
  --red-soft:  rgba(255,107,107,.13);
  --violet:    #9b8cff;

  /* Type */
  --f-display: "Space Grotesk", system-ui, sans-serif;
  --f-body:    "Manrope", system-ui, -apple-system, sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Scale */
  --r-sm: 8px;
  --r:    14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --shadow:    0 18px 50px -22px rgba(0,0,0,.7);
  --shadow-sm: 0 8px 24px -16px rgba(0,0,0,.65);
  --ring:      0 0 0 3px var(--sky-soft);

  --maxw: 1180px;
  --nav-h: 72px;
}