/* ───────────────────────────────────────────────────────────────
   Neil Kaji — Colors & Type
   Single source of truth for color + typographic foundations.
   Plus Jakarta Sans (variable) loaded from Google Fonts.
   ─────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300..800;1,300..800&display=swap');

:root {
  /* ─── Primary — terracotta ─── */
  --color-primary-50:  #FBF0EB;
  --color-primary-100: #F5D9CE;
  --color-primary-200: #EBB09D;
  --color-primary-300: #DE856C;
  --color-primary-400: #D4613F;  /* hover */
  --color-primary-500: #C4532B;  /* THE primary */
  --color-primary-600: #A84322;  /* pressed / focus */
  --color-primary-700: #8B341A;
  --color-primary-800: #6E2613;
  --color-primary-900: #50190C;

  /* ─── Surface ─── */
  --color-surface-canvas: #F6F0E8;  /* page bg — always */
  --color-surface-1:      #EDE5D8;  /* cards, panels, inputs */
  --color-surface-2:      #E2D8C8;  /* nested cards, code, hover */
  --color-surface-border: #D4C9B5;  /* dividers, borders, rules */

  /* ─── Ink (text) ─── */
  --color-ink-primary:   #1A1612;   /* headlines, primary body */
  --color-ink-secondary: #5C5047;   /* supporting copy */
  --color-ink-muted:     #9C8B7A;   /* captions, metadata, placeholder */
  --color-ink-inverse:   #F6F0E8;   /* text on dark / primary */
  --color-ink-accent:    #C4532B;   /* inline emphasis, links */

  /* ─── Feedback ─── */
  --color-success: #3A7D44;
  --color-warning: #B87332;
  --color-error:   #B83232;
  --color-info:    #2E6A9E;

  /* ─── Type family — one only ─── */
  --font-base: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;

  /* ─── Type scale (sizes) ─── */
  --text-display: 4rem;      /* 64px — hero statements */
  --text-h1:      3rem;      /* 48px — page headings */
  --text-h2:      2rem;      /* 32px — section headings */
  --text-h3:      1.375rem;  /* 22px — card titles */
  --text-body:    1rem;      /* 16px — all body copy */
  --text-small:   0.8125rem; /* 13px — captions, metadata */

  /* ─── Weights ─── */
  --font-regular:  400;  /* body, captions */
  --font-medium:   500;  /* UI labels, nav, button text */
  --font-semibold: 600;  /* h3, strong emphasis */
  --font-bold:     700;  /* display, h1, h2 */

  /* ─── Line height ─── */
  --leading-tight:   1.1;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  /* ─── Tracking ─── */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.08em;
  --tracking-wider:   0.14em;  /* overlines */

  /* ─── Semantic type roles ─── */
  /* Display — hero statements */
  --display-size:    var(--text-display);
  --display-weight:  var(--font-bold);
  --display-leading: var(--leading-tight);
  --display-track:   var(--tracking-tight);

  /* H1 */
  --h1-size:    var(--text-h1);
  --h1-weight:  var(--font-bold);
  --h1-leading: var(--leading-tight);
  --h1-track:   var(--tracking-tight);

  /* H2 */
  --h2-size:    var(--text-h2);
  --h2-weight:  var(--font-bold);
  --h2-leading: var(--leading-snug);
  --h2-track:   var(--tracking-tight);

  /* H3 — card titles */
  --h3-size:    var(--text-h3);
  --h3-weight:  var(--font-semibold);
  --h3-leading: var(--leading-snug);
  --h3-track:   -0.01em;

  /* Body */
  --body-size:    var(--text-body);
  --body-weight:  var(--font-regular);
  --body-leading: var(--leading-relaxed);

  /* Small / caption */
  --small-size:    var(--text-small);
  --small-weight:  var(--font-regular);
  --small-leading: var(--leading-normal);

  /* Overline — uppercase label, ≤3 words */
  --overline-size:   var(--text-small);
  --overline-weight: var(--font-medium);
  --overline-track:  var(--tracking-wider);
}

/* ───────────────────────────────────────────────────────────────
   Semantic element defaults — apply automatically.
   ─────────────────────────────────────────────────────────────── */

html {
  font-family: var(--font-base);
  font-size: 16px;
  background-color: var(--color-surface-canvas);
  color: var(--color-ink-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-base);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink-primary);
  margin: 0;
}

h1 { font-size: var(--h1-size); }
h2 { font-size: var(--h2-size); line-height: var(--leading-snug); }
h3 {
  font-size: var(--h3-size);
  font-weight: var(--font-semibold);
  line-height: var(--leading-snug);
  letter-spacing: -0.01em;
}

p {
  font-size: var(--body-size);
  line-height: var(--body-leading);
  color: var(--color-ink-secondary);
  margin: 0;
}

a {
  color: var(--color-primary-500);
  text-decoration: none;
  transition: color 160ms cubic-bezier(0, 0, 0.2, 1);
}
a:hover { color: var(--color-primary-600); }

small {
  font-size: var(--small-size);
  line-height: var(--small-leading);
  color: var(--color-ink-muted);
}

/* Overline utility — uppercase, wide tracking, ≤3 words */
.overline {
  font-size: var(--overline-size);
  font-weight: var(--font-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-ink-muted);
}