/*
 * K.E.R. design tokens — the one place a colour, a size or a timing is chosen.
 *
 * Both surfaces link this file, so "same tokens" is not a promise in a
 * document — it is one file with two consumers. A component that hardcodes
 * #123456 instead of reaching for a token here is the bug this file exists to
 * make visible.
 *
 * Direction: minimal, compact, premium, dark, calm, fast, functional, human.
 * Graphite/obsidian ground, hairline borders, one lime accent that means
 * "active / selected / connected / success / primary action / K.E.R. is here"
 * and therefore must NOT be used for decoration. No glows, no gradients, no
 * glass, no RGB, no sci-fi.
 *
 * On the two files. This one declares values and adds the scales the shell
 * needs and did not have (spacing, elevation, z-index, layout). `theme.css` is
 * loaded after it and still re-declares the shared names at identical values,
 * so linking this file cannot change a single pixel — verified by
 * qa_geometry_fingerprint.py, which compares every element's box before and
 * after. Those duplicates are deleted in a later pass, one surface at a time,
 * with the same measurement.
 */

:root {
  /* -- ground -------------------------------------------------------------
   * Three steps, barely apart. In a dark UI the difference between "surface"
   * and "background" is a suggestion, not a stripe — anything more reads as
   * the card-inside-card-inside-card the brief forbids. */
  --bg: #080B0A;
  --bg-1: #0A0F0D;
  --bg-2: #0D1412;
  --rail: #090D0C;
  --panel: #0E1412;              /* the colour 0.62 alpha used to composite to */
  --panel-solid: #111917;
  --raised: #16201D;             /* hover / pressed ground */
  --overlay: rgba(3, 6, 4, 0.72); /* modal/drawer backdrop */

  /* -- borders ------------------------------------------------------------
   * Hairlines. If a border is the first thing you notice, it is too strong. */
  --line: rgba(226, 236, 230, 0.10);
  --line-soft: rgba(233, 240, 236, 0.07);
  --line-strong: rgba(233, 240, 236, 0.14);

  /* -- text --------------------------------------------------------------- */
  --ink: #EAF2EC;                /* almost white, a touch of green-grey */
  --muted: #8FA098;              /* secondary */
  --dim: #7C8C84;                /* tertiary, metadata, captions */
  --faint: #4A574F;              /* disabled, placeholders */

  /* -- accent -------------------------------------------------------------
   * One green family for active/selected/connected/success/primary/presence.
   * `-wash` is the tinted ground for a selected row; never a full fill. */
  --accent: #7CE84A;
  --accent-hover: #8FF25E;
  --accent-dim: #5FB833;
  --accent-ink: #08150A;         /* text on lime — always dark */
  --accent-wash: rgba(124, 232, 74, 0.10);

  /* -- status -------------------------------------------------------------
   * Distinct from the accent on purpose: a warning is not an action. */
  --ok: #3FD9B0;
  --warn: #E8B84A;
  --crit: #F2555A;
  --crit-ink: #FFF4F3;
  --info: #6EC1E4;

  /* -- type ---------------------------------------------------------------
   * Six sizes, and every piece of text in the shell is one of them. Measured,
   * not asserted: qa_redesign_shot.py counts the sizes actually rendered. */
  --sans: "Inter", "SF Pro Display", system-ui, -apple-system, "Segoe UI",
          Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", Menlo,
          monospace;

  --fs-hero: 28px;               /* the welcome mark, once per session */
  --fs-title: 20px;              /* page title */
  --fs-section: 15px;            /* section heading */
  --fs-body: 14px;               /* body */
  --fs-small: 12.5px;            /* dense rows, telemetry */
  --fs-micro: 11px;              /* captions, ids, badges */

  /* -- metric -------------------------------------------------------------
   * Four corner steps and a pill, and every rounded corner is one of them. */
  --r-xs: 6px;                   /* chips, inline code, small marks */
  --r-control: 9px;              /* buttons, inputs, selectable rows */
  --r-card: 14px;                /* cards, panels */
  --r-xl: 20px;                  /* the one large tile */
  --r-pill: 999px;

  /* -- spacing ------------------------------------------------------------
   * 4 8 12 16 24 32. Anything between these is a decision nobody made. The
   * shell's own rhythm is --pad / --gap; these are for new work. */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --pad: 16px;
  --gap: 16px;

  /* -- layout -------------------------------------------------------------
   * The rail has three regimes and the shell reads these to pick one:
   * LARGE keeps its labels, MEDIUM is icons only, SMALL leaves the layout and
   * returns as a drawer. Measured by qa_rail_modes.py at seven widths. */
  --rail-w: 236px;               /* LARGE  labels     220–240 */
  --rail-w-md: 68px;             /* MEDIUM icons only  64–76 */
  --aside-w: 344px;
  --header-h: 52px;
  --content-max: 1180px;         /* beyond this a row is unreadable anyway */
  --tap-min: 28px;               /* smallest hit target we ship */

  /* -- elevation ----------------------------------------------------------
   * Dark UIs get depth from borders, not from glow. Shadows exist only for
   * things that genuinely float: dropdown, drawer, modal, palette. */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-3: 0 16px 48px rgba(0, 0, 0, 0.55);

  /* -- motion -------------------------------------------------------------
   * Fast and purposeful. Anything slower than 240ms reads as lag rather than
   * polish on an interface people use all day. */
  --t-fast: 120ms;               /* hover, colour     100–140 */
  --t-base: 180ms;               /* page transition   150–200 */
  --t-slow: 240ms;               /* drawer            200–260 */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* -- z-index ------------------------------------------------------------
   * Named, so two screens cannot invent 9999 and 10000 independently. */
  --z-base: 0;
  --z-sticky: 10;
  --z-dropdown: 100;
  --z-drawer: 200;
  --z-modal: 300;
  --z-palette: 400;
  --z-toast: 500;
}

/* ---------------------------------------------------------------------------
 * Base layer
 *
 * Deliberately small, and deliberately inert: every rule here either matches
 * what theme.css already does or introduces nothing the shell renders today.
 * A reset that quietly moves the interface is not a reset, it is a redesign
 * nobody approved — the ones that would have (zeroing heading margins,
 * forcing `display: block` on inline icons, colouring every `a`) are left to
 * the screen-by-screen pass, where each screen can be measured.
 * ------------------------------------------------------------------------- */

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

html, body { height: 100%; margin: 0; }

/* Controls do not inherit type by default, which is how a "design system"
 * quietly carries the browser's 13.3px button text. */
button, input, select, textarea { font: inherit; color: inherit; }

/* Focus is never removed, only made consistent. theme.css re-states this with
 * the accent colour and wins by load order. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

::selection { background: var(--accent-wash); color: var(--ink); }

/* Scrollbars, so the app does not carry the platform's bright default into a
 * graphite surface. */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: var(--r-pill);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}