/* Strimmi design tokens: single source of truth for colour, type, spacing, radius,
   elevation and motion. Dark only: watched for hours in a dim room, so no light theme. */

:root {
  /* Neutrals: one ramp, surfaces step upward toward the viewer (canvas < rail < surface-1..4).
   * The luminance step separates surfaces; borders are secondary. */
  --bg-canvas:      #0a0b0d;   /* player canvas, app root */
  --bg-rail:        #101114;   /* activity rail, groups column */
  --bg-surface-1:   #121317;   /* sidebar body, list background */
  --bg-surface-2:   #191b20;   /* resting rows, cards, recessed group headers */
  --bg-surface-3:   #20222a;   /* menus, dropdowns, dialog body, popovers */
  --bg-surface-4:   #2a2d36;   /* hover/pressed on surface-3, chip fills */

  --border-subtle:  #262932;   /* hairline dividers between rows and sections */
  --border-strong:  #3a3e4a;   /* input borders, group separators */

  --text-primary:   #f4f5f7;   /* titles, primary labels, plot copy */
  --text-secondary: #b7bbc6;   /* EPG now-line, catalog meta, secondary labels */
  --text-tertiary:  #868b97;   /* counts, timestamps, least-important hints */
  --text-disabled:  #5c606b;   /* disabled controls only */

  /* Accents: red = Live TV, blue = Movies & Series, violet = the app itself (settings, focus).
   * -500 is for icons/text on dark; use -600 under white text. Destructive reuses live red. */
  --accent-live-400:    #ff6a5c;
  --accent-live-500:    #ef4444;
  --accent-live-600:    #d33429;

  --accent-vod-400:     #7aa3ff;
  --accent-vod-500:     #5b8cff;
  --accent-vod-600:     #3a63c9;

  --accent-neutral-400: #8571e0;
  --accent-neutral-500: #9b8cff;
  --accent-neutral-600: #6a54d6;

  /* ── Status ─────────────────────────────────────────────────────────────── */
  --amber-500:   #f0b429;   /* offline / degraded text and icons, favourites star */
  --amber-600:   #b5760a;   /* offline status pill fill (dark text on top) */
  --success-500: #3ecf7e;   /* connected, healthy, complete */

  /* Type scale: eight steps, replacing 17 sizes between 9 and 34px.
   * A new size usually means the layout needs fixing. */
  --text-2xs:  11px;   /* uppercase micro-labels, counts, badges */
  --text-xs:   12px;   /* secondary meta, EPG line, hints */
  --text-sm:   13px;   /* default UI text — buttons, menu items, rows */
  --text-base: 14px;   /* body copy — plot text, anything read at length */
  --text-md:   16px;   /* dialog headings, section headers */
  --text-lg:   19px;   /* catalog title, guide bar heading */
  --text-xl:   24px;   /* login and empty-state headline */
  --text-2xl:  30px;   /* reserved for one hero moment */

  --leading-tight: 1.25;
  --leading-snug:  1.4;
  --leading-base:  1.5;
  --leading-loose: 1.6;

  --tracking-label: 0.14em;  /* uppercase micro-labels only */
  --tracking-tight: -0.01em; /* large headings */

  --font-ui: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "Cascadia Mono", Consolas, ui-monospace, monospace;

  /* Spacing: 4px base. Use flex/grid + gap, not per-element margins (they collapse or double). */
  --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;

  /* Radii: four steps, replacing eleven. */
  --radius-sm:   4px;    /* chips, small inputs, logo plates */
  --radius-md:   8px;    /* buttons, cards, dialogs */
  --radius-lg:   12px;   /* posters, hero cards */
  --radius-full: 999px;  /* pills, badges */

  /* ── Elevation ─────────────────────────────────────────────────────────── */
  --shadow-1: 0 2px 8px rgba(0, 0, 0, .35);    /* resting card lift */
  --shadow-2: 0 8px 24px rgba(0, 0, 0, .45);   /* dropdowns, popovers */
  --shadow-3: 0 20px 60px rgba(0, 0, 0, .55);  /* dialogs, modals */

  /* Layout: shell geometry lives only here; the sidebar toggle handle once duplicated it and
   * went stale. */
  --rail-w:     48px;
  --sidebar-w:  290px;   /* current shell; the toggle handle derives from this */
  --groups-w:   212px;   /* reserved for the three-column shell */
  --channels-w: 340px;  /* shared TV channel and catalog search-results pane */

  /* Motion: entering uses --ease-standard, leaving uses --ease-exit. */
  --dur-instant: 80ms;    /* colour and background swaps */
  --dur-fast:    140ms;   /* hover, press */
  --dur-base:    220ms;   /* menu open, tab switch */
  --dur-slow:    320ms;   /* pane collapse, overlay open/close */

  --ease-standard: cubic-bezier(.2, .8, .2, 1);
  --ease-exit:     cubic-bezier(.4, 0, 1, 1);
}

/* Respect the OS setting: collapse every duration and leave opacity crossfades
 * only. Declared here so no component has to remember to do it. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 1ms;
    --dur-fast:    1ms;
    --dur-base:    1ms;
    --dur-slow:    1ms;
  }

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* One focus ring everywhere, always neutral violet. Selection keeps the mode colour (red Live,
   blue catalog): two signals, two colours. */
:focus-visible {
  outline: 2px solid var(--accent-neutral-500);
  outline-offset: 1px;
}