/* ============================================================================
   outfra.ai — design tokens (the linchpin)
   ----------------------------------------------------------------------------
   One file. Every surface (marketing site, login, app shell, legal pages)
   inherits from here — this is what actually unifies the product.

   Colors are stored as raw RGB triplets so they compose with alpha:
       background: rgb(var(--accent) / 0.12);
       color:      rgb(var(--ink));

   Aesthetic: "TEST BENCH" — a light industrial instrument. Warm bone paper
   (the workbench), graphite ink (the markings), safety orange (the tool you
   reach for), drafting cobalt (the data layer), and one dark anodized
   "instrument screen" inset where live readouts render.
   ========================================================================== */

:root {
  /* --- surfaces: the bench ------------------------------------------------ */
  --canvas:    238 236 228; /* #eeece4  page background — warm bone paper */
  --surface:   250 249 245; /* #faf9f5  cards, panels — brighter paper */
  --elevated:  230 227 217; /* #e6e3d9  inset wells, segmented controls */
  --hairline:  206 201 187; /* #cec9bb  borders, rules, the drafting grid */
  --paper-hi:  255 254 250; /* #fffefa  input fields, highlights */

  /* --- ink ---------------------------------------------------------------- */
  --ink:       28 26 21;    /* #1c1a15  primary text — warm graphite */
  --ink-dim:   94 89 78;    /* #5e594e  secondary text */
  --ink-mute:  140 134 120; /* #8c8678  labels, captions, disabled */

  /* --- semantic accents (physics-mapped) ----------------------------------
     NOTE: the historical names (--cyan/--amber/--green/--red) are load-bearing:
     auth.js and inline styles compose them with rgb(). The VALUES carry the
     new palette; the names stay for compatibility. Prefer the semantic
     aliases below in new code. */
  --amber:     211 63 16;   /* #d33f10  SAFETY ORANGE — CTA · heat · power */
  --cyan:      36 86 184;   /* #2456b8  DRAFTING COBALT — data · airflow · links */
  --green:     20 118 70;   /* #147646  validated · in-budget · charge */
  --red:       182 41 35;   /* #b62923  over-thermal · over-budget · fault */
  --warn:      164 98 6;    /* #a46206  caution chips (distinct from CTA orange) */

  --accent: var(--amber);   /* semantic alias: the one orange */
  --data:   var(--cyan);    /* semantic alias: the cobalt data layer */

  /* derived accent tints (precomputed for fills) */
  --amber-soft: rgb(var(--amber) / 0.10);
  --cyan-soft:  rgb(var(--cyan)  / 0.10);
  --green-soft: rgb(var(--green) / 0.10);
  --red-soft:   rgb(var(--red)   / 0.10);
  --warn-soft:  rgb(var(--warn)  / 0.12);

  /* --- the instrument screen (dark inset for live readouts) --------------- */
  --screen:      27 29 30;   /* #1b1d1e  anodized graphite */
  --screen-edge: 62 66 64;   /* #3e4240  screen bezel hairline */
  --screen-ink:  226 229 222;/* #e2e5de  text on screen */
  --screen-dim:  148 153 146;/* #949992  secondary on screen */

  /* --- typography ----------------------------------------------------------
     Archivo: industrial grotesque for headlines. IBM Plex Mono: every number,
     label, and readout. IBM Plex Sans: body prose. */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-ui:      "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-xs:   0.72rem;   /* eyebrows, captions, BOM micro-labels */
  --fs-sm:   0.84rem;
  --fs-base: 0.95rem;
  --fs-md:   1.1rem;
  --fs-lg:   1.4rem;
  --fs-xl:   2.0rem;
  --fs-2xl:  3.1rem;    /* hero headline */
  --fs-3xl:  4.2rem;    /* hero numerals */

  --tracking-eyebrow: 0.16em;  /* uppercase instrument-label spacing */
  --tracking-tight:  -0.025em; /* headline negative tracking */
  --leading-tight:    1.06;
  --leading-body:     1.6;

  /* --- spacing: strict 4px baseline ---------------------------------------- */
  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.5rem;   --space-6: 2rem;
  --space-8: 3rem;     --space-10: 4rem;    --space-12: 6rem;
  --space-16: 8rem;

  /* --- radius (square-shouldered, machined — not pill-soft) ---------------- */
  --radius-sm: 3px;
  --radius:    6px;
  --radius-lg: 10px;

  /* --- elevation (paper over bench: tight, warm, no glow) ------------------ */
  --shadow-card:   0 1px 2px rgb(28 26 21 / 0.05), 0 6px 20px rgb(28 26 21 / 0.07);
  --shadow-lifted: 0 2px 4px rgb(28 26 21 / 0.08), 0 18px 48px rgb(28 26 21 / 0.16);
  --ring-data:     0 0 0 3px rgb(var(--cyan) / 0.18);

  /* --- motion: "motion = machinery" (quick, damped, decisive) -------------- */
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 520ms;
  --ease:      cubic-bezier(0.2, 0.8, 0.2, 1);   /* resolve & settle */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);    /* assembly snap */

  /* --- layout --------------------------------------------------------------- */
  --maxw: 1200px;
  --gutter: clamp(1rem, 4vw, 3rem);
}

/* ----------------------------------------------------------------------------
   Base layer — the minimum every surface needs so the tokens read correctly.
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: rgb(var(--canvas));
  color: rgb(var(--ink));
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

::selection { background: rgb(var(--amber) / 0.22); }

/* every number is mono — the signature that reads as "precision" */
.num, .spec, .dim, code, kbd { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* eyebrow: instrument-panel section label */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: rgb(var(--amber));
}

/* faint drafting grid — apply to a full-bleed background element */
.grid-bg {
  background-image:
    linear-gradient(rgb(var(--ink) / 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--ink) / 0.05) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* the instrument screen: any dark inset. Re-scopes the legacy accent triplets
   to screen-bright variants so rgb(var(--amber)) etc. — including values
   written inline by scripts — stay legible on graphite. */
.screen {
  --amber: 255 138 76;   /* bright trace orange */
  --cyan:  126 168 255;  /* bright trace cobalt */
  --green: 96 205 150;
  --red:   255 110 95;
  --warn:  255 184 108;
  --amber-soft: rgb(var(--amber) / 0.12);
  --cyan-soft:  rgb(var(--cyan)  / 0.12);
  --green-soft: rgb(var(--green) / 0.12);
  --red-soft:   rgb(var(--red)   / 0.12);
  --ink:      var(--screen-ink);
  --ink-dim:  var(--screen-dim);
  --ink-mute: 118 123 117;
  --surface:  35 38 39;
  --elevated: 42 45 46;
  --hairline: var(--screen-edge);
  background: rgb(var(--screen));
  color: rgb(var(--screen-ink));
}

/* honor user motion + contrast preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}