/* ==========================================================================
   Sam Lawson Design System — colors_and_type.css
   Property · Mentorship · AI
   ========================================================================== */

/* ---------- Webfonts (Google Fonts) ----------
   Three typefaces, each with a clear job:
   - Archivo        — display (800/900) + logo brackets (400)
   - Manrope        — body (400/500/700)
   - JetBrains Mono — labels/eyebrows (400/500, uppercase, wide tracking)
   -------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=Manrope:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ========================================================================
     COLOR — 5 colors, not equal. Dusk dominates 60%+, Brass accents.
     ======================================================================== */

  /* Core palette */
  --sl-dusk:  #18171C;   /* Primary bg — warm near-black, subtle purple undertone */
  --sl-brass: #C89B5C;   /* Accent — the "Sam Lawson" color. Brackets + CTAs */
  --sl-rust:  #8A5A3B;   /* Secondary warm — testimonials, quotes, pod covers */
  --sl-slate: #6B7A82;   /* Neutral — data, stats, metadata, calm moments */
  --sl-bone:  #F2EDE4;   /* Light — body text on Dusk, light surfaces. NEVER pure white */

  /* Tints derived from core (translucent, for borders/surfaces on Dusk) */
  --sl-bone-03:  rgba(242, 237, 228, 0.03);
  --sl-bone-06:  rgba(242, 237, 228, 0.06);
  --sl-bone-08:  rgba(242, 237, 228, 0.08);
  --sl-bone-10:  rgba(242, 237, 228, 0.10);
  --sl-bone-15:  rgba(242, 237, 228, 0.15);
  --sl-bone-30:  rgba(242, 237, 228, 0.30);
  --sl-bone-55:  rgba(242, 237, 228, 0.55);
  --sl-bone-70:  rgba(242, 237, 228, 0.70);
  --sl-bone-85:  rgba(242, 237, 228, 0.85);

  --sl-brass-15: rgba(200, 155, 92, 0.15);
  --sl-brass-30: rgba(200, 155, 92, 0.30);
  --sl-brass-55: rgba(200, 155, 92, 0.55);

  /* Elevated surface — subtly lighter than Dusk */
  --sl-surface-1: #1F1E24; /* cards, panels on Dusk */
  --sl-surface-2: #24232A; /* hover / raised */
  --sl-surface-0: #0F0E12; /* below-Dusk — browser bars, deep wells */

  /* ---- Semantic tokens (dark-mode-native default) ----
     Reference these in product code. They remap cleanly for light mode. */
  --sl-bg:          var(--sl-dusk);
  --sl-bg-elev:     var(--sl-surface-1);
  --sl-bg-elev-2:   var(--sl-surface-2);
  --sl-bg-deep:     var(--sl-surface-0);

  --sl-fg:          var(--sl-bone);          /* primary text */
  --sl-fg-muted:    var(--sl-bone-70);       /* secondary text */
  --sl-fg-subtle:   var(--sl-bone-55);       /* metadata, captions */
  --sl-fg-faint:    var(--sl-bone-30);       /* placeholder, disabled */

  --sl-accent:      var(--sl-brass);         /* hero accent, CTA */
  --sl-accent-ink:  var(--sl-dusk);          /* foreground on accent fill */
  --sl-warm:        var(--sl-rust);          /* secondary warm */
  --sl-neutral:     var(--sl-slate);         /* neutral chip / data */

  --sl-border:      var(--sl-bone-10);       /* default hairline */
  --sl-border-soft: var(--sl-bone-06);
  --sl-border-strong: var(--sl-bone-15);
  --sl-border-accent: var(--sl-brass-15);

  /* ========================================================================
     TYPOGRAPHY — three typefaces, each with a single job
     ======================================================================== */

  /* Font families */
  --sl-font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --sl-font-body:    'Manrope', 'Helvetica Neue', Arial, sans-serif;
  --sl-font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Weights allowed */
  --sl-w-brackets:   400;  /* Archivo 400 — logo brackets ONLY */
  --sl-w-heavy:      800;  /* Archivo 800 — subheads, UI emphasis */
  --sl-w-black:      900;  /* Archivo 900 — display headlines, wordmark */
  --sl-w-body:       400;
  --sl-w-body-em:    500;
  --sl-w-body-bold:  700;
  --sl-w-mono:       400;
  --sl-w-mono-em:    500;

  /* Letter-spacing tokens */
  --sl-track-display-tight: -0.035em;  /* wordmark, display headlines */
  --sl-track-display:       -0.03em;   /* large headlines */
  --sl-track-head:          -0.02em;   /* section heads */
  --sl-track-body:          0;
  --sl-track-mono:          0.15em;    /* labels minimum */
  --sl-track-mono-wide:     0.20em;    /* eyebrows */
  --sl-track-mono-xwide:    0.25em;    /* hero eyebrows */
  --sl-track-mono-max:      0.30em;    /* taglines under logo */

  /* Line-heights */
  --sl-lh-display:  0.95;
  --sl-lh-head:     1.1;
  --sl-lh-body:     1.55;
  --sl-lh-tight:    1.3;

  /* Type scale (px) — 8pt base with display jumps */
  --sl-fs-mono-xs:   10px;
  --sl-fs-mono-sm:   11px;
  --sl-fs-mono:      12px;
  --sl-fs-mono-lg:   13px;

  --sl-fs-body-sm:   14px;
  --sl-fs-body:      16px;  /* minimum for web body */
  --sl-fs-body-lg:   18px;
  --sl-fs-lead:      20px;

  --sl-fs-h5:        22px;
  --sl-fs-h4:        28px;
  --sl-fs-h3:        36px;
  --sl-fs-h2:        48px;
  --sl-fs-h1:        64px;
  --sl-fs-display:   88px;

  /* ========================================================================
     SPACING — 4pt base scale
     ======================================================================== */
  --sl-sp-0:  0;
  --sl-sp-1:  4px;
  --sl-sp-2:  8px;
  --sl-sp-3:  12px;
  --sl-sp-4:  16px;
  --sl-sp-5:  20px;
  --sl-sp-6:  24px;
  --sl-sp-8:  32px;
  --sl-sp-10: 40px;
  --sl-sp-12: 48px;
  --sl-sp-16: 64px;
  --sl-sp-20: 80px;
  --sl-sp-24: 96px;

  /* ========================================================================
     RADII — restrained. Logo stages & panels are gently rounded.
     ======================================================================== */
  --sl-r-xs:   4px;
  --sl-r-sm:   8px;
  --sl-r-md:   12px;
  --sl-r-lg:   14px;   /* logo stages */
  --sl-r-xl:   18px;
  --sl-r-2xl:  24px;   /* large panels */
  --sl-r-pill: 999px;

  /* ========================================================================
     SHADOWS & ELEVATION
     The brand is dark-mode-native — prefer borders + subtle inner highlights
     over heavy drop shadows. Elevation comes from surface color, not blur.
     ======================================================================== */
  --sl-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --sl-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35);
  --sl-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.45);
  --sl-ring-accent: 0 0 0 1px var(--sl-brass-30), 0 0 0 4px rgba(200, 155, 92, 0.08);
  --sl-ring-focus:  0 0 0 2px var(--sl-brass);

  /* ========================================================================
     MOTION — minimal, purposeful. No bounces. Linear or subtle ease.
     ======================================================================== */
  --sl-dur-fast:   120ms;
  --sl-dur-base:   180ms;
  --sl-dur-slow:   280ms;
  --sl-ease:       cubic-bezier(0.2, 0, 0.2, 1);
  --sl-ease-out:   cubic-bezier(0, 0, 0.2, 1);
}

/* ============================================================================
   SEMANTIC CLASSES & ELEMENT DEFAULTS
   Use these so marks compose correctly without re-remembering weights.
   ============================================================================ */

/* Base page */
.sl-root,
.sl-page {
  background: var(--sl-bg);
  color: var(--sl-fg);
  font-family: var(--sl-font-body);
  font-size: var(--sl-fs-body);
  line-height: var(--sl-lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Display / headlines — Archivo Black, tight, often uppercase */
.sl-display {
  font-family: var(--sl-font-display);
  font-weight: var(--sl-w-black);
  font-size: var(--sl-fs-display);
  line-height: var(--sl-lh-display);
  letter-spacing: var(--sl-track-display-tight);
}
.sl-h1, h1.sl {
  font-family: var(--sl-font-display);
  font-weight: var(--sl-w-black);
  font-size: var(--sl-fs-h1);
  line-height: var(--sl-lh-display);
  letter-spacing: var(--sl-track-display-tight);
  text-transform: uppercase;
}
.sl-h2, h2.sl {
  font-family: var(--sl-font-display);
  font-weight: var(--sl-w-heavy);
  font-size: var(--sl-fs-h2);
  line-height: var(--sl-lh-head);
  letter-spacing: var(--sl-track-display);
  text-transform: uppercase;
}
.sl-h3, h3.sl {
  font-family: var(--sl-font-display);
  font-weight: var(--sl-w-heavy);
  font-size: var(--sl-fs-h3);
  line-height: var(--sl-lh-head);
  letter-spacing: var(--sl-track-head);
}
.sl-h4, h4.sl {
  font-family: var(--sl-font-display);
  font-weight: var(--sl-w-heavy);
  font-size: var(--sl-fs-h4);
  line-height: var(--sl-lh-head);
  letter-spacing: var(--sl-track-head);
}
.sl-h5, h5.sl {
  font-family: var(--sl-font-display);
  font-weight: var(--sl-w-heavy);
  font-size: var(--sl-fs-h5);
  line-height: var(--sl-lh-tight);
  letter-spacing: var(--sl-track-head);
}

/* Body */
.sl-lead {
  font-family: var(--sl-font-body);
  font-size: var(--sl-fs-lead);
  line-height: var(--sl-lh-body);
  color: var(--sl-fg);
  font-weight: var(--sl-w-body);
}
.sl-body, p.sl {
  font-family: var(--sl-font-body);
  font-size: var(--sl-fs-body);
  line-height: var(--sl-lh-body);
  color: var(--sl-fg);
  font-weight: var(--sl-w-body);
}
.sl-small {
  font-size: var(--sl-fs-body-sm);
  color: var(--sl-fg-muted);
}
.sl-caption {
  font-size: var(--sl-fs-body-sm);
  color: var(--sl-fg-subtle);
}

/* Label — JetBrains Mono, uppercase, wide tracking. Eyebrows & metadata. */
.sl-label,
.sl-eyebrow {
  font-family: var(--sl-font-mono);
  font-weight: var(--sl-w-mono);
  font-size: var(--sl-fs-mono-sm);
  letter-spacing: var(--sl-track-mono-wide);
  text-transform: uppercase;
  color: var(--sl-fg-subtle);
}
.sl-eyebrow--accent { color: var(--sl-brass); }

/* Code / inline mono */
code.sl, .sl-code {
  font-family: var(--sl-font-mono);
  font-size: 0.9em;
  color: var(--sl-fg-muted);
}

/* Accent mark — a single Brass word in a headline */
.sl-accent-word { color: var(--sl-brass); }

/* ============================================================================
   LOGO MARK — the bracketed wordmark
   Use <span class="sl-logo sl-logo--horizontal">[Sam Lawson]</span>
   or compose with .sl-bracket spans for precise control.
   ============================================================================ */
.sl-logo {
  font-family: var(--sl-font-display);
  font-weight: var(--sl-w-black);
  letter-spacing: var(--sl-track-display-tight);
  line-height: 0.95;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  color: inherit;
}
.sl-logo .sl-bracket {
  color: var(--sl-brass);
  font-weight: var(--sl-w-brackets); /* 400 — the signature move */
  margin: 0 0.12em;
}
.sl-logo--stacked {
  flex-direction: column;
  gap: 0.35em;
  align-items: center;
}
.sl-logo--stacked .sl-logo__tagline {
  font-family: var(--sl-font-mono);
  font-size: 0.24em;
  font-weight: var(--sl-w-mono);
  letter-spacing: var(--sl-track-mono-max);
  text-transform: uppercase;
  opacity: 0.55;
}