/* ============================================================================
   hokio — design tokens (single source of truth)
   Dark-first streaming brand: near-black canvas, warm peach-orange accent with
   a signature gradient, cream off-white text. Change a value here and it
   cascades through the whole UI (components reference these vars, never hexes).
   ============================================================================ */
:root {
  /* --- surfaces (dark, cool near-black) --- */
  --bg:        #0E0F13;   /* app canvas */
  --bg-2:      #14161B;   /* raised panels / overlays */
  --card:      #181A20;   /* cards, inputs */
  --card-2:    #202329;   /* hover / elevated card */
  --line:      #282B33;   /* hairline borders */

  /* --- text (warm cream) --- */
  --fg:        #F4EFE7;   /* primary text / icon */
  --fg-dim:    #C9C6C0;   /* secondary text */
  --mut:       #8E9099;   /* muted / captions */

  /* --- brand accent (peach → orange) --- */
  --acc:       #E8965A;   /* solid accent (play, progress, focus, active) */
  --acc-hi:    #F3B481;   /* lighter peach (gradient top, hovers) */
  --acc-lo:    #D87A3B;   /* deeper orange (gradient bottom, pressed) */
  --acc-grad:  linear-gradient(135deg, #F3B481 0%, #E8965A 46%, #D87A3B 100%);
  --acc-soft:  rgba(232, 150, 90, .16);   /* tints, glows, selected rows */
  --on-acc:    #1A1206;   /* text/icon on an accent fill */

  /* --- geometry --- */
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px;

  /* --- elevation --- */
  --sh-1: 0 2px 8px rgba(0,0,0,.35);
  --sh-2: 0 10px 32px rgba(0,0,0,.5);
  --sh-acc: 0 10px 30px rgba(216, 122, 59, .38);   /* focus/active glow */

  /* --- layout --- */
  --rail: 68px;
}