/* a13e Design System — base tokens (production port)
 * Ported from a13e Design System/colors_and_type.css
 * Changes from source:
 *   1. Removed `@import url('https://fonts.googleapis.com/...')` (CSP `font-src 'self'`)
 *   2. Added @font-face rules pointing to self-hosted /fonts/*.woff2
 */

/* -------- Self-hosted fonts (latin subset) -------- */

@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/inter-tight-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/inter-tight-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/inter-tight-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/inter-tight-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/inter-tight-800.woff2') format('woff2');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-500.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/cormorant-garamond-500-italic.woff2') format('woff2');
}

:root {
  /* -------- Colour: neutrals (dark-first) -------- */
  --ink:        #0B0E13;
  --char:       #15181F;
  --slate-900:  #1C2029;
  --slate-800:  #262B35;
  --slate-700:  #3A414E;
  --slate-600:  #525A69;
  --slate-500:  #6B7280;
  --slate-400:  #8D94A0;
  --slate-300:  #B7BDC7;
  --slate-200:  #D7DBE2;
  --slate-100:  #ECEEF2;

  /* -------- Colour: paper (warm off-white, editorial) -------- */
  --paper:      #F4F2ED;
  --paper-2:    #E8E4DA;
  --paper-3:    #D6D1C4;

  /* -------- Colour: accents -------- */
  --accent:     #C6FF3D;
  --accent-ink: #0B0E13;
  --accent-2:   #7C5CFF;

  /* -------- Semantic -------- */
  --danger:     #E2504B;
  --warn:       #E4A11B;
  --ok:         #3DB07E;
  --info:       #4A9BDE;

  /* -------- Foreground / background aliases -------- */
  --bg:         var(--paper);
  --bg-elev:    var(--paper-2);
  --fg-1:       var(--ink);
  --fg-2:       var(--slate-700);
  --fg-3:       var(--slate-500);
  --hairline:   var(--paper-3);

  /* Dark-mode aliases; flip by setting [data-theme="dark"] on the element */
  --bg-dark:       var(--ink);
  --bg-dark-elev:  var(--char);
  --fg-dark-1:     #F4F2ED;
  --fg-dark-2:     var(--slate-300);
  --fg-dark-3:     var(--slate-500);
  --hairline-dark: var(--slate-800);

  /* -------- Type -------- */
  --font-sans:    'Inter Tight', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-serif:   'Cormorant Garamond', 'EB Garamond', Georgia, serif;

  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-28: 28px;
  --fs-32: 32px;
  --fs-40: 40px;
  --fs-56: 56px;
  --fs-80: 80px;

  --lh-tight:  1.08;
  --lh-snug:   1.25;
  --lh-base:   1.55;
  --lh-loose:  1.75;

  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-base:    0em;
  --tracking-wide:    0.08em;
  --tracking-mono:    0em;

  /* -------- Space (4 px base) -------- */
  --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;

  /* -------- Radius -------- */
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;
  --r-4: 12px;

  /* -------- Shadow -------- */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(11,14,19,.06);
  --shadow-2: 0 1px 2px rgba(11,14,19,.08), 0 8px 24px rgba(11,14,19,.04);
  --shadow-pop: 0 12px 32px rgba(11,14,19,.18);

  /* -------- Motion -------- */
  --ease-std:   cubic-bezier(.2,.6,.2,1);
  --ease-out:   cubic-bezier(.16,1,.3,1);
  --dur-1:      120ms;
  --dur-2:      180ms;
  --dur-3:      240ms;

  /* -------- Layout -------- */
  --measure:    68ch;
  --gutter:     24px;
  --page-pad:   72px;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-base);
  font-feature-settings: 'ss01', 'cv11';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-size: var(--fs-56);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 700;
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
}
h2, .h2 {
  font-size: var(--fs-40);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  font-weight: 600;
  margin: 0 0 var(--sp-3);
  text-wrap: balance;
}
h3, .h3 {
  font-size: var(--fs-32);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  font-weight: 600;
  margin: 0 0 var(--sp-3);
}
h4, .h4 {
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  font-weight: 600;
  margin: 0 0 var(--sp-2);
}
.display {
  font-size: var(--fs-80);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 800;
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-3);
}
.lede {
  font-size: var(--fs-18);
  line-height: var(--lh-base);
  color: var(--fg-2);
  max-width: var(--measure);
  text-wrap: pretty;
}
p, .p {
  font-size: var(--fs-16);
  line-height: var(--lh-base);
  color: var(--fg-2);
  max-width: var(--measure);
  text-wrap: pretty;
}
small, .small { font-size: var(--fs-13); color: var(--fg-3); }

code, kbd, samp, .mono {
  font-family: var(--font-mono);
  font-size: .95em;
  letter-spacing: var(--tracking-mono);
}
.motto {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-20);
  letter-spacing: .02em;
  color: var(--fg-2);
}

.wordmark {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: -0.03em;
  text-transform: lowercase;
}
.wordmark .n13 { font-feature-settings: 'tnum'; }

hr, .rule {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: var(--sp-8) 0;
}

a {
  color: inherit;
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
  transition: color var(--dur-2) var(--ease-std);
}
a:hover { text-decoration-color: currentColor; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-1);
}

[data-theme="dark"], .on-ink {
  background: var(--bg-dark);
  color: var(--fg-dark-1);
  --bg: var(--bg-dark);
  --bg-elev: var(--bg-dark-elev);
  --fg-1: var(--fg-dark-1);
  --fg-2: var(--fg-dark-2);
  --fg-3: var(--fg-dark-3);
  --hairline: var(--hairline-dark);
}