/* Responsibility: Define the tokens every other stylesheet reads - palette, type, spacing and radii. */
/* Boundaries: values only; it styles no component, and the legacy names alias onto these same roles. */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* /
   The product wears the finish hexera.ai actually ships (styles.css + orange-theme.css):
   flight-test mono. Near-neutral blacks, near-white ink, ONE hot accent - international
   orange - for the primary action, the running state and the selection, and deep steel
   blue for technical linework: wireframes, edges, secondary structure. Role-named, so a
   hue can change without every rule downstream becoming a lie.

   The LEGACY names (--ink, --card, --line ...) that the rest of this stylesheet
   tree already speaks are aliased at the bottom onto the new roles. That is
   deliberate: the product structure is unchanged, so every existing rule keeps
   working and only the values move.
/ */
:root{
  --sans:"Geist","Geist Fallback",system-ui,-apple-system,"Segoe UI","Helvetica Neue",
         Arial,sans-serif;
  --mono:"Geist Mono","Geist Mono Fallback",ui-monospace,SFMono-Regular,Menlo,Consolas,
         'Liberation Mono',monospace;
  --display:"Saira Semi Condensed","Helvetica Neue",Arial,sans-serif;

  /* surfaces - the site's own near-neutral black (orange-theme.css --bg), then an elevation
     ladder each step lighter. The console had drifted to #0a0a09/#0f0f0e, half a shade cooler
     and darker than the page a user arrives from; re-anchoring is what makes the two read as
     one product rather than two dark apps. */
  --canvas:#0d0d0c;
  --background:#131312;
  --surface-1:#161615;
  --surface-2:#1c1c1a;
  --surface-raised:#232321;
  --viewer-frame:#131312;
  --viewer-canvas:#0d0d0c;
  --border:rgba(238,235,225,.10);
  --border-strong:rgba(238,235,225,.22);

  /* text - the site's ink, every value AA on the surfaces above */
  --text:#ede9e0;
  --text-muted:#b9b6ae;
  --text-faint:#8a8884;
  --text-bright:#f4f1ea;

  /* accent - international orange, the site's one hot colour: primary action, focus,
     the running state, and the selection */
  --accent:#ff4f00;
  --accent-hover:#ff7033;
  --accent-soft:rgba(255,79,0,.14);
  --accent-line:rgba(255,79,0,.5);
  --accent-ink:#1a0a02;          /* the ONLY safe text colour on --accent */

  /* the selection reads through the same accent (kept as a role so it can diverge) */
  --gold:#ff4f00;
  --gold-soft:rgba(255,79,0,.14);
  --gold-line:rgba(255,79,0,.5);
  --gold-ink:#1a0a02;

  /* steel - the site's wireframe blue: technical linework and secondary structure */
  --steel:#6d8baf;
  --steel-bright:#9db6d4;
  --steel-muted:#57708f;         /* decoration only, never text */
  --steel-soft:rgba(109,139,175,.14);

  /* status - meaning carried by a word AND a mark, never colour alone */
  --ok:#61d49a;      --ok-soft:rgba(97,212,154,.11);
  --warn:#f1bd63;    --warn-soft:rgba(241,189,99,.12);
  --danger:#ff6b5e;  --danger-soft:rgba(216,58,48,.14);

  --mesh-canvas:#0a0a09;
  --mesh-selection:#ff4f00;

  --focus:var(--accent);
  --radius:4px;          /* the site's own button/input radius */
  --radius-tight:2px;    /* hairline chrome: chips, dots, rules */
  --shadow-1:0 1px 2px rgba(0,0,0,.6);
  --shadow-2:0 18px 48px -24px rgba(0,0,0,.8);
}

html,body{height:100%;font-family:var(--sans);font-size:14px;line-height:1.65;
  color:var(--text);background:var(--canvas);
  -webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased}
#app{display:flex;flex-direction:column;height:100vh}

.num{font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1}

:where(a,button,input,textarea,select,[tabindex]):focus-visible{
  outline:2px solid var(--focus);outline-offset:2px;border-radius:2px}
::selection{background:var(--accent);color:#fff}

*{scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:6px;
  border:2px solid var(--canvas)}
::-webkit-scrollbar-thumb:hover{background:rgba(238,235,225,.34)}