/* ============================================================
   Brent Mills Technical Consulting - Core Tokens
   Ported verbatim from the design handoff (colors_and_type.css).
   Font @import / @font-face live in fonts.css (self-hosted).

   Aesthetic: "Engineering-grade calm."
   Ice-blue canvas, dark-navy ink, one decisive burnt-orange
   accent. Monospace for technical metadata. Hairline rules,
   restrained shadows, small radii. Precise, senior, quiet.
   ============================================================ */

:root {
  /* ======================================================
     COLOR - RAW PALETTE (brand-provided)
     ====================================================== */
  --navy:        #1A2B3C;  /* primary ink, darkest accent card */
  --slate:       #4A6070;  /* accent card 1 */
  --steel:       #8BA5B8;  /* accent card 2 / muted */
  --ice:         #EEF3F8;  /* primary canvas */
  --orange:      #E8530A;  /* CTA / active / energy */
  --white:       #FFFFFF;

  /* Extended ramp (derived, harmonized in oklch) */
  --navy-900:    #12202E;  /* deepest, near-black navy */
  --navy-800:    #1A2B3C;  /* = --navy */
  --navy-700:    #243A4E;
  --slate-600:   #3C4F5D;
  --slate-500:   #4A6070;  /* = --slate */
  --steel-400:   #6E8A9E;
  --steel-300:   #8BA5B8;  /* = --steel */
  --steel-200:   #B4C6D3;
  --ice-100:     #DCE6EF;  /* hairline / divider on ice */
  --ice-50:      #EEF3F8;  /* = --ice */
  --ice-25:      #F6F9FC;  /* raised surface above canvas */

  --orange-600:  #C8440A;  /* pressed / hover-dark */
  --orange-500:  #E8530A;  /* = --orange */
  --orange-100:  #FBE2D4;  /* orange tint surface */

  /* Semantic - surfaces & ink */
  --bg:            var(--ice-50);     /* page canvas */
  --bg-raised:     var(--white);      /* cards, panels */
  --bg-sunken:     var(--ice-100);    /* wells, code blocks on ice */
  --bg-inverse:    var(--navy-900);   /* dark sections */

  --fg:            var(--navy-800);   /* primary text */
  --fg-muted:      var(--slate-500);  /* secondary text */
  --fg-subtle:     var(--steel-400);  /* tertiary / captions */
  --fg-on-dark:    var(--ice-25);     /* text on navy */
  --fg-on-accent:  var(--white);      /* text on orange / slate */

  --border:        var(--ice-100);    /* default hairline */
  --border-strong: var(--steel-200);  /* emphasized divider */
  --border-ink:    var(--navy-800);   /* outline on ink elements */

  --accent:        var(--orange-500); /* the one energetic accent */
  --accent-ink:    var(--white);
  --accent-hover:  var(--orange-600);

  /* Semantic - status (kept close to brand, used sparingly) */
  --ok:      #2E7D54;  /* uptime green */
  --warn:    #C8770A;  /* warm amber */
  --crit:    #C0392B;  /* incident red */
  --info:    var(--slate-500);

  /* ======================================================
     TYPE - FAMILIES
     ====================================================== */
  --font-display: 'Schibsted Grotesk', system-ui, sans-serif;   /* headlines */
  --font-sans:    'Inter', system-ui, sans-serif;              /* body / UI (self-hosted brand font) */
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;     /* labels / code / metrics */

  /* TYPE - SCALE (1.25 major-third-ish, tightened at top) */
  --t-display: 4.5rem;   /* 72 - hero */
  --t-h1:      3rem;     /* 48 */
  --t-h2:      2.25rem;  /* 36 */
  --t-h3:      1.5rem;   /* 24 */
  --t-h4:      1.25rem;  /* 20 */
  --t-body-lg: 1.125rem; /* 18 */
  --t-body:    1rem;     /* 16 */
  --t-small:   0.875rem; /* 14 */
  --t-eyebrow: 0.75rem;  /* 12 - mono labels */
  --t-micro:   0.6875rem;/* 11 */

  /* TYPE - WEIGHTS */
  --w-regular: 400;
  --w-medium:  500;
  --w-semibold:600;
  --w-bold:    700;

  /* TYPE - LINE HEIGHT */
  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  /* TYPE - TRACKING */
  --tr-tight:   -0.02em;  /* display */
  --tr-normal:   0;
  --tr-wide:     0.04em;
  --tr-eyebrow:  0.14em;   /* mono eyebrows, ALL-CAPS */

  /* ======================================================
     SPACE - 4px base scale
     ====================================================== */
  --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 - small, engineered */
  --r-xs: 3px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-pill: 999px;

  /* BORDERS */
  --bw-hair: 1px;
  --bw-med:  1.5px;

  /* SHADOWS - restrained, cool-tinted */
  --sh-xs: 0 1px 2px rgba(26, 43, 60, 0.06);
  --sh-sm: 0 1px 3px rgba(26, 43, 60, 0.08), 0 1px 2px rgba(26, 43, 60, 0.06);
  --sh-md: 0 4px 12px rgba(26, 43, 60, 0.08), 0 1px 3px rgba(26, 43, 60, 0.06);
  --sh-lg: 0 12px 32px rgba(26, 43, 60, 0.12), 0 2px 6px rgba(26, 43, 60, 0.06);
  --sh-focus: 0 0 0 3px rgba(232, 83, 10, 0.28);

  /* MOTION */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur-fast: 120ms;
  --dur:      200ms;
  --dur-slow: 360ms;

  /* LAYOUT */
  --maxw: 1200px;
  --maxw-text: 68ch;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES - opt-in via .ds- classes
   ============================================================ */

.ds-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  font-weight: var(--w-medium);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}

.ds-display {
  font-family: var(--font-display);
  font-size: var(--t-display);
  font-weight: var(--w-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg);
}

.ds-h1 { font-family: var(--font-display); font-size: var(--t-h1); font-weight: var(--w-bold);     line-height: var(--lh-tight); letter-spacing: var(--tr-tight); color: var(--fg); }
.ds-h2 { font-family: var(--font-display); font-size: var(--t-h2); font-weight: var(--w-semibold); line-height: var(--lh-snug);  letter-spacing: var(--tr-tight); color: var(--fg); }
.ds-h3 { font-family: var(--font-sans);    font-size: var(--t-h3); font-weight: var(--w-semibold); line-height: var(--lh-snug);  color: var(--fg); }
.ds-h4 { font-family: var(--font-sans);    font-size: var(--t-h4); font-weight: var(--w-semibold); line-height: var(--lh-snug);  color: var(--fg); }

.ds-body    { font-family: var(--font-sans); font-size: var(--t-body);    font-weight: var(--w-regular); line-height: var(--lh-relaxed); color: var(--fg); }
.ds-body-lg { font-family: var(--font-sans); font-size: var(--t-body-lg); font-weight: var(--w-regular); line-height: var(--lh-relaxed); color: var(--fg); }
.ds-small   { font-family: var(--font-sans); font-size: var(--t-small);   font-weight: var(--w-regular); line-height: var(--lh-normal);  color: var(--fg-muted); }

.ds-mono    { font-family: var(--font-mono); font-size: var(--t-small); font-weight: var(--w-regular); color: var(--fg-muted); }
.ds-metric  { font-family: var(--font-mono); font-size: var(--t-h2);    font-weight: var(--w-semibold); letter-spacing: var(--tr-tight); color: var(--fg); font-variant-numeric: tabular-nums; }

code, .ds-code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--bg-sunken);
  border: var(--bw-hair) solid var(--border);
  border-radius: var(--r-xs);
  padding: 0.1em 0.4em;
  color: var(--navy-700);
}