/* ════════════════════════════════════════════════════════════════════════
   THE SKIN — chrome-web/skins/default.css

   The chrome's ONE swappable presentation layer. Every panel's structure CSS
   (panel-sdk/panels/<id>/style.web.css) and every shared base class
   (.panel-*, .accent/.accent-*) reference ONLY var(--token) names declared
   here. Swapping the look = repointing the single

       <link id="cog-skin" rel="stylesheet" href="skins/default.css">

   in index.html (or shipping a second skin under html[data-skin="<name>"]).
   Because CSS custom properties resolve at USE-TIME, changing a token VALUE
   here reskins every panel live with ZERO per-panel edits.

   This is the ONLY file in the served tree allowed to hold literal colors /
   fonts / radii / shadows — they are the palette the rest of the chrome
   composes. The structure-layer lint (panel-sdk/lint-panel-style.py) bans
   those literals from panel CSS and verifies every var(--x) a panel uses is
   declared HERE.

   Cross-chrome twin: chrome-ios/Theme.swift FleetStyle assigns the SAME token
   NAMES to iOS values. The token-name set is the cross-chrome contract; sdk.ts
   maps the shared ACCENT_* vocabulary to both.
   TODO(cross-chrome single-source): compile one skin source → both this CSS
   and Theme.swift so a reskin is a single cross-chrome edit (open question Q5).
   ════════════════════════════════════════════════════════════════════════ */
:root {
    /* ── SURFACE RAMP ── */
    --bg: oklch(0.16 0.008 250);
    --bge: oklch(0.19 0.008 250);
    --bge2: oklch(0.22 0.008 250);
    --bgi: oklch(0.13 0.008 250);

    /* ── LINES ── */
    --ln: oklch(0.27 0.008 250);
    --lns: oklch(0.24 0.008 250/0.6);

    /* ── TEXT RAMP ── */
    --tx: oklch(0.96 0.004 250);
    --txm: oklch(0.72 0.008 250);
    --txd: oklch(0.52 0.008 250);

    /* ── ACCENT AXES — each axis: base · dim · on-accent fg · hover · border ──
       on-accent fg fixes THE canonical reskin bug: panels used to bake
       `color:#000` on a var(--ac) button, which goes invisible on any
       dark-accent skin. --ac-on is the skin's on-accent foreground. */
    /* ok / green */
    --ac: oklch(0.82 0.17 142);
    --acd: oklch(0.82 0.17 142/0.14);
    --ac-on: oklch(0.16 0.008 250);
    --ac-hover: oklch(0.86 0.17 142);
    --ac-border: oklch(0.82 0.17 142/0.3);
    /* info / blue */
    --hu: oklch(0.78 0.12 248);
    --hud: oklch(0.78 0.12 248/0.14);
    --hu-on: oklch(0.16 0.008 250);
    --hu-hover: oklch(0.82 0.12 248);
    --hu-border: oklch(0.78 0.12 248/0.3);
    /* warn / amber */
    --wn: oklch(0.82 0.15 70);
    --wnd: oklch(0.82 0.15 70/0.14);
    --wn-on: oklch(0.16 0.008 250);
    --wn-hover: oklch(0.86 0.15 70);
    --wn-border: oklch(0.82 0.15 70/0.3);
    /* danger / red */
    --dn: oklch(0.70 0.18 25);
    --dnd: oklch(0.70 0.18 25/0.14);
    --dn-on: oklch(0.96 0.004 250);
    --dn-hover: oklch(0.74 0.18 25);
    --dn-border: oklch(0.70 0.18 25/0.3);

    /* ── PRIORITY → ACCENT MAPPING (skin-controlled) ──
       Brian's FULLY-SKINNABLE decision: which accent each priority tier gets
       is the SKIN's call, not baked into structure. Panels reference
       var(--prio-N); a skin can remap a tier to any axis. */
    --prio-1: var(--dn);
    --prio-2: var(--wn);
    --prio-3: var(--ac);

    /* ── FONTS ── */
    --sans: 'Inter', system-ui, sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, monospace;

    /* ── TYPE SCALE (faithful to the chrome's existing steps) ── */
    --fs-1: 9px;
    --fs-2: 9.5px;
    --fs-3: 10px;
    --fs-4: 10.5px;
    --fs-5: 11px;
    --fs-6: 11.5px;
    --fs-7: 12px;
    --fs-8: 13px;
    --fs-9: 14px;
    --fs-10: 18px;

    /* ── LINE HEIGHT ── */
    --lh-tight: 1.2;
    --lh-normal: 1.4;

    /* ── FONT WEIGHT ── */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* ── RADII ── */
    --r-xs: 4px;
    --r-sm: 5px;
    --r-md: 8px;
    --r-lg: 10px;
    --r-xl: 12px;
    --r-pill: 999px;

    /* ── SPACING (enables density skinning) ── */
    --sp-1: 2px;
    --sp-2: 4px;
    --sp-3: 6px;
    --sp-4: 8px;
    --sp-5: 10px;
    --sp-6: 12px;
    --sp-7: 14px;
    --sp-8: 16px;
    --sp-9: 24px;
    --sp-10: 32px;

    /* ── BORDER GEOMETRY (skin-controlled) ──
       Brian's decision: border weight + style are tokens, not literals baked
       into structure. A skin can change border thickness/style chrome-wide. */
    --border-width: 1px;
    --border-width-accent: 3px;
    --border-style: solid;

    /* ── ELEVATION ── */
    --sh-1: 0 1px 2px oklch(0 0 0 / 0.2);
    --sh-2: 0 4px 12px oklch(0 0 0 / 0.3);
}