/* ============================================
   FRGE NEXUS — Colors & Type Tokens
   B&W editorial + enterprise-clean web
   ============================================ */

:root {
  /* ---------- NEUTRAL SCALE (source of truth) ---------- */
  --white: #ffffff;
  --black: #000000;
  --gray-50:  #fafafa;
  --gray-100: #f5f5f5;
  --gray-200: #e5e5e5;
  --gray-300: #d4d4d4;
  --gray-400: #a3a3a3;
  --gray-500: #737373;
  --gray-600: #525252;
  --gray-700: #404040;
  --gray-800: #262626;
  --gray-900: #171717;
  --gray-950: #0a0a0a;

  /* ---------- SEMANTIC — DARK SURFACE (default) ---------- */
  --bg:          var(--black);
  --bg-elev:     var(--gray-950);    /* cards on dark */
  --bg-subtle:   var(--gray-900);    /* grid lines, dividers */
  --fg:          var(--white);
  --fg-muted:    var(--gray-400);    /* body copy on dark */
  --fg-subtle:   var(--gray-500);    /* labels, meta */
  --fg-faint:    var(--gray-600);    /* numerals, captions */
  --border:      var(--gray-900);    /* hairline on dark */
  --border-strong: var(--gray-800);

  /* ---------- ACCENT ---------- */
  /* Brand is strictly B&W. "Accent" is the inversion: white block on black
     text, or black block on white text. Use --highlight-bg + --highlight-fg. */
  --highlight-bg: var(--white);
  --highlight-fg: var(--black);

  /* ---------- TYPEFACES ---------- */
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Archivo', 'Inter', -apple-system, sans-serif;   /* condensed-ish display */
  --font-serif:   'Newsreader', 'Times New Roman', Georgia, serif; /* italic editorial accents */
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- TYPE SCALE ---------- */
  --fs-caption:  11px;   /* eyebrow labels, meta, "VOL. 001 2026" */
  --fs-small:    12px;
  --fs-body:     14px;   /* default UI copy */
  --fs-body-lg:  16px;   /* paragraph on light surfaces */
  --fs-lead:     18px;
  --fs-h4:       20px;
  --fs-h3:       24px;
  --fs-h2:       32px;
  --fs-h1:       48px;
  --fs-display:  88px;   /* hero — clamp at usage site */

  /* ---------- TYPE BEHAVIOR ---------- */
  --lh-tight:   0.95;
  --lh-snug:    1.1;
  --lh-normal:  1.6;
  --lh-loose:   1.75;

  --ls-display: -0.04em;
  --ls-heading: -0.02em;
  --ls-body:     0.01em;
  --ls-eyebrow:  0.14em;   /* UPPERCASE eyebrows */

  /* ---------- SPACING ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-30: 120px;   /* section padding */

  /* ---------- RADII ---------- */
  --r-none: 0;          /* flyers, editorial blocks, highlights */
  --r-xs:   4px;        /* image masks */
  --r-sm:   8px;
  --r-md:   12px;       /* modal email chip */
  --r-lg:   16px;       /* service grid */
  --r-xl:   20px;       /* modals */
  --r-pill: 100px;      /* buttons */

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

  /* ---------- SHADOWS ---------- */
  /* Brand is flat — shadows are used sparingly and only on light surface */
  --shadow-none: none;
  --shadow-sm:   0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:   0 8px 24px rgba(0,0,0,0.08);
  --shadow-modal: 0 24px 64px rgba(0,0,0,0.5);

  /* ---------- MOTION ---------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --spring:      cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    0.3s;
  --dur-med:     0.5s;
  --dur-slow:    0.8s;

  /* ---------- LAYOUT ---------- */
  --container:   1200px;
  --gutter:      24px;
  --gutter-md:   48px;
  --gutter-lg:   64px;
}

/* ---------- LIGHT-SURFACE SWAP ----------
   Apply `.on-light` to any section that uses the white background
   (like `.about` and `.contact` in the site). Remaps semantic vars. */
.on-light {
  --bg:        var(--white);
  --bg-elev:   var(--gray-50);
  --bg-subtle: var(--gray-100);
  --fg:        var(--black);
  --fg-muted:  var(--gray-600);
  --fg-subtle: var(--gray-500);
  --fg-faint:  var(--gray-400);
  --border:    var(--gray-200);
  --border-strong: var(--gray-300);
  --highlight-bg: var(--black);
  --highlight-fg: var(--white);
  background: var(--bg);
  color: var(--fg);
}

/* ============================================
   SEMANTIC TYPE CLASSES
   ============================================ */

.t-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-subtle);
}

/* Section label w/ leading rule — "— A PERSONALIZED DEEP-DIVE" */
.t-eyebrow--rule::before {
  content: "";
  display: inline-block;
  width: 32px;
  height: 1px;
  background: currentColor;
  vertical-align: middle;
  margin-right: 12px;
  transform: translateY(-2px);
}

.t-display {
  font-family: var(--font-display);
  font-size: clamp(48px, 10vw, var(--fs-display));
  font-weight: 700;
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  color: var(--fg);
}

/* Italic / outlined counterpoint used inside display headlines.
   Used on flyers — e.g. "The hours and dollars AI is hiding" */
.t-display__italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}

.t-display__outline {
  -webkit-text-stroke: 1.5px currentColor;
  color: transparent;
  font-style: italic;
  font-family: var(--font-serif);
  font-weight: 400;
}

/* "hiding" — inverse block treatment. Drop around a word. */
.t-highlight {
  display: inline-block;
  background: var(--highlight-bg);
  color: var(--highlight-fg);
  padding: 0 0.18em;
  line-height: 1;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

h1, .t-h1 {
  font-family: var(--font-sans);
  font-size: clamp(32px, 5vw, var(--fs-h1));
  font-weight: 700;
  letter-spacing: var(--ls-display);
  line-height: var(--lh-snug);
  color: var(--fg);
}

h2, .t-h2 {
  font-family: var(--font-sans);
  font-size: clamp(28px, 4vw, var(--fs-h2));
  font-weight: 600;
  letter-spacing: var(--ls-heading);
  line-height: 1.2;
  color: var(--fg);
}

h3, .t-h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: var(--ls-heading);
  line-height: 1.25;
  color: var(--fg);
}

h4, .t-h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  font-weight: 600;
  letter-spacing: var(--ls-heading);
  line-height: 1.3;
  color: var(--fg);
}

p, .t-body {
  font-family: var(--font-sans);
  font-size: var(--fs-body-lg);
  font-weight: 300;
  line-height: var(--lh-loose);
  color: var(--fg-muted);
}

.t-body--sm { font-size: var(--fs-body); line-height: var(--lh-normal); }
.t-body--lead { font-size: var(--fs-lead); font-weight: 300; line-height: var(--lh-normal); color: var(--fg-muted); }

.t-label {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: var(--ls-body);
  color: var(--fg-muted);
}

.t-meta {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 400;
  color: var(--fg-faint);
}

/* Numbered index — 01 / 02 / 03 used on flyers AND service cards */
.t-index {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--fg-faint);
}

code, .t-code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--fg);
}

::selection { background: var(--white); color: var(--black); }
.on-light ::selection { background: var(--black); color: var(--white); }