/* =============================================================================
   tokens.css — Construction Takeoff Trust Engine
   "Precision drafting instrument" design tokens (LOCKED — do not fork per screen)

   Direction: dark blueprint / engineering-table tool for professional estimators.
   Data-dense, exact, instrument-like. NOT a generic SaaS dashboard.

   Every screen-builder MUST import this file FIRST, then app.css.
   Hard rule: never hard-code a colour, font, radius or shadow that exists here.
   ============================================================================= */

/* ---- Fonts (LOCKED set — never Inter/Roboto/Arial/system/Space Grotesk) ---- */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Hanken+Grotesk:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root {
  /* =========================================================================
     1. COLOR SYSTEM
     ========================================================================= */

  /* --- Ink / graphite background ramp (#0d1117 family, darkest → lightest) --- */
  --ink-900: #07090d;   /* deepest void — page behind everything */
  --ink-850: #0a0d12;   /* app background */
  --ink-800: #0d1117;   /* primary panel base (the locked family anchor) */
  --ink-750: #11161f;   /* raised panel / card */
  --ink-700: #161c26;   /* elevated surface / table header */
  --ink-650: #1b222e;   /* hover surface */
  --ink-600: #222b39;   /* active / selected surface */
  --ink-550: #2b3645;   /* subtle divider fill */

  /* --- Hairline borders (1px discipline) --- */
  --line-faint: rgba(143, 166, 196, 0.10); /* barely-there grid / inner rule */
  --line-soft:  rgba(143, 166, 196, 0.16); /* default panel hairline */
  --line:       rgba(143, 166, 196, 0.24); /* standard border */
  --line-strong:rgba(143, 166, 196, 0.38); /* emphasized edge */

  /* --- Paper text ramp (paper-white primary; never pure #fff) --- */
  --paper:      #eef2f7;  /* primary text — paper-white */
  --paper-dim:  #c2ccd9;  /* secondary text */
  --paper-mute: #8a97a8;  /* tertiary / captions / column labels */
  --paper-faint:#5d6878;  /* disabled / ghost / placeholder */

  /* --- Drafting cyan: THE single structural accent --- */
  --cyan:        #3fb6d3;  /* structure lines / links / focus ring / active nav */
  --cyan-bright: #5fd0ec;  /* hover / emphasis */
  --cyan-dim:    #2c8197;  /* pressed / muted accent */
  --cyan-ghost:  rgba(63, 182, 211, 0.14); /* accent wash / selected row tint */
  --cyan-line:   rgba(63, 182, 211, 0.30); /* accent hairline */

  /* --- Blueprint grid texture (faint cyan grid lines, low opacity) --- */
  --grid-line:   rgba(63, 182, 211, 0.10);  /* fine grid */
  --grid-line-2: rgba(63, 182, 211, 0.17);  /* major grid (every 5th) */
  --grid-minor:  20px;  /* fine cell */
  --grid-major:  100px; /* major cell */

  /* =========================================================================
     2. TRUST BANDS — colorblind-safe (color is NEVER the only channel;
        always paired with shape + text label in app.css)
        GREEN Trusted · AMBER Verify · RED Must-review · GREY Unverifiable
        GREY (could-not-check) MUST look clearly different from RED (checked-wrong).
        Band cut-points/thresholds are config-driven (U13) — these are visual tokens only.
     ========================================================================= */

  /* GREEN — Trusted (●▲) */
  --band-green:      #46c08a;
  --band-green-soft: rgba(70, 192, 138, 0.16);
  --band-green-line: rgba(70, 192, 138, 0.45);
  --band-green-ink:  #0a1813;

  /* AMBER — Verify (◆◐) */
  --band-amber:      #e0a73a;
  --band-amber-soft: rgba(224, 167, 58, 0.16);
  --band-amber-line: rgba(224, 167, 58, 0.45);
  --band-amber-ink:  #1a1305;

  /* RED — Must-review (■✕) — saturated, alarming, filled */
  --band-red:        #e5524d;
  --band-red-soft:   rgba(229, 82, 77, 0.18);
  --band-red-line:   rgba(229, 82, 77, 0.50);
  --band-red-ink:    #1d0807;

  /* GREY — Unverifiable (◌?) — DESATURATED + cool + hollow; must read
     as "could not check", never as "checked and wrong". Deliberately
     flat/neutral so it never competes with red. */
  --band-grey:       #74808f;
  --band-grey-soft:  rgba(116, 128, 143, 0.14);
  --band-grey-line:  rgba(116, 128, 143, 0.40);
  --band-grey-ink:   #0d0f12;

  /* =========================================================================
     3. DUAL-OVERLAY STROKES (raw vs derived) — distinguishable by
        stroke/fill/hatch, not color alone (G.4). Color tokens here; the
        stroke/fill/hatch geometry lives in app.css.
        RAW   = solid, NO fill, square vertex handles
        DERIVED = dashed, diagonal-hatch fill, round vertex handles
     ========================================================================= */
  --raw-stroke:      #cdd6e2;  /* Kamai RAW — neutral paper-ish, solid */
  --raw-vertex:      #eef2f7;
  --derived-stroke:  var(--cyan);     /* Our DERIVED — drafting cyan, dashed */
  --derived-fill:    rgba(63, 182, 211, 0.10);
  --derived-hatch:   rgba(63, 182, 211, 0.30);
  --derived-vertex:  var(--cyan-bright);

  /* Co-registration warning (geo-alignment degraded halo) */
  --warn-halo:       rgba(224, 167, 58, 0.55);

  /* =========================================================================
     4. WORKFLOWS STATUS VOCAB (Run View — maps 1:1 to backend U8)
        queued · running · paused · waiting · errored · complete · terminated
        Status colours reuse band/accent ramp; semantics differ from trust.
     ========================================================================= */
  --st-queued:    var(--paper-mute);
  --st-running:   var(--cyan);
  --st-paused:    var(--band-amber);
  --st-waiting:   #b07fd6;            /* waiting-on-HITL: distinct from amber paused */
  --st-errored:   var(--band-red);
  --st-complete:  var(--band-green);
  --st-terminated:#5d6878;

  /* Layer-legend chip accents (Drawing · Kamai-RAW · Derived · Final) */
  --layer-drawing: #8a97a8;  /* L1 original PDF — neutral */
  --layer-raw:     #cdd6e2;  /* L2 Kamai RAW immutable — paper-ish */
  --layer-derived: var(--cyan);          /* L3 our derived proposal */
  --layer-final:   var(--band-green);    /* L4 user-accepted final */

  /* =========================================================================
     5. TYPE SCALE & FAMILIES
        display+labels = Bricolage Grotesque · body = Hanken Grotesk
        numerals/ids/coords/mono = IBM Plex Mono
     ========================================================================= */
  --font-display: 'Bricolage Grotesque', 'Hanken Grotesk', sans-serif;
  --font-body:    'Hanken Grotesk', 'Bricolage Grotesque', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'Cascadia Mono', monospace;

  /* Compact, instrument-grade scale (tight, data-dense) */
  --fs-micro: 10px;   /* table sub-labels, badge text, hashes */
  --fs-xs:    11px;   /* column headers, captions, chips */
  --fs-sm:    12px;   /* dense table body, secondary */
  --fs-base:  13px;   /* default body */
  --fs-md:    14px;   /* emphasized body / panel labels */
  --fs-lg:    16px;   /* sub-headings */
  --fs-xl:    20px;   /* section / screen heading */
  --fs-2xl:   26px;   /* page title */
  --fs-3xl:   34px;   /* launcher hero numeral */

  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-base:  1.45;

  --ls-label: 0.06em;   /* uppercase labels / column heads */
  --ls-wide:  0.14em;   /* eyebrow / kicker tracking */
  --ls-tight: -0.01em;  /* display headings */

  --fw-reg:   400;
  --fw-med:   500;
  --fw-semi:  600;
  --fw-bold:  700;
  --fw-black: 800;

  /* =========================================================================
     6. SPACING SCALE (4px base — tight for density)
     ========================================================================= */
  --sp-0:  0;
  --sp-1:  2px;
  --sp-2:  4px;
  --sp-3:  6px;
  --sp-4:  8px;
  --sp-5:  12px;
  --sp-6:  16px;
  --sp-7:  20px;
  --sp-8:  24px;
  --sp-9:  32px;
  --sp-10: 40px;
  --sp-11: 56px;
  --sp-12: 72px;

  /* Row / control heights (dense but legible — G.5) */
  --row-h:       30px;   /* dense data-table row */
  --row-h-loose: 36px;   /* comfortable row */
  --ctrl-h:      30px;   /* inputs / buttons */
  --ctrl-h-sm:   24px;   /* compact chips/buttons */
  --topbar-h:    48px;
  --nav-w:       212px;
  --nav-w-collapsed: 56px;

  /* =========================================================================
     7. RADIUS — small, technical (instrument, not rounded SaaS)
     ========================================================================= */
  --r-0:  0;
  --r-1:  2px;
  --r-2:  3px;
  --r-3:  4px;
  --r-4:  6px;
  --r-pill: 999px;

  /* =========================================================================
     8. SHADOW / ELEVATION / GRAIN
        Restrained — depth comes from hairlines + value steps, not soft blur.
     ========================================================================= */
  --sh-1: 0 1px 0 rgba(0,0,0,0.4);
  --sh-2: 0 2px 8px rgba(0,0,0,0.45);
  --sh-3: 0 8px 28px rgba(0,0,0,0.55);
  --sh-drawer: -12px 0 40px rgba(0,0,0,0.5);
  --sh-inset: inset 0 1px 0 rgba(255,255,255,0.03);
  --focus-ring: 0 0 0 2px var(--ink-800), 0 0 0 3px var(--cyan);

  /* Subtle film grain over the blueprint (kept very low — anti-sterile, not noisy) */
  --grain-opacity: 0.025;

  /* =========================================================================
     9. MOTION
     ========================================================================= */
  --ease: cubic-bezier(0.2, 0.0, 0.0, 1);
  --dur-1: 90ms;
  --dur-2: 160ms;
  --dur-3: 260ms;

  /* z-index ladder */
  --z-nav:    40;
  --z-topbar: 50;
  --z-drawer: 80;
  --z-overlay:75;
  --z-tooltip:120;
}

/* =============================================================================
   BASE RESET + GLOBAL CHROME (applies to every screen)
   ============================================================================= */
*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background-color: var(--ink-850);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
}

/* The blueprint hairline grid + grain — applied to the whole viewport so
   every screen sits on the engineering table. Use the .bp-grid utility on any
   panel that needs its own local grid. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
    linear-gradient(var(--grid-line-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line-2) 1px, transparent 1px);
  background-size:
    var(--grid-minor) var(--grid-minor),
    var(--grid-minor) var(--grid-minor),
    var(--grid-major) var(--grid-major),
    var(--grid-major) var(--grid-major);
  background-position: -1px -1px, -1px -1px, -1px -1px, -1px -1px;
}

/* film grain over everything (very low) */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* keep real app content above the grid/grain layers */
body > * { position: relative; z-index: 2; }

/* Blueprint-grid utility — drop on any panel/canvas that needs a local grid */
.bp-grid {
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
    linear-gradient(var(--grid-line-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line-2) 1px, transparent 1px);
  background-size:
    var(--grid-minor) var(--grid-minor),
    var(--grid-minor) var(--grid-minor),
    var(--grid-major) var(--grid-major),
    var(--grid-major) var(--grid-major);
}

/* Selection + focus + scrollbar — instrument styling */
::selection { background: var(--cyan-ghost); color: var(--paper); }

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--r-2);
}

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--ink-850); }
::-webkit-scrollbar-thumb {
  background: var(--ink-600);
  border: 2px solid var(--ink-850);
  border-radius: var(--r-pill);
}
::-webkit-scrollbar-thumb:hover { background: var(--ink-550); }

a { color: var(--cyan); text-decoration: none; }
a:hover { color: var(--cyan-bright); }

/* Mono numeral helper — every quantity/id/coord uses this */
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.num  { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }

/* Uppercase technical label */
.eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--paper-mute);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}