/* ==========================================================================
   FoxDen tokens v1 (SYN-596) — the design-token layer
   --------------------------------------------------------------------------
   Contract (read STYLE.md before editing):
   - Custom properties ONLY, on :root. No rules that paint anything. Linked
     before style.css its only visible effect is the --mono bridge (fixes
     the undefined var(--mono) at app-machines.js:1741/1978).
   - Names follow the shadcn/ui token convention (--background, --foreground,
     --card, --popover, --primary, --secondary, --muted, --accent,
     --destructive, --border, --input, --ring, --radius, --sidebar-*,
     --chart-*). This is token ARCHITECTURE only: FoxDen ships no shadcn
     components and has no build step (vanilla static app under website/).
   - FoxDen extensions keep the same grammar: role token + `-foreground`;
     tints are `-soft` (fill wash) / `-line` (tinted border) / `-hover`;
     scales use Tailwind-v4 style names (--space-N = N x 4px, --text-*,
     --radius-*, --shadow-*, --duration-*, --ease-*, --z-*).
   - Dark-only by design. A future light theme overrides the SAME names under
     [data-theme="light"]; it never adds names.
   - LOAD ORDER: link tokens.css BEFORE style.css. While the legacy :root
     block in style.css (lines 14-76 @ 1144f73) exists, two names collide
     with different meanings:
       --accent  legacy = fox orange      shadcn = hover surface
       --muted   legacy = muted TEXT      shadcn = muted SURFACE
     Loaded first, the legacy block wins both collisions -> zero visual
     change. New code must not write var(--accent) / var(--muted) until
     the rename step in STYLE.md "Adoption" has landed.
   - Raw hex / px / rgba literals are legal in THIS file only;
     scripts/style-lint.py ratchets them everywhere else.
   ========================================================================== */

:root {
  /* ---- surfaces: elevation ladder, darkest -> lightest ---------------- */
  --sidebar: #090a0d;                    /* rail + sidebar */
  --inset: #0b0d10;                      /* wells: inputs, code, kbd */
  --inset-foreground: #b6bcc7;
  --background: #0e1013;                 /* page canvas */
  --foreground: #e8eaee;                 /* primary text, headings */
  --popover: #13161b;                    /* menus, toasts, tooltips */
  --popover-foreground: #e8eaee;
  --card: #161920;                       /* panels, cards, modals */
  --card-foreground: #e8eaee;
  --secondary: #1b1f27;                  /* default (non-CTA) button fill */
  --secondary-foreground: #e8eaee;
  --secondary-hover: #232832;
  --muted: #1b1f27;                      /* neutral badge, skeleton, tab list */
  --muted-foreground: #8d95a2;           /* labels, meta, nav links */
  --accent: #1b1f27;                     /* hover surface: ghost buttons, menu rows */
  --accent-foreground: #e8eaee;

  /* ---- text tiers (beyond shadcn's two) ------------------------------- */
  --dim-foreground: #b6bcc7;             /* secondary copy, ghost-button text */
  --faint-foreground: #6b7380;           /* placeholders, units, de-emphasised hints */

  /* ---- brand: fox orange ---------------------------------------------- */
  --primary: #ef8033;                    /* CTAs, active nav, focus, links-as-actions */
  --primary-foreground: #1a0d04;         /* ink on orange fills (the ONLY one) */
  --primary-hover: #ff9a54;
  --primary-soft: rgba(239, 128, 51, .12);
  --primary-line: rgba(239, 128, 51, .45);
  --primary-gradient: linear-gradient(180deg, #f08a40, #ef8033);
  --primary-gradient-hover: linear-gradient(180deg, #ffa05f, #ff9a54);

  /* ---- status (each: solid / -soft fill / -line border) ---------------- */
  --success: #3fb950;
  --success-hover: #56d364;              /* ttl/meter fill second stop (SYN-609) */
  --success-soft: rgba(63, 185, 80, .12);
  --success-line: rgba(63, 185, 80, .30);
  --warning: #d29922;
  --warning-hover: #e3b341;              /* ttl/meter fill second stop, low state (SYN-609) */
  --warning-soft: rgba(210, 153, 34, .12);
  --warning-line: rgba(210, 153, 34, .30);
  --destructive: #f85149;                /* outline + tint only: no solid-red fills,
                                            hence no --destructive-foreground */
  --destructive-soft: rgba(248, 81, 73, .12);
  --destructive-line: rgba(248, 81, 73, .30);
  --info: #58a6ff;                       /* also: inline links */
  --info-soft: rgba(88, 166, 255, .12);
  --info-line: rgba(88, 166, 255, .30);
  --info-strong: #7fb2ff;                /* info text on an info-soft surface */

  /* ---- lines + focus -------------------------------------------------- */
  --border: #252932;                     /* default hairline */
  --border-soft: #1c2027;                /* dividers inside a surface */
  --border-strong: #343a48;              /* hover borders, elevated edges */
  --input: #252932;                      /* field BORDER (shadcn meaning) */
  --ring: #ef8033;                       /* :focus-visible outline */
  --ring-width: 2px;
  --ring-offset: 2px;
  --ring-halo: 0 0 0 3px rgba(239, 128, 51, .12);  /* focused field glow */

  /* ---- sidebar (shadcn sidebar names) --------------------------------- */
  --sidebar-foreground: #8d95a2;         /* nav links rest muted; brand uses --foreground */
  --sidebar-primary: #ef8033;
  --sidebar-primary-foreground: #1a0d04;
  --sidebar-accent: rgba(239, 128, 51, .16);  /* active nav wash */
  --sidebar-accent-foreground: #ff9a54;       /* active nav text */
  --sidebar-hover: rgba(255, 255, 255, .045); /* nav hover wash */
  --sidebar-border: #1c2027;
  --sidebar-ring: #ef8033;
  --sidebar-width: 248px;
  --sidebar-width-icon: 68px;            /* tablet icon rail */

  /* ---- guest surfaces: terminals, desktops, media ---------------------- */
  /* Values = the CURRENT xterm/noVNC theme (byte-identical in 4 JS sites),
     tokenised as-is; re-skinning the terminal is a separate decision. */
  --terminal: #0b0d10;
  --terminal-foreground: #e6edf3;
  --terminal-cursor: #f0883e;
  --terminal-selection: #3b4252;
  --letterbox: #000000;                  /* video / cast letterbox */

  /* ---- overlays ------------------------------------------------------- */
  --overlay: rgba(5, 6, 8, .68);         /* modal backdrop, mobile scrim */
  --overlay-blur: 4px;

  /* ---- data colors ---------------------------------------------------- */
  --chart-1: #ef8033;                    /* series order: primary first */
  --chart-2: #58a6ff;
  --chart-3: #3fb950;
  --chart-4: #d29922;
  --chart-5: #8d95a2;
  --brand-tile-foreground: #ffffff;      /* glyph on a distro brand fill */
  --brand-tile-fallback: #4b5563;        /* unknown distro tile */

  /* ---- typography ----------------------------------------------------- */
  --font-sans: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;           /* JetBrains Mono ships 400 + 600 only */
  --font-weight-bold: 700;
  --text-2xs: 11px;                      /* micro labels, badges, table heads */
  --text-xs: 12px;                       /* meta, captions, inline code */
  --text-sm: 13px;                       /* secondary UI, small buttons, code blocks */
  --text-base: 14px;                     /* body + controls */
  --text-md: 15px;                       /* h3, large buttons */
  --text-lg: 17px;                       /* brand, modal title, lead copy */
  --text-xl: 19px;                       /* h2, panel title */
  --text-2xl: 24px;                      /* KPI values */
  --text-3xl: 30px;                      /* page title */
  --text-4xl: 46px;                      /* hero, balance */
  --leading-none: 1;
  --leading-tight: 1.2;                  /* headings, controls */
  --leading-snug: 1.4;                   /* dense rows, terminal text */
  --leading-normal: 1.55;                /* body */
  --leading-relaxed: 1.65;               /* long-form: docs, legal */
  --tracking-tighter: -0.035em;          /* hero only */
  --tracking-tight: -0.015em;            /* headings, brand, KPI numbers */
  --tracking-normal: 0;
  --tracking-wide: .04em;                /* uppercase micro labels */
  --tracking-wider: .06em;               /* uppercase section eyebrows */

  /* ---- spacing: --space-N = N x 4px (half steps exist on purpose) ----- */
  --space-0-5: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-2-5: 10px;
  --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: --radius is the base (= card radius, shadcn semantics) -- */
  --radius: 12px;
  --radius-xs: calc(var(--radius) - 8px);   /* 4  chips, kbd, tiny marks */
  --radius-sm: calc(var(--radius) - 6px);   /* 6  small buttons, inline code, thumbs */
  --radius-md: calc(var(--radius) - 4px);   /* 8  buttons, inputs, toasts, menu rows */
  --radius-lg: var(--radius);               /* 12 panels, cards, popovers */
  --radius-xl: calc(var(--radius) + 4px);   /* 16 modals, sheets */
  --radius-full: 9999px;                    /* pills, badges, dots */

  /* ---- controls + icons ----------------------------------------------- */
  --control-height-sm: 30px;
  --control-height: 38px;                /* buttons AND inputs share it */
  --control-height-lg: 46px;
  --touch-target: 44px;                  /* minimum on pointer: coarse */
  --opacity-disabled: .42;               /* every disabled control, menu rows included */
  --icon-sm: 16px;                       /* inline + in buttons */
  --icon-md: 18px;                       /* nav */
  --icon-lg: 22px;                       /* brand mark, spinners */

  /* ---- elevation ------------------------------------------------------ */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .28), 0 1px 1px rgba(0, 0, 0, .18);  /* cards */
  --shadow-md: 0 6px 16px rgba(0, 0, 0, .34), 0 2px 4px rgba(0, 0, 0, .2);   /* popovers, toasts */
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, .55);                               /* modals, drawer */
  --shadow-primary: 0 1px 2px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .22);
  --glow-success: 0 0 8px rgba(63, 185, 80, .65);       /* live dots */
  --glow-destructive: 0 0 8px rgba(248, 81, 73, .65);   /* recording / failure dots */

  /* ---- motion --------------------------------------------------------- */
  --duration-press: 50ms;                /* :active nudge */
  --duration-fast: 120ms;                /* hover: color, background, border */
  --duration-base: 150ms;                /* transforms, focus, small reveals */
  --duration-slow: 240ms;                /* views, drawer, modal, toast in/out */
  --duration-slower: 400ms;              /* progress fills */
  --ease-standard: ease;                 /* hover/state changes */
  --ease-out: cubic-bezier(.2, .7, .2, 1);  /* the house "settle": entrances, drawer */
  --ease-in-out: ease-in-out;            /* breathing pulses */
  --ease-linear: linear;                 /* spinners, shimmer */

  /* ---- stacking: global ladder (desk-canvas keeps its own local 1-7) -- */
  --z-raised: 1;
  --z-dropdown: 30;
  --z-scrim: 35;
  --z-sidebar: 40;
  --z-overlay: 60;                       /* full-viewport viewers */
  --z-popover: 70;                       /* menus/sheets above overlays */
  --z-toast: 200;
  --z-skip-link: 300;
  --z-fullscreen: 400;                   /* pseudo-fullscreen stage */

  /* ---- layout --------------------------------------------------------- */
  --content-max: 1760px;
  /* Breakpoints: custom properties cannot be used inside @media, so CSS
     repeats these literals in @media preludes (lint-exempt) and JS reads
     them via getComputedStyle for matchMedia. */
  --breakpoint-sm: 480px;                /* <= small phone tweaks */
  --breakpoint-md: 768px;                /* <= phone: off-canvas drawer + topbar */
  --breakpoint-lg: 1024px;               /* 769-1024 tablet: icon rail */
  --breakpoint-xl: 1360px;               /* >= wide grids */
}

/* ==========================================================================
   LEGACY BRIDGE — old style.css names -> v1 tokens.
   Inert while style.css still declares its own :root block (that block is
   later in the cascade and wins). Becomes live when the block is deleted,
   so un-migrated rules keep rendering. Delete this block when
   `grep -E 'var\(--(bg|panel|text|ok|warn|err|fs|r|sp|shadow)-?' website/`
   finds nothing. Deliberately NOT bridged (must be renamed first, see the
   LOAD ORDER note): --accent, --accent-*, --muted.
   ========================================================================== */
:root {
  --bg: var(--background);
  --canvas: var(--background);
  --bg-side: var(--sidebar);
  --rail: var(--sidebar);
  --bg-elev: var(--popover);
  --panel: var(--card);
  --panel-hover: var(--secondary);
  --on-accent: var(--primary-foreground);
  --text: var(--foreground);
  --text-dim: var(--dim-foreground);
  --faint: var(--faint-foreground);
  --ok: var(--success);
  --ok-soft: var(--success-soft);
  --warn: var(--warning);
  --warn-soft: var(--warning-soft);
  --err: var(--destructive);
  --err-soft: var(--destructive-soft);
  --font-ui: var(--font-sans);
  --fs-display: var(--text-3xl);
  --fs-h2: var(--text-xl);
  --fs-h3: var(--text-md);
  --fs-body: var(--text-base);           /* 14.5px -> 14px: intended snap (STYLE.md §3) */
  --fs-small: var(--text-sm);
  --fs-micro: var(--text-2xs);           /* 11.5px -> 11px: intended snap (STYLE.md §3) */
  --r-sm: var(--radius-sm);
  --r-md: var(--radius-md);
  --r-lg: var(--radius-lg);
  --r-xl: var(--radius-xl);
  --sp-1: var(--space-1);                /* index names != Tailwind numbers: */
  --sp-2: var(--space-2);
  --sp-3: var(--space-3);
  --sp-4: var(--space-4);
  --sp-5: var(--space-6);                /*   sp-5 = 24px = space-6 (!) */
  --sp-6: var(--space-8);                /*   sp-6 = 32px = space-8 (!) */
  --sp-7: var(--space-10);               /*   sp-7 = 40px = space-10 (!) */
  --sp-8: var(--space-12);               /*   sp-8 = 48px = space-12 (!) */
  --shadow-1: var(--shadow-sm);
  --shadow-2: var(--shadow-md);
  --shadow-3: var(--shadow-lg);
  --sidebar-w: var(--sidebar-width);
  --rail-w: var(--sidebar-width-icon);
  --mono: var(--font-mono);              /* app-machines.js:1741,1978 reference this
                                            undefined name today (bug) */
}