/* ============================================================================
   outfrastructure.ai — design tokens (the linchpin)
   ----------------------------------------------------------------------------
   One file. Every former surface (marketing site, configurator, workbench)
   inherits from here — this is what actually unifies the merged product.

   Pattern borrowed from metime/frontend/src/styles/tokens.css: colors are
   stored as raw RGB triplets so they compose with alpha, e.g.
       background: rgb(var(--cyan) / 0.12);
       color:      rgb(var(--ink));

   Aesthetic: "instrument panel / living blueprint." Color carries engineering
   meaning, not decoration — see the --meaning notes.
   ========================================================================== */

:root {
  /* --- surfaces: the board ------------------------------------------------ */
  --canvas:    10 13 18;    /* #0a0d12  page background (from outfrastructure site) */
  --surface:   17 22 29;    /* #11161d  cards, panels */
  --elevated:  22 28 37;    /* #161c25  raised panels, popovers */
  --hairline:  35 43 54;    /* #232b36  borders, the engineering grid */

  /* --- ink ---------------------------------------------------------------- */
  --ink:       232 236 242; /* #e8ecf2  primary text */
  --ink-dim:   154 164 178; /* #9aa4b2  secondary text */
  --ink-mute:  107 114 128; /* #6b7280  labels, captions, disabled */

  /* --- semantic accents (physics-mapped) ---------------------------------- */
  --cyan:      125 211 252; /* #7dd3fc  meaning: airflow · cool · data · primary */
  --amber:     251 191 36;  /* #fbbf24  meaning: heat · power · battery · CTA */
  --green:     74 222 128;  /* #4ade80  meaning: validated · in-budget · charge */
  --red:       248 113 113; /* #f87171  meaning: over-thermal · over-budget · fault */

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

  /* --- typography --------------------------------------------------------- */
  --font-ui:   "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains 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:  2.9rem;    /* hero headline */
  --fs-3xl:  4.0rem;    /* hero numerals */

  --tracking-eyebrow: 0.18em;  /* uppercase instrument-label spacing */
  --tracking-tight:  -0.03em;  /* headline negative tracking */
  --leading-tight:    1.1;
  --leading-body:     1.55;

  /* --- 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 (tight, instrument-grade — not pill-soft) ------------------- */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 14px;

  /* --- elevation (restrained; depth via hairline + faint glow) ------------ */
  --shadow-card:   0 1px 0 rgb(var(--ink) / 0.03), 0 8px 24px rgb(0 0 0 / 0.35);
  --shadow-lifted: 0 12px 48px rgb(0 0 0 / 0.5);
  --glow-cyan:     0 0 0 1px rgb(var(--cyan) / 0.4), 0 0 24px rgb(var(--cyan) / 0.18);

  /* --- motion: "motion = computation" ------------------------------------- */
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 480ms;
  --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.
   (A real build would split this out; kept here so the mockup is self-evident.)
   -------------------------------------------------------------------------- */
* { 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;
}

/* 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);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: rgb(var(--cyan));
}

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

/* 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;
  }
}