/* ============================================================
   PRECISIONEERING — Foundational Tokens
   Anchor: logo ink sampled at oklch(~30% 0.03 240) ≈ #2B333C
   Paper:  sampled at warm off-white ≈ #EFEEEC
   ============================================================ */

/* --- Fonts — FINAL ---
   Brand calls for "modern geometric sans-serif, bold for headings, regular
   body, avoid decorative fonts." Locked-in selections:
     Display  → Barlow            (geometric, industrial, wide all-caps)
     Body     → Inter             (neutral, high-legibility, hairline forms)
     Mono     → JetBrains Mono    (spec values, SKUs, coordinates)
   Self-host these in production from a static CDN; the Google Fonts import
   below is for design-time use. Subset to latin + latin-ext.
   Preconnect tags should be added to host pages for perf:
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
*/
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ==========================================================
     COLOR — Slate-blue industrial palette (anchored on logo)
     ========================================================== */

  /* ---- Brand core ---- */
  --slate-ink:       #2B333C;   /* PRIMARY — logo ink. Headings, wordmark */
  --slate-deep:      #1B2029;   /* Highest-emphasis. Rare. */
  --slate-mid:       #4B5563;   /* Secondary ink. Body copy at scale. */
  --slate-soft:      #7A8492;   /* Muted copy, captions, 2nd-line labels */
  --paper:           #EFEEEC;   /* PRIMARY page background (warm off-white) */
  --bone:            #E2E0DA;   /* Secondary surface — inset panels */
  --composite-white: #FFFFFF;   /* Cards, high-contrast fills */

  /* ---- Slate scale (oklch-harmonised, hue 240°, chroma 0.02–0.04) ---- */
  --slate-950: #12161C;
  --slate-900: #1B2029;   /* = deep */
  --slate-800: #2B333C;   /* = ink — PRIMARY */
  --slate-700: #3B4552;
  --slate-600: #4B5563;   /* = mid */
  --slate-500: #6B7486;
  --slate-400: #7A8492;   /* = soft */
  --slate-300: #A6ADB8;
  --slate-200: #CCD1D8;
  --slate-100: #E3E6EA;
  --slate-050: #F0F2F4;

  /* ---- Paper / warm-neutral scale ---- */
  --paper-900: #38362F;
  --paper-700: #6E6B61;
  --paper-500: #A29E92;
  --paper-300: #CFCBBD;
  --paper-200: #DAD7CB;
  --paper-100: #E2E0DA;   /* = bone */
  --paper-050: #EFEEEC;   /* = paper — PRIMARY BG */
  --paper-000: #FFFFFF;

  /* ---- Accent — Rust/Copper (industrial, corrosion-resistant FRP cue)
          Use sparingly (≤8% of any composition): CTAs, focus, active data. */
  --rust-900: #4A2612;
  --rust-700: #7A3E1F;
  --rust-500: #A85A31;   /* primary accent */
  --rust-400: #C27849;
  --rust-300: #D89B74;
  --rust-100: #F0D9C6;

  /* ==========================================================
     SEMANTIC TOKENS — light-mode native (paper-first)
     ========================================================== */
  --bg:            var(--paper-050);
  --bg-elev-1:     var(--paper-000);   /* cards */
  --bg-elev-2:     var(--paper-100);   /* inset panels */
  --bg-inverse:    var(--slate-800);

  --fg:            var(--slate-800);
  --fg-strong:     var(--slate-900);
  --fg-muted:      var(--slate-600);
  --fg-subtle:     #5E6878;            /* Adjusted from slate-400 (#7A8492) for WCAG AA contrast on paper backgrounds — 4.9:1 vs 3.4:1 */
  --fg-inverse:    var(--paper-050);

  --border:        var(--slate-100);
  --border-strong: var(--slate-200);
  --border-ink:    var(--slate-800);
  --border-accent: var(--rust-500);

  --accent:        var(--rust-500);
  --accent-hover:  var(--rust-400);
  --accent-press:  var(--rust-700);
  --accent-fg:     var(--paper-000);

  --success:       #4C7F5C;
  --warning:       #B8893A;
  --danger:        #A8463A;

  /* ==========================================================
     TYPOGRAPHY
     ========================================================== */
  --font-display: 'Barlow', 'Eurostile', 'Bahnschrift', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-black:     900;

  --ls-tight:    -0.02em;
  --ls-normal:    0;
  --ls-wide:      0.04em;
  --ls-wider:     0.12em;    /* industrial all-caps eyebrow */
  --ls-widest:    0.22em;

  --fs-12:  0.75rem;
  --fs-13:  0.8125rem;
  --fs-14:  0.875rem;
  --fs-16:  1rem;
  --fs-18:  1.125rem;
  --fs-20:  1.25rem;
  --fs-24:  1.5rem;
  --fs-32:  2rem;
  --fs-40:  2.5rem;
  --fs-56:  3.5rem;
  --fs-72:  4.5rem;
  --fs-96:  6rem;

  --lh-tight:   1.02;
  --lh-snug:    1.15;
  --lh-normal:  1.45;
  --lh-loose:   1.65;

  /* ==========================================================
     SPACING — 4pt grid
     ========================================================== */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* ==========================================================
     RADII — tight, industrial
     ========================================================== */
  --r-none:  0;
  --r-xs:    2px;
  --r-sm:    4px;
  --r-md:    6px;     /* default */
  --r-lg:    10px;
  --r-pill:  999px;

  /* ==========================================================
     ELEVATION — soft, paper-consistent
     ========================================================== */
  --shadow-1: 0 1px 2px rgba(27, 32, 41, 0.06), 0 0 0 1px rgba(27, 32, 41, 0.04);
  --shadow-2: 0 2px 8px rgba(27, 32, 41, 0.08), 0 0 0 1px rgba(27, 32, 41, 0.04);
  --shadow-3: 0 12px 32px rgba(27, 32, 41, 0.14), 0 0 0 1px rgba(27, 32, 41, 0.05);
  --shadow-focus: 0 0 0 3px rgba(168, 90, 49, 0.28);

  /* ==========================================================
     MOTION
     ========================================================== */
  --ease-out:   cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in:    cubic-bezier(0.6, 0, 0.8, 0.2);
  --ease-inout: cubic-bezier(0.5, 0, 0.2, 1);
  --dur-fast:   120ms;
  --dur-med:    220ms;
  --dur-slow:   400ms;
}

/* ============================================================
   SEMANTIC BASE STYLES
   ============================================================ */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
}

/* ---- Display (industrial, wide, all-caps) ---- */
.display-xl, h1.display {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(3rem, 8vw, var(--fs-96));
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
  color: var(--fg-strong);
}

.display-lg {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-72);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
  color: var(--fg-strong);
}

h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-56);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
  color: var(--fg-strong);
  margin: 0;
}

h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-40);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
  color: var(--fg-strong);
  margin: 0;
}

h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-normal);
  color: var(--fg);
  margin: 0;
}

h4 {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-18);
  line-height: var(--lh-snug);
  color: var(--fg);
  margin: 0;
}

/* Eyebrow / kicker — industrial tech motif */
.eyebrow {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-12);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--rust-500);
}

.lead {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-20);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}

p, .body {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  color: var(--fg);
}

.body-sm {
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
}

.caption {
  font-family: var(--font-body);
  font-size: var(--fs-12);
  letter-spacing: var(--ls-wide);
  color: var(--fg-subtle);
}

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.95em;
  color: var(--slate-700);
}

/* ---- Utility ---- */
.rule { height: 1px; background: var(--border); width: 100%; }
.rule-strong { height: 1px; background: var(--border-strong); width: 100%; }