/* ============================================================
   Altitude Design System — tokens
   Source of truth: joebrashear100/joebrashear-dev/index.html
   ============================================================ */

/* Local variable fonts — single-file all-weight coverage.
   Inter (rsms/inter) and JetBrains Mono (JetBrains/JetBrainsMono)
   both ship official woff2 variable builds. We use those rather than
   loading from Google Fonts, so the system works offline. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/InterVariable.woff2') format('woff2-variations'),
       url('fonts/InterVariable.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/InterVariable-Italic.woff2') format('woff2-variations'),
       url('fonts/InterVariable-Italic.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('fonts/JetBrainsMono-Variable.woff2') format('woff2-variations'),
       url('fonts/JetBrainsMono-Variable.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: italic;
  font-weight: 100 800;
  font-display: swap;
  src: url('fonts/JetBrainsMono-Variable-Italic.woff2') format('woff2-variations'),
       url('fonts/JetBrainsMono-Variable-Italic.woff2') format('woff2');
}

:root {
  /* ---- Surfaces ---- */
  --bg:           #FAFAF7;  /* warm off-white — paper */
  --surface:      #FFFFFF;
  --surface-2:    #F1EFE8;  /* slightly warmer sunken surface */

  /* ---- Borders (0.5px is the rule) ---- */
  --border:         rgba(0,0,0,0.08);
  --border-strong:  rgba(0,0,0,0.16);

  /* ---- Text ---- */
  --text:           #1A1A18;  /* near-black, warm */
  --text-secondary: #5F5E5A;
  --text-tertiary:  #9A998F;

  /* ---- Accents ---- */
  --accent:       #BA7517;    /* amber — the only real color */
  --accent-soft:  #FAEEDA;    /* amber wash for badges/pills */
  --live:         #1D9E75;    /* green — reserved for live/passing */

  /* ---- Type families ---- */
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* @kind font */
  --sans: 'Inter', system-ui, -apple-system, sans-serif; /* @kind font */

  /* ---- Type scale (prose / Inter) ---- */
  --fs-display:   54px;   /* hero h1 */
  --fs-h2:        26px;   /* section heads */
  --fs-h3:        20px;   /* card titles */
  --fs-h4:        16px;   /* work-row titles */
  --fs-body:      15px;   /* body */
  --fs-lede:      17px;   /* hero lede */
  --fs-small:     14px;
  --fs-xs:        13px;
  --lh-tight:     1.05; /* @kind font */
  --lh-prose:     1.55; /* @kind font */
  --tracking-display: -1.5px;
  --tracking-h2:      -0.5px;

  /* ---- Type scale (data / JetBrains Mono) — UPPERCASE labels ---- */
  --fs-stat-xl:   38px;   /* impact numbers */
  --fs-stat:      30px;   /* signal-panel numbers */
  --fs-mono:      12px;   /* nav, buttons, body mono */
  --fs-mono-sm:   11px;   /* metadata, captions */
  --fs-mono-xs:   10.5px; /* pills, pr-repo */
  --tracking-label: 1.2px;
  --tracking-caption: 1px;

  /* ---- Radii ---- */
  --radius-sm: 4px;   /* pills, badges */
  --radius-md: 6px;   /* buttons, theme toggle */
  --radius-lg: 10px;  /* panels, terminal */
  --radius-xl: 12px;  /* project cards */

  /* ---- Spacing (tight by default) ---- */
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 10px;
  --space-5: 14px;
  --space-6: 18px;
  --space-7: 24px;
  --space-8: 32px;
  --space-9: 48px;
  --space-10: 72px;

  /* ---- Section rhythm ---- */
  --section-pad-y: 56px;
  --container-max: 1180px;
  --container-pad: 32px;

  /* ---- Motion ---- */
  --t-fast: 0.15s; /* @kind other */
  --t-base: 0.2s; /* @kind other */
  --ease:   cubic-bezier(.4,0,.2,1); /* @kind other */

  /* ---- Elevation (used sparingly — borders carry most weight) ---- */
  --shadow-hover: 0 4px 14px rgba(0,0,0,0.04);
  --glow-live:    0 0 6px var(--live);
}

[data-theme="dark"] {
  --bg:           #0E0E0C;
  --surface:      #161614;
  --surface-2:    #1F1F1C;
  --border:         rgba(255,255,255,0.08);
  --border-strong:  rgba(255,255,255,0.16);
  --text:           #F1EFE8;
  --text-secondary: #9A998F;
  --text-tertiary:  #5F5E5A;
  --accent:         #EF9F27;
  --accent-soft:    rgba(239, 159, 39, 0.12);
  --live:           #5DCAA5;
}

/* ============================================================
   Semantic element styles — apply to bare HTML elements when
   a stylesheet is wired up. Components can extend these.
   ============================================================ */

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: var(--lh-prose);
  -webkit-font-smoothing: antialiased;
}

h1 {
  font-family: var(--sans);
  font-size: var(--fs-display);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  margin: 0 0 20px;
}
h2 {
  font-family: var(--sans);
  font-size: var(--fs-h2);
  font-weight: 500;
  letter-spacing: var(--tracking-h2);
  margin: 0;
}
h3 {
  font-family: var(--sans);
  font-size: var(--fs-h3);
  font-weight: 500;
  letter-spacing: -0.3px;
  margin: 0;
}
p { margin: 0 0 16px; }

code, pre, kbd, samp {
  font-family: var(--mono);
  font-size: 0.95em;
}

/* Mono labels — the system's signature treatment.
   Use for nav links, section meta, panel headers, pill tags,
   timestamps, stat captions. Always lowercase OR UPPERCASE
   per the convention; never mixed-case mono. */
.mono-label {
  font-family: var(--mono);
  font-size: var(--fs-mono-sm);
  color: var(--text-tertiary);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.mono-caption {
  font-family: var(--mono);
  font-size: var(--fs-mono-sm);
  color: var(--text-tertiary);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
}
.mono-inline {
  font-family: var(--mono);
  font-size: var(--fs-mono);
  color: var(--text-secondary);
}

/* Stat/number treatment — always mono, slight negative tracking */
.stat {
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: -0.5px;
  line-height: 1;
}

/* Cards & panels share this base */
.panel-base {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
}