/* ============================================================
   Taylor Major — Design System
   colors_and_type.css

   Drop this file into any HTML and you'll have the full token
   system available as CSS custom properties, plus semantic
   element styles (h1..h6, p, small, code, etc.).
   ============================================================ */

/* ---------- Fonts ---------------------------------------------
   Self-hosted woff2 — no Google Fonts dependency.
   Variable fonts (Geist, JetBrains Mono) cover the full weight
   range in a single file each.
----------------------------------------------------------------- */

/* Instrument Serif — static 400 normal + italic */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrument-serif.woff2") format('woff2');
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrument-serif-italic.woff2") format('woff2');
}

/* Geist — variable, 100–900 */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/geist.woff2") format('woff2-variations');
}
@font-face {
  font-family: 'Geist';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/geist-italic.woff2") format('woff2-variations');
}

/* JetBrains Mono — variable, 100–800 */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("../fonts/jetbrains-mono.woff2") format('woff2-variations');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: italic;
  font-weight: 100 800;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-italic.woff2") format('woff2-variations');
}

/* ============================================================
   Tokens — :root
   ============================================================ */
:root {
  /* ---------- Color: brand core ---------- */
  --ink:        #0D0E12;       /* primary text, statement surfaces */
  --bone:       #F2EDE3;       /* primary background, warm cream */
  --paper:      #FBF8F2;       /* lifted surface, cards on bone */
  --signal:     #D4F23A;       /* THE accent — chartreuse highlighter */
  --signal-hover: #C4E12B;     /* press/hover for signal-filled surfaces */
  --clay:       #C24A2A;       /* secondary accent — burnt sienna */
  --clay-soft:  #E2A085;       /* clay tint for backgrounds, tags */
  --moss:       #1F3D2E;       /* tertiary — deep forest */

  /* ---------- Color: neutral scale (warm-leaning) ---------- */
  --slate-50:   #F7F4EE;
  --slate-100:  #ECE7DD;
  --slate-200:  #DAD3C5;
  --slate-300:  #BEB6A7;
  --slate-400:  #948C7E;
  --slate-500:  #6B6459;
  --slate-600:  #4D483F;
  --slate-700:  #2F2C26;
  --slate-800:  #1B1915;
  --slate-900:  #0D0E12;

  /* ---------- Color: semantic ---------- */
  --bg:          var(--bone);
  --bg-elevated: var(--paper);
  --bg-inverse:  var(--ink);

  --fg:          var(--ink);
  --fg-muted:    var(--slate-500);
  --fg-subtle:   var(--slate-400);
  --fg-inverse:  var(--bone);

  --border:        var(--slate-200);
  --border-strong: var(--ink);
  --border-subtle: var(--slate-100);

  --accent:        var(--signal);
  --accent-text:   var(--ink);     /* text on signal background */
  --accent-soft:   var(--clay);

  /* status — derived from palette, not invented */
  --success:     #3B7A4A;
  --success-bg:  #E4EDDC;
  --warn:        #C7861A;
  --warn-bg:     #F7E9CB;
  --error:       #B23B2B;
  --error-bg:    #F3D9D3;
  --info:        var(--moss);
  --info-bg:     #DDE6DF;

  /* ---------- Typography: families ---------- */
  --font-display: 'Instrument Serif', 'Times New Roman', Georgia, serif;
  --font-sans:    'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* ---------- Typography: weight ---------- */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ---------- Typography: scale (fluid) ----------
     Min viewport 360px, max viewport 1440px.
     Each step uses clamp(min, mid, max).
  ----------------------------------------------------- */
  --text-xs:  0.75rem;                                /* 12 */
  --text-sm:  0.875rem;                               /* 14 */
  --text-base: 1rem;                                  /* 16 */
  --text-md:  1.125rem;                               /* 18 */
  --text-lg:  clamp(1.25rem, 1.18rem + 0.36vw, 1.5rem);     /* 20 -> 24 */
  --text-xl:  clamp(1.5rem,  1.36rem + 0.71vw, 2rem);       /* 24 -> 32 */
  --text-2xl: clamp(2rem,    1.71rem + 1.43vw, 3rem);       /* 32 -> 48 */
  --text-3xl: clamp(2.75rem, 2.18rem + 2.86vw, 4.75rem);    /* 44 -> 76 */
  --text-4xl: clamp(3.5rem,  2.5rem + 5vw, 7rem);           /* 56 -> 112 */
  --text-5xl: clamp(4.5rem,  3rem + 7.5vw, 10rem);          /* 72 -> 160 */

  --leading-tight:  1.05;
  --leading-snug:   1.2;
  --leading-normal: 1.5;
  --leading-loose:  1.7;

  --tracking-tight:    -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.04em;
  --tracking-wider:    0.08em;   /* eyebrows, ALLCAPS */
  --tracking-widest:   0.16em;   /* tiny ALLCAPS labels */

  /* ---------- Spacing (4px base) ---------- */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   32px;
  --space-8:   48px;
  --space-9:   64px;
  --space-10:  96px;
  --space-11:  128px;
  --space-12:  192px;

  /* ---------- Radii ---------- */
  --radius-0:    0px;
  --radius-1:    4px;
  --radius-2:    8px;
  --radius-3:    12px;
  --radius-full: 999px;

  /* ---------- Shadow (warm-toned, low spread) ---------- */
  --shadow-1: 0 1px 2px rgba(13, 14, 18, 0.04),
              0 2px 6px rgba(13, 14, 18, 0.05);
  --shadow-2: 0 4px 10px rgba(13, 14, 18, 0.06),
              0 12px 24px rgba(13, 14, 18, 0.08);
  --shadow-3: 0 12px 24px rgba(13, 14, 18, 0.10),
              0 32px 64px rgba(13, 14, 18, 0.14);

  /* ring for focus */
  --ring-focus: 0 0 0 2px var(--ink), 0 0 0 4px rgba(212, 242, 58, 0.45);

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(0.2, 0.7, 0.2, 1);   /* @kind other */
  --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);   /* @kind other */
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);   /* @kind other */

  --dur-fast:    120ms;   /* @kind other */
  --dur-base:    240ms;   /* @kind other */
  --dur-slow:    480ms;   /* @kind other */

  /* ---------- Layout ---------- */
  --measure-prose: 64ch;    /* long-form paragraph max width */
  --container-sm:  640px;
  --container-md:  840px;
  --container-lg:  1080px;
  --container-xl:  1280px;
  --nav-h:         64px;
  --nav-h-scrolled: 56px;
}

/* ============================================================
   Resets & defaults
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  font-weight: var(--weight-regular);
  font-feature-settings: 'ss01', 'cv11';
}

/* ============================================================
   Semantic type — element-level
   ============================================================ */
h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
  margin: 0 0 var(--space-6);
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
  margin: 0 0 var(--space-5);
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  text-wrap: balance;
  margin: 0 0 var(--space-4);
}

h4, .h4 {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-normal);
  margin: 0 0 var(--space-3);
}

h5, .h5 {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  margin: 0 0 var(--space-2);
}

h6, .h6, .eyebrow {
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--fg-muted);
  margin: 0 0 var(--space-2);
}

p, .p {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-loose);
  color: var(--fg);
  text-wrap: pretty;
  max-width: var(--measure-prose);
  margin: 0 0 var(--space-5);
}

p.lead {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--fg);
  font-style: italic;
}

small, .small {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg-muted);
}

.caption {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--fg-muted);
}

a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(var(--signal), var(--signal));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 2px;
  transition: background-size var(--dur-base) var(--ease-out);
}
a:hover { background-size: 100% 2px; }
a:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
  border-radius: var(--radius-1);
}

code, .code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--slate-100);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-1);
}

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

blockquote {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-style: italic;
  line-height: var(--leading-snug);
  color: var(--fg);
  margin: var(--space-7) 0;
  padding-left: var(--space-6);
  border-left: 2px solid var(--signal);
  max-width: var(--measure-prose);
}

/* ============================================================
   Utility classes — keep small; tokens do the heavy lifting
   ============================================================ */
.display-1 { font-family: var(--font-display); font-size: var(--text-4xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
.display-2 { font-family: var(--font-display); font-size: var(--text-3xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
.mono      { font-family: var(--font-mono); }
.eyebrow   { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--fg-muted); }
.numerals  { font-feature-settings: 'tnum' 1, 'lnum' 1; }

.surface         { background: var(--bg); color: var(--fg); }
.surface-paper   { background: var(--bg-elevated); color: var(--fg); }
.surface-inverse { background: var(--bg-inverse); color: var(--fg-inverse); }

::selection {
  background: var(--signal);
  color: var(--ink);
}

body { background: var(--bone); }
  #root { min-height: 100vh; }
  /* Global helpers used inside JSX */
  .container { max-width: 1080px; margin: 0 auto; padding: 0 32px; }
  .container-narrow { max-width: 720px; margin: 0 auto; padding: 0 32px; }
  .container-wide { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
  @media (max-width: 720px) {
    .container, .container-narrow, .container-wide { padding: 0 20px; }
  }