/* ==========================================================================
   tokens.css — "Master Control" design language for the homelab TV OS
   One file, two surfaces. TV values are rem; set the root size on the TV:
     html.tv { font-size: calc(100vw / 120); }   16px @1920, 32px @3840
   Phone values are px (the phone is never scaled).
   Fonts: <link href="https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,400..800&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet">
   ========================================================================== */
:root {
  /* ---- color (contrast vs --c-bg in comments, WCAG) ---------------------- */
  --c-bg:          #0E0F0C;  /* warm near-black, never #000 */
  --c-surface:     #161714;  /* panels, phone body */
  --c-surface-2:   #1F201C;  /* recessed readouts, inputs */
  --c-raised:      #262722;  /* phone key caps */
  --c-raised-down: #1A1B17;  /* key cap while pressed */
  --c-rule:        #3A3B34;  /* hairline rules */
  --c-rule-strong: #5C5C51;  /* outlines of empty slots, focus-adjacent */
  --c-ink:         #ECE6D6;  /* 15.4:1 primary text */
  --c-muted:       #B3AD9D;  /*  8.6:1 secondary text (7.3:1 on surface-2) */
  --c-ink-inv:     #0E0F0C;  /* text on ink / accent fills */
  --c-accent:      #FFB000;  /* 10.5:1 tally amber — focus, live, primary */
  --c-accent-ink:  #1A1200;  /* text on amber, 10.1:1 */
  --c-accent-dim:  #6B4A00;  /* tally bar when idle / unfocused active */
  --c-danger:      #FF9580;  /* error text, ≥7:1 on bg + surfaces */
  --c-danger-fill: #FF8670;  /* error bars; pair with --c-ink-inv */
  --c-ok:          #8ED07A;  /* online dot */
  --c-focus-bg:    var(--c-ink);
  --c-focus-ink:   var(--c-ink-inv);
  --c-focus-bar:   var(--c-accent);
  --c-qr-dark:     #000000;  /* QR modules — always pure */
  --c-qr-light:    #FFFFFF;  /* QR quiet zone — always pure */
  --c-shadow:      #050504;  /* phone key throw */

  /* ---- type -------------------------------------------------------------- */
  --f-display: "Archivo", "Arial Narrow", sans-serif;  /* use wdth 62–100 */
  --f-mono:    "IBM Plex Mono", ui-monospace, "Menlo", monospace;
  --wdth-cond: 68;    /* font-stretch % for condensed display */
  --wdth-semi: 84;
  --track-caps: 0.06em;  /* letter-spacing for all-caps labels */

  /* TV scale (rem; px at 1080p). Nothing on TV goes below --tv-t-meta. */
  --tv-t-meta:    1.75rem;   /* 28 — legends, timestamps */
  --tv-t-body:    2rem;      /* 32 — body, list rows */
  --tv-t-label:   2.25rem;   /* 36 — tile sublabels */
  --tv-t-title:   3.5rem;    /* 56 — app title, section heads */
  --tv-t-tile:    5.5rem;    /* 88 — tile name */
  --tv-t-head:    6rem;      /* 96 — empty-state headline */
  --tv-t-display: 9rem;      /* 144 — clock */

  /* Phone scale (px). */
  --ph-t-micro:   12px;   /* legends under keys only */
  --ph-t-label:   14px;
  --ph-t-body:    17px;
  --ph-t-key:     20px;
  --ph-t-readout: 22px;
  --ph-t-title:   34px;
  --ph-t-giant:   72px;

  /* ---- space (4px base; TV in rem) --------------------------------------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --tv-safe-x: 6rem;       /* 96px  = 5% of 1920 */
  --tv-safe-y: 3.375rem;   /* 54px  = 5% of 1080 */
  --tv-gap:    1.5rem;     /* 24 grid gutter */
  --tv-col:    2rem;       /* 32 column gap */
  --tv-qr:     17.5rem;    /* 280 QR edge (≥260 required), quiet zone added */
  --tv-qr-hero:30rem;      /* 480 in the empty state */
  --ph-pad:    20px;
  --ph-gap:    10px;
  --ph-tap:    56px;       /* minimum target */
  --ph-key:    64px;       /* standard key height */

  /* ---- shape ------------------------------------------------------------- */
  --r-0: 0;
  --r-1: 2px;              /* the only radius in the system */
  --hair: 1px;             /* rules at 1080p; becomes 2px at 2160p via rem below */
  --tv-hair: 0.125rem;     /* 2px TV rule — survives TV scaling */
  --tv-tally: 0.75rem;     /* 12px tally bar */
  --tv-focus-ring: 0.375rem;

  /* ---- motion (mechanical: steps, no float) ------------------------------ */
  --m-snap:   80ms;        /* focus move */
  --m-press:  40ms;        /* key down */
  --m-release:90ms;        /* key up */
  --m-flap:   240ms;       /* split-flap text change */
  --m-hold:   600ms;       /* long-press to HOME */
  --e-snap:   steps(2, jump-end);
  --e-flap:   steps(4, jump-end);
  --e-linear: linear;
}

@media (prefers-reduced-motion: reduce) {
  :root { --m-snap: 0ms; --m-flap: 0ms; --m-press: 0ms; --m-release: 0ms; }
}