/* ============ 0. type ============ */
/* Seven faces, self-hosted, latin + latin-ext, weight axis 400-700.
   Nothing here requests an external server. */

@font-face{font-family:"Figtree";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("fonts/figtree.woff2") format("woff2")}

/* Saira Condensed is Saira with its width axis pinned to 75, not the separate family. */

/* Radius ladder. Plain border-radius, chosen to sit as close to the n=4
   superellipse in nit-core.js as a circular arc can. --r-*-sq is the
   superellipse radius each rung stands in for. */
:root{
  --r-xs:4px;        /* graph bars, stripes, cells, under 12px */
  --r-sm:6px;        /* chips, tags, inputs, icon buttons, up to 32px */
  --r-md:10px;       /* buttons, tiles, cards, 32-64px */
  --r-lg:16px;       /* panels, sheets, dialogs, above 64px */
  --r-pill:999px;
  --r-circle:50%;

  --r-xs-sq:7px;
  --r-sm-sq:11px;
  --r-md-sq:18px;
  --r-lg-sq:29px;
}

/* Where the real curve is available, take it, at the radius it was drawn for.
   Which elements get it, and which circles and pills opt out, is each
   surface's own business — see web/style.css and worker/public/index.html. */
@supports (corner-shape: squircle){
  :root{
    --r-xs:var(--r-xs-sq);
    --r-sm:var(--r-sm-sq);
    --r-md:var(--r-md-sq);
    --r-lg:var(--r-lg-sq);
  }
}

/* Spacing. The 8px grid, one token per rung; the rung is the name.
   4 is the half-step for tight inline pairs. Nothing between, nothing above. */
:root{
  --sp-4:4px;
  --sp-8:8px;
  --sp-16:16px;
  --sp-24:24px;
  --sp-32:32px;
  --sp-48:48px;
  --sp-64:64px;
}

/* Border widths. Not spacing, and not on the grid. --bw-2 is also the focus
   ring offset, which DESIGN.md measures at the same 2px. */
:root{
  --bw-1:1px;   /* separators, card edges, dividers */
  --bw-2:2px;   /* focus ring, thickened selection */
}

/* One curve, two durations. Nit's own timing lives in nit-core.js. */
:root{
  --ease:cubic-bezier(0.2, 0, 0, 1);
  --dur-state:120ms;   /* changing while it stays put */
  --dur-move:240ms;    /* arriving or leaving */
  --dur-data:839ms;    /* tracking incoming data, or catching the eye */
}

/* --font is the active face. --fontSize normalises x-height against Figtree,
   --fontTrack corrects density. Both leave the type scale untouched.
   The blocks also match a nested [data-font], so the picker can set one
   option's name in its own face. */
:root{
  --font:"Figtree",system-ui,sans-serif;
  --fontSize:1;
  --fontTrack:0em;
}
:root[data-font="figtree"],[data-font="figtree"]{
  --font:"Figtree",system-ui,sans-serif;   --fontSize:1;     --fontTrack:0em}
:root[data-font="comfortaa"],[data-font="comfortaa"]{
  --font:"Comfortaa",system-ui,sans-serif; --fontSize:0.914; --fontTrack:-0.005em}
:root[data-font="saira-condensed"],[data-font="saira-condensed"]{
  --font:"Saira Condensed",system-ui,sans-serif; --fontSize:0.980; --fontTrack:0.010em}
:root[data-font="literata"],[data-font="literata"]{
  --font:"Literata",Georgia,serif;         --fontSize:0.986; --fontTrack:0em}
:root[data-font="orbitron"],[data-font="orbitron"]{
  --font:"Orbitron",system-ui,sans-serif;  --fontSize:0.862; --fontTrack:-0.020em}
:root[data-font="exo2"],[data-font="exo2"]{
  --font:"Exo 2",system-ui,sans-serif;     --fontSize:1.027; --fontTrack:-0.008em}
:root[data-font="saira"],[data-font="saira"]{
  --font:"Saira",system-ui,sans-serif;     --fontSize:0.980; --fontTrack:-0.007em}

/* Type scale. One row per role in DESIGN.md: size, weight, line height and
   tracking. Sizes are the uncorrected value — a component multiplies by
   --fontSize and adds --fontTrack, so the correction resolves on the element
   and a nested [data-font] still works. */
:root{
  --t-wordmark-size:clamp(40px, 13.4vw, 150px);
  --t-wordmark-weight:700; --t-wordmark-line:.88; --t-wordmark-track:-.03em;

  --t-display-size:48px;
  --t-display-weight:500; --t-display-line:1;    --t-display-track:-.02em;

  --t-metric-lg-size:30px;
  --t-metric-lg-weight:500; --t-metric-lg-line:1;  --t-metric-lg-track:-.01em;

  --t-verdict-size:24px;
  --t-verdict-weight:600; --t-verdict-line:1.25; --t-verdict-track:0em;

  --t-heading-size:18px;
  --t-heading-weight:700; --t-heading-line:1.3;  --t-heading-track:0em;

  --t-subheading-size:16px;
  --t-subheading-weight:600; --t-subheading-line:1.4; --t-subheading-track:0em;

  --t-body-size:15px;
  --t-body-weight:400; --t-body-line:1.55; --t-body-track:0em;

  --t-button-size:15px;
  --t-button-weight:600; --t-button-line:1; --t-button-track:0em;

  --t-body-sm-size:13px;
  --t-body-sm-weight:400; --t-body-sm-line:1.5; --t-body-sm-track:0em;

  --t-metric-size:13px;
  --t-metric-weight:400; --t-metric-line:1.4; --t-metric-track:0em;

  --t-label-size:11px;
  --t-label-weight:500; --t-label-line:1.2; --t-label-track:.09em;

  --t-label-micro-size:10px;
  --t-label-micro-weight:600; --t-label-micro-line:1.2; --t-label-micro-track:.16em;
}

/* Colour tokens, two layers.
   1. System: Radix Slate/Jade/Amber/Red, by scale and step.
   2. Product: every token name already used in app.js, style.css and
      worker/public/index.html, resolved to a system step.
   Not imported anywhere yet. No shadow tokens live here. */

/* ============ 1. colour system ============ */

/* dark */
:root,[data-theme="dark"]{
  --slate-1:#111113;  --slate-2:#18191b;  --slate-3:#212225;
  --slate-4:#272a2d;  --slate-5:#2e3135;  --slate-6:#363a3f;
  --slate-7:#43484e;  --slate-8:#5a6169;  --slate-9:#696e77;
  --slate-10:#777b84; --slate-11:#b0b4ba; --slate-12:#edeef0;

  --jade-1:#0d1512;  --jade-2:#121c18;  --jade-3:#0f2e22;
  --jade-6:#1b5745;  --jade-9:#29a383;  --jade-11:#1fd8a4;
  --jade-12:#adf0d4;

  --amber-1:#16120c;  --amber-2:#1d180f;  --amber-3:#302008;
  --amber-6:#5c3d05;  --amber-9:#ffc53d;  --amber-11:#ffca16;
  --amber-12:#ffe7b3;

  --red-1:#191111;  --red-2:#201314;  --red-3:#3b1219;
  --red-6:#72232d;  --red-9:#e5484d;  --red-11:#ff9592;
  --red-12:#ffd1d9;
}

/* light */
:root[data-theme="light"],[data-theme="light"]{
  --slate-1:#fcfcfd;  --slate-2:#f9f9fb;  --slate-3:#f0f0f3;
  --slate-4:#e8e8ec;  --slate-5:#e0e1e6;  --slate-6:#d9d9e0;
  --slate-7:#cdced6;  --slate-8:#b9bbc6;  --slate-9:#8b8d98;
  --slate-10:#80838d; --slate-11:#60646c; --slate-12:#1c2024;

  --jade-1:#fbfefd;  --jade-2:#f4fbf7;  --jade-3:#e6f7ed;
  --jade-6:#acdec8;  --jade-9:#29a383;  --jade-11:#208368;
  --jade-12:#1d3b31;

  --amber-1:#fefdfb;  --amber-2:#fefbe9;  --amber-3:#fff7c2;
  --amber-6:#f3d673;  --amber-9:#ffc53d;  --amber-11:#ab6400;
  --amber-12:#4f3422;

  --red-1:#fffcfc;  --red-2:#fff7f7;  --red-3:#feebec;
  --red-6:#fdbdbe;  --red-9:#e5484d;  --red-11:#ce2c31;
  --red-12:#641723;
}

/* ============ 2. product ============ */

/* Step jobs are identical in both themes; only the scale values flip. */
:root,[data-theme]{
  /* surfaces, low to high */
  --bg:var(--slate-1);
  --rail:var(--slate-2);
  --panel:var(--slate-3);
  --elev:var(--slate-4);
  --ctl:var(--slate-5);

  /* hairlines */
  --line:var(--slate-6);
  --line2:var(--slate-7);

  /* text: only 11 and 12 are text steps */
  --txt:var(--slate-12);
  --mute:var(--slate-11);
  --dim:var(--slate-11);
  --fg:var(--slate-12);
  --fg-dim:var(--slate-11);
  --fg-faint:var(--slate-11);

  /* knocked out of a --mute chip; Slate 11 is not an inverted surface */
  --muteInk:var(--slate-1);

  /* status ramp, three tiers: 9 fills, 11 reads as text */
  --fast:var(--jade-9);    --fastInk:var(--jade-11);
  --slow:var(--amber-9);   --slowInk:var(--amber-11);
  --bad:var(--red-9);      --badInk:var(--red-11);
  --ok:var(--jade-11);
  --warn:var(--amber-11);
  --green:var(--jade-9);

  /* former middle tier folds into warn; there is no fourth tier */
  --mid:var(--amber-9);    --midInk:var(--amber-11);
  --info:var(--mid);       --infoInk:var(--midInk);

  /* hot is the bad tier, not a tier of its own */
  --hot:var(--red-9);      --hotInk:var(--red-11);

  /* primary action; jade is barred from buttons and brand chrome */
  --btnFill:var(--slate-12);

  /* a Slate 12 fill is the opposite theme locally, so its text is that
     theme's steps 12 and 11 */
  --invTxt:#1c2024;    /* light Slate 12 */
  --invMute:#60646c;   /* light Slate 11 */

  --btnTxt:var(--invTxt);
  --new:var(--slate-12);
  --blue:var(--slate-12);

  /* logo has its own token so it never resolves to a status colour */
  --logoInk:var(--slate-12);

  /* scrim */
  --ovBg:color-mix(in srgb,var(--slate-1) 68%,transparent);

  /* robot: a dark object in both themes */
  --robot:var(--slate-1);
  --robotEdge:color-mix(in srgb,var(--slate-12) 9%,transparent);
  --robotEye:var(--slate-12);
  --eye:var(--slate-12);
  --robotGlowIn:205,236,255;
  --robotGlowOut:150,210,255;
  --robotGlow:1;
}

/* light keeps the same step jobs; only the scrim and the robot invert */
:root[data-theme="light"],[data-theme="light"]{
  --logoInk:var(--slate-12);

  --invTxt:#edeef0;    /* dark Slate 12 */
  --invMute:#b0b4ba;   /* dark Slate 11 */

  --ovBg:color-mix(in srgb,var(--slate-12) 45%,transparent);

  --robot:var(--slate-12);
  --robotEdge:color-mix(in srgb,var(--slate-1) 14%,transparent);
  --robotEye:var(--slate-1);
  --eye:var(--slate-1);
  --robotGlow:0.6;
}

/* ============ selection ============ */

::selection{ background:var(--ctl); color:var(--txt) }

/* ============ nit ============ */
/* The interface has no shadows. This one is Nit's: robot.js reads it through
   rTheme() and paints it on his canvas, so he sits on a surface. */

:root,[data-theme="dark"]{
  --shadow:rgba(0,0,0,.9);
}

:root[data-theme="light"],[data-theme="light"]{
  --shadow:rgba(20,35,60,.26);
}