/* ============================================================
   Personal Design System: tokens (v1.0, 2026-10-16)
   The ONE source of truth for colours, type, spacing and motion in Chris's personal apps.
   Penpot library "Personal Design System" (team Chris Personal) mirrors these values by name.
   Grew out of SPECTRA (the IPTV app): same surfaces, radii, spacing and motion; dim text fixed
   for contrast; body text moved to Inter; one accent per app, picked from a fixed set.

   Use:  <html data-accent="green">  then load fonts.css, tokens.css, components.css (in that order).
   Never define colours, font families or font sizes anywhere else. App CSS is layout only.
   ============================================================ */

:root{
  --ds-version: "1.0";
  color-scheme: dark;

  /* surfaces (darkest to lightest) */
  --bg:        #0a0b10;   /* page */
  --surface:   #14151d;   /* cards, rows, fields */
  --surface-2: #1b1d27;   /* pressed / hover, nested cards */
  --elevated:  #232632;   /* sheets, menus, popovers */
  --well:      #0e0f15;   /* image and media wells */
  --ink:       #0a0e1a;   /* text on accent and semantic fills */
  --scrim:     rgba(5,6,9,.6);  /* behind sheets */

  /* text */
  --fg:    #f4f5f8;       /* primary text */
  --muted: #a4a8b8;       /* secondary text */
  --dim:   #858da0;       /* captions, placeholders (4.5:1 on every surface) */

  /* lines */
  --line:        rgba(255,255,255,.09);
  --line-strong: rgba(255,255,255,.16);

  /* accent: ONE hex per app, everything else is derived. Default = blue (IPTV). */
  --accent:        #5b8cff;
  --accent-2:      color-mix(in oklch, var(--accent) 72%, white);   /* hover / pressed */
  --accent-soft:   color-mix(in srgb, var(--accent) 14%, transparent); /* selected backgrounds */
  --accent-border: color-mix(in srgb, var(--accent) 55%, transparent); /* selected borders */
  --focus:         color-mix(in srgb, var(--accent) 35%, transparent); /* focus ring */

  /* semantic: states only, never decoration, never the accent */
  --live:      #ff4d4d;  --live-bg:   rgba(255,77,77,.12);
  --ok:        #52d19a;  --ok-bg:     rgba(82,209,154,.14);
  --warn:      #e6b34a;  --warn-bg:   rgba(230,179,74,.14);
  --danger:    #ff6b6b;  --danger-bg: rgba(255,107,107,.12);
  --gold:      #ffce5c;  --gold-bg:   rgba(255,206,92,.14);   /* favourites / stars */

  /* type: three families, nine sizes */
  --font-display: "Montserrat", system-ui, sans-serif;            /* titles, buttons, nav, big numbers */
  --font-body:    "Inter", system-ui, sans-serif;                 /* body, lists, inputs */
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;      /* eyebrows, data, timers */

  --fs-xs:    11px;   /* mono eyebrows only */
  --fs-sm:    13px;
  --fs-md:    14px;
  --fs-base:  16px;   /* phone body + inputs */
  --fs-lg:    18px;
  --fs-xl:    22px;
  --fs-2xl:   30px;
  --fs-stat:  44px;
  --fs-timer: 64px;

  /* radius */
  --r-sm: 8px;  --r-md: 12px;  --r-lg: 16px;  --r-xl: 22px;  --r-pill: 999px;

  /* spacing: 8 pt grid */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;  --sp-4: 16px;  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 48px;

  /* control heights (tap targets) */
  --h-sm: 32px;  --h-md: 44px;  --h-lg: 56px;

  /* elevation */
  --sh-1: 0 2px 10px rgba(0,0,0,.30);
  --sh-2: 0 12px 30px rgba(0,0,0,.42);
  --sh-3: 0 24px 64px rgba(0,0,0,.55);

  /* motion */
  --dur:  .16s;
  --ease: cubic-bezier(.2,.7,.3,1);
}

/* the accent set: pick ONE per app on <html data-accent="..."> */
[data-accent="blue"]    { --accent: #5b8cff; }   /* IPTV (default) */
[data-accent="green"]   { --accent: #12ae65; }   /* Spotter */
[data-accent="violet"]  { --accent: #a574ee; }
[data-accent="magenta"] { --accent: #db5eac; }

/* TV (1920x1080, remote control): <html data-tv> scales type and spacing, focus does the work of hover */
[data-tv]{
  --fs-xs: 18px;  --fs-sm: 21px;  --fs-md: 24px;  --fs-base: 26px;  --fs-lg: 29px;
  --fs-xl: 35px;  --fs-2xl: 48px; --fs-stat: 70px; --fs-timer: 102px;
  --sp-1: 6px;  --sp-2: 12px;  --sp-3: 18px;  --sp-4: 24px;  --sp-5: 36px;  --sp-6: 48px;  --sp-7: 72px;
  --h-sm: 48px; --h-md: 66px;  --h-lg: 84px;
  --tv-safe-x: 96px; --tv-safe-y: 54px;
}