/* ============================================================
   WTI DESIGN SYSTEM — COLORS & TYPE
   Whiskey Tango Industries
   Operator-grade industrial holdco aesthetic.
   Lifted from wtic2-deploy/site/styles/tokens.css and extended
   with semantic variables for h1/h2/p/code/etc.
   ============================================================ */

/* ---- Font imports (Google Fonts; original site uses these) ---- */
@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700;800;900&family=IBM+Plex+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ============================================================
     COLOR — GROUND LAYER (dark, warm, cinematic)
     ============================================================ */
  --bg-deep:        #050402;   /* hero / footer pit  — deepest */
  --bg-base:        #0a0907;   /* page background    — default */
  --bg-elevated:    #14130f;   /* section variant    — one step up */
  --bg-card:        #1c1a15;   /* card / panel       — two steps up */

  /* ---- Lines & edges ---- */
  --border-subtle:  #2a2823;   /* hairlines inside dark surfaces */
  --border-edge:    #3d3a32;   /* visible dividers */
  --border-bright:  #6e6a5e;   /* emphasized rules, focus borders */

  /* ---- Type / foreground ---- */
  --text-primary:   #f1ede0;   /* bone — primary on dark */
  --text-secondary: #b8b3a6;   /* warm gray — body / secondary */
  --text-muted:     #7a766c;   /* mid-tone — metadata, captions */
  --text-faint:     #4a4740;   /* faint — atmospheric labels */

  /* ============================================================
     COLOR — SIGNAL
     Burnt amber is the only true brand color. Used surgically.
     ============================================================ */
  --accent:         #d97742;   /* burnt amber — primary signal */
  --accent-bright:  #e8894f;   /* hover / focus */
  --accent-deep:    #a8552c;   /* pressed / shadow */
  --accent-glow:    rgba(217, 119, 66, 0.18);

  --olive:          #6b7559;   /* deep olive — secondary accent, restrained */
  --olive-deep:     #4a5341;
  --olive-bright:   #8a9572;

  --signal-red:     #c93a2a;   /* signal red — used sparingly */
  --signal-red-deep:#8e2317;

  /* ---- Semantic status (mapped onto the palette) ---- */
  --status-active:  var(--olive);     /* "operational" / live */
  --status-warn:    var(--accent);    /* attention / in-progress */
  --status-error:   var(--signal-red);
  --status-idle:    var(--text-muted);

  /* ---- Foreground convenience aliases (fg1, fg2, ...) ---- */
  --fg1: var(--text-primary);
  --fg2: var(--text-secondary);
  --fg3: var(--text-muted);
  --fg4: var(--text-faint);

  /* ============================================================
     TYPOGRAPHY — FAMILIES
     ============================================================ */
  --font-display:   'Big Shoulders Display', 'Arial Narrow', Impact, sans-serif;
  --font-body:      'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono:      'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Tactical / classified-document feel comes from mono used for
     labels, eyebrows, navigation; display used for headlines,
     condensed and stacked; body for paragraphs only. */

  /* ============================================================
     TYPOGRAPHY — SCALE (fluid)
     ============================================================ */
  --type-xs:        clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --type-sm:        clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem);
  --type-base:      clamp(1rem,    0.96rem + 0.20vw, 1.0625rem);
  --type-md:        clamp(1.125rem, 1.08rem + 0.25vw, 1.25rem);
  --type-lg:        clamp(1.375rem, 1.30rem + 0.40vw, 1.625rem);
  --type-xl:        clamp(1.75rem,  1.60rem + 0.75vw, 2.25rem);
  --type-2xl:       clamp(2.5rem,   2.20rem + 1.50vw, 3.5rem);
  --type-3xl:       clamp(3.5rem,   3.00rem + 2.50vw, 5.5rem);
  --type-display:   clamp(4.5rem,   3.50rem + 5.00vw, 9rem);

  /* ---- Weights ---- */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;
  --weight-black:   800;
  --weight-ultra:   900;

  /* ---- Tracking ---- */
  --track-tight:    -0.02em;
  --track-normal:   0;
  --track-wide:     0.04em;
  --track-wider:    0.12em;
  --track-widest:   0.20em;

  /* ============================================================
     SPACING — 8pt-ish, tightened
     ============================================================ */
  --space-1:  0.25rem;   /* 4 */
  --space-2:  0.5rem;    /* 8 */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.5rem;    /* 24 */
  --space-6:  2rem;      /* 32 */
  --space-8:  3rem;      /* 48 */
  --space-10: 4rem;      /* 64 */
  --space-12: 5rem;      /* 80 */
  --space-16: 7rem;      /* 112 */
  --space-20: 9rem;      /* 144 */
  --space-24: 11rem;     /* 176 */

  /* ============================================================
     LAYOUT
     ============================================================ */
  --container:       1280px;
  --container-tight:  980px;
  --container-wide:  1440px;
  --gutter:          clamp(1.25rem, 4vw, 2.5rem);

  /* ============================================================
     RADII — WTI prefers crisp, low/zero radius. Cards have NO
     rounded corners. Buttons sit at 0–2px. Pills only when the
     element is a pure status badge.
     ============================================================ */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-pill: 999px;

  /* ============================================================
     SHADOWS / ELEVATION
     The aesthetic is matte/photographic; shadows are atmospheric
     glows or hairline insets — almost never drop shadows.
     ============================================================ */
  --shadow-inset-hairline: inset 0 0 0 1px var(--border-subtle);
  --shadow-edge:           0 1px 0 var(--border-subtle);
  --shadow-glow-accent:    0 0 24px var(--accent-glow);
  --shadow-glow-olive:     0 0 8px rgba(107, 117, 89, 0.5);
  --shadow-page:           0 24px 64px -16px rgba(0, 0, 0, 0.6);

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --ease-sharp:    cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:      180ms;
  --dur-base:      320ms;
  --dur-slow:      640ms;
  --dur-cinematic: 1200ms;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES — h1 / h2 / p / code / etc.
   These are the canonical type styles. Apply at the element
   level OR via the matching utility class (.h1, .eyebrow, etc).
   ============================================================ */

html { color-scheme: dark; }

body, .body {
  font-family: var(--font-body);
  font-size: var(--type-base);
  font-weight: var(--weight-regular);
  line-height: 1.55;
  color: var(--text-primary);
  background: var(--bg-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: var(--type-display);
  line-height: 0.85;
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  color: var(--text-primary);
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: var(--type-3xl);
  line-height: 0.95;
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  color: var(--text-primary);
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--type-2xl);
  line-height: 0.95;
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  color: var(--text-primary);
}

h4, .h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--type-xl);
  line-height: 1.05;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--text-primary);
}

p, .p {
  font-family: var(--font-body);
  font-size: var(--type-base);
  line-height: 1.65;
  color: var(--text-secondary);
}
p strong, .p strong { color: var(--text-primary); font-weight: var(--weight-medium); }
p em, .p em         { font-style: normal; color: var(--accent); }

small, .small {
  font-family: var(--font-body);
  font-size: var(--type-sm);
  color: var(--text-muted);
  line-height: 1.5;
}

/* Mono / tactical labels — used for eyebrows, nav, metadata, code */
code, kbd, samp, .mono, .code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--text-primary);
  background: var(--bg-card);
  padding: 0.05em 0.4em;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
}

/* The signature WTI eyebrow — mono, all-caps, widely tracked,
   amber, hairline preceding rule. */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  color: var(--accent);
}

.eyebrow--muted { color: var(--text-muted); }

/* Section label pattern: "§ 01  / About" */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  color: var(--accent);
}
.section-label::before {
  content: "";
  display: block;
  width: 36px;
  height: 1px;
  background: var(--accent);
}
.section-label .num { color: var(--text-muted); }

/* Metadata label / value — used in hero strip, contact lines */
.meta-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  color: var(--text-muted);
}
.meta-value {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--type-md);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--text-primary);
}

/* Selection respects the brand */
::selection { background: var(--accent); color: var(--bg-base); }