/* ════════════════════════════════════════════════════════════════════
   TSMC DESIGN TOKENS v1.0 — "Sky Keystone"
   Single source of truth for admin-v2 · viewer · website.
   Import FIRST, before any component CSS:
     admin:   <link rel="stylesheet" href="/static/tokens.css">  (copy of this file)
     website: <link rel="stylesheet" href="/tokens.css">
     viewer:  inline the :root block into the tool-page <style>
   Dark-only palette. Do not hardcode hex outside this file.
   Palette provenance: sampled from tsmc/branding assets (logo #2074d0 /
   #11b1c8 / #f0fdff, Sky Grid bg #0a0e1a→#0e3949). Contrast-verified
   against #0a0e1a / #111827 — see DESIGN-LANGUAGE.md §3.
   ════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: dark;

  /* ── 1. Brand primitives (Sky Keystone) ─────────────────────────── */
  --sky-navy-950: #0a0e1a;   /* deep space navy — page canvas, logo base   */
  --sky-navy-900: #111827;   /* card surface                               */
  --sky-navy-800: #1b2734;   /* elevated surface, table header             */
  --sky-blue-500: #2074d0;   /* BRAND BLUE (logo) — primary actions        */
  --sky-blue-600: #1b61b8;   /* blue hover / gradient end · white 6.09:1   */
  --sky-blue-300: #83b6ff;   /* link & info text · 9.26:1 on page          */
  --sky-teal-600: #0d9cb0;   /* teal hover · navy text 5.87:1              */
  --sky-teal-500: #11b1c8;   /* BRAND TEAL (logo) — accent, focus, live    */
  --sky-teal-300: #58c8d8;   /* bright teal text (wordmark) · 9.78:1 page  */
  --sky-ice-100:  #bef0fa;   /* ice tint — highlights, icon strokes        */
  --sky-ice-50:   #f0fdff;   /* brand white — hero/display text, logo ice  */

  /* ── 2. Semantic surfaces ───────────────────────────────────────── */
  --bg-page:     var(--sky-navy-950);
  --bg-card:     var(--sky-navy-900);
  --bg-elevated: var(--sky-navy-800);
  --bg-input:    var(--sky-navy-950);   /* inputs sit "inset" on cards   */

  --border:          #223049;
  --border-hover:    #37507a;
  --border-control:  #4d648a;           /* inputs, ghost buttons          */

  /* ── 3. Text (blue-tinted grays — never pure #fff/#000) ────────── */
  --text-primary:   #edf3f8;            /* 17.2:1 on page                 */
  --text-secondary: #b2c0d0;            /* 10.4:1 on page                 */
  --text-muted:     #7e8da3;            /* 5.7:1 page · 5.3:1 card (min)  */

  /* ── 4. Action colors ───────────────────────────────────────────── */
  --primary:        var(--sky-blue-500);
  --primary-hover:  var(--sky-blue-600);
  --primary-soft:   rgba(32, 116, 208, .14);
  --accent:         var(--sky-teal-500);
  --accent-bright:  var(--sky-teal-300);   /* small accent text, focus   */
  --accent-soft:    rgba(17, 177, 200, .12);
  --focus-ring:     var(--sky-teal-300);   /* outline 2px, offset 2px    */

  /* ── 5. Status (text ≥8:1 on page; fills never exceed 12% alpha) ─ */
  --ok:            #48d597;   --ok-bg:      rgba(72, 213, 151, .12);   --ok-border:      rgba(72, 213, 151, .35);
  --warn:          #e8b64c;   --warn-bg:    rgba(232, 182, 76, .12);   --warn-border:    rgba(232, 182, 76, .35);
  --danger:        #ff858f;   --danger-bg:  rgba(255, 133, 143, .12);  --danger-border:  rgba(255, 133, 143, .35);
  --info:          #83b6ff;   --info-bg:    rgba(131, 182, 255, .12);  --info-border:    rgba(131, 182, 255, .35);
  --unknown:       #7e8da3;   --unknown-bg: rgba(126, 141, 163, .10);  --unknown-border: rgba(126, 141, 163, .30);

  /* ── 6. Typography ──────────────────────────────────────────────── */
  --font-sans: system-ui, "Segoe UI", -apple-system, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --fs-display: 44px;  /* marketing hero only (website)                 */
  --fs-h1:      24px;  /* page title                                    */
  --fs-h2:      16px;  /* section heading                               */
  --fs-h3:      15px;  /* card title                                    */
  --fs-body:    14px;  /* base                                          */
  --fs-body-sm: 13px;  /* table cells, secondary copy                   */
  --fs-caption: 12px;  /* meta rows, hints                              */
  --fs-label:   11px;  /* overline: uppercase, +.06em, 600              */
  --fs-data:    12.5px;/* mono values                                   */
  --lh-tight:   1.25;
  --lh-normal:  1.5;
  --ls-overline: .06em;

  /* ── 7. Spacing (4px grid) ──────────────────────────────────────── */
  --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-14: 56px;

  /* ── 8. Radius ──────────────────────────────────────────────────── */
  --radius-sm: 6px;   /* chips in tables, badges */
  --radius-md: 8px;   /* buttons, inputs, nav    */
  --radius-lg: 12px;  /* cards, panels, tables   */
  --radius-xl: 16px;  /* login card, empty state */
  --radius-pill: 999px;

  /* ── 9. Elevation ───────────────────────────────────────────────── */
  --shadow-card: 0 8px 24px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .04);
  --shadow-lift: 0 12px 32px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .05);
  --shadow-pop:  0 16px 48px rgba(0, 0, 0, .5);

  /* ── 10. Motion ─────────────────────────────────────────────────── */
  --dur-fast: 150ms;
  --dur-med:  250ms;
  --ease-out: cubic-bezier(.2, .7, .3, 1);
  --lift: -2px;                    /* card hover translateY            */
  --pulse-period: 2.2s;            /* live-status dot pulse            */

  /* ── 11. Layout ─────────────────────────────────────────────────── */
  --container-max: 1280px;
  --gutter: 24px;                  /* 14px below 760px viewport        */
  --z-nav: 40;
  --z-pop: 100;
}