/* ============================================================================
   llmax.ai — Design tokens
   Production-ready CSS variables + base utilities, derived from DESIGN.md.
   Single importable file:  <link rel="stylesheet" href="tokens.css">

   Sections: fonts · color · typography · spacing/layout · radii · borders ·
   shadows · motion (easing + durations) · reset · base utilities.
   ============================================================================ */

/* Webfonts — BDO Grotesk (display) + Inter Display (body). Self-contained:
   the woff/otf/ttf files live in ./assets/fonts/. */
@font-face { font-family: "BDO Grotesk";   src: url("assets/fonts/BDOGrotesk-Regular.otf")  format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "BDO Grotesk";   src: url("assets/fonts/BDOGrotesk-Medium.otf")   format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "BDO Grotesk";   src: url("assets/fonts/BDOGrotesk-Bold.otf")     format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Display"; src: url("assets/fonts/InterDisplay-Regular.ttf")  format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Display"; src: url("assets/fonts/InterDisplay-Medium.ttf")   format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Display"; src: url("assets/fonts/InterDisplay-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Display"; src: url("assets/fonts/InterDisplay-Bold.ttf")     format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }

/* ============================== TOKENS ================================= */
:root {
  /* ---- Color · base palette (light) ---- */
  --color-classic-white: #fbfaf9;  /* page background (warm off-white) */
  --color-carbon:        #262626;  /* primary ink */
  --color-eerie-black:   #1a1a1a;  /* darkest surfaces (terminal, dark blocks) */
  --color-secondary:     #676767;  /* muted text */
  --color-white:         #ffffff;  /* elevated surfaces */
  --color-bold-grey:     #ebebeb;  /* strokes / hairlines */
  --color-concrete:      #f2f2f2;  /* subtle card fill */
  --color-off-white:     #f0f0f0;  /* ink on dark buttons */
  --color-endeavour:     #0054a7;  /* accent — Endeavour blue */
  --color-error:         #d64545;
  --color-success:       #2f855a;

  /* ---- Color · semantic aliases (resolve lazily → follow the theme) ---- */
  --bg-page:        var(--color-classic-white);
  --bg-dark:        var(--color-eerie-black);
  --surface-card:   var(--color-white);
  --surface-subtle: var(--color-concrete);
  --text-primary:   var(--color-carbon);
  --text-secondary: var(--color-secondary);
  --text-on-dark:   var(--color-off-white);
  --stroke:         var(--color-bold-grey);
  --stroke-dashed:  #b3b3b3;       /* dashed footer hairlines (brand motif) */
  --accent:         var(--color-endeavour);

  /* ---- Typography · families ---- */
  --font-display: "BDO Grotesk", Arial, sans-serif;  /* h1/h2 only */
  --font-body:    "Inter Display", Arial, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ---- Typography · weights ---- */
  --weight-regular:  400;
  --weight-medium:   500;   /* default for all headings */
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ---- Typography · scale (size / line) ---- */
  --text-h1-size: 48px;  --text-h1-line: 56px;
  --text-h2-size: 36px;  --text-h2-line: 44px;
  --text-h3-size: 24px;  --text-h3-line: 32px;
  --text-h4-size: 20px;  --text-h4-line: 28px;
  --text-h5-size: 20px;  --text-h5-line: 26px;
  --text-h6-size: 18px;  --text-h6-line: 26px;
  --text-body-size:  16px;  --text-body-line:  24px;
  --text-small-size: 14px;  --text-small-line: 20px;
  /* Fluid hero override (used by .hero h1) */
  --text-hero-size: clamp(38px, 6vw, 60px);

  /* ---- Typography · tracking (tightens as size grows) ---- */
  --tracking-h1: -0.05em;
  --tracking-h2: -0.03em;
  --tracking-h3: -0.02em;
  --tracking-h4: -0.01em;

  /* ---- Spacing · 4px base scale ---- */
  --space-1: 4px;    --space-2: 8px;    --space-3: 12px;   --space-4: 16px;
  --space-5: 20px;   --space-6: 24px;   --space-7: 28px;   --space-8: 32px;
  --space-9: 36px;   --space-10: 40px;  --space-12: 48px;  --space-14: 56px;
  --space-16: 64px;  --space-20: 80px;

  /* ---- Layout · section rhythm & containers ---- */
  --section-pad:    100px;   /* top padding of a section */
  --section-pad-lg: 160px;   /* bottom of hero / final sections */
  --section-gap:    120px;
  --container:      1192px;  /* default content width */
  --container-wide: 1360px;
  --container-nav:  1384px;
  --container-pad:  20px;    /* horizontal gutter */

  /* ---- Radii ---- */
  --radius-xs:  4px;
  --radius-sm:  6px;    /* inputs */
  --radius-md:  8px;    /* inner/small cards, terminal */
  --radius-lg:  12px;   /* panels, tables */
  --radius-xl:  16px;   /* feature/CTA cards */
  --radius-2xl: 20px;
  --radius-3xl: 24px;
  --radius-pill: 100px; /* buttons, tags, badges */

  /* ---- Borders ---- */
  --border-hairline: 1px solid var(--stroke);
  --border-dashed:   1px dashed var(--stroke-dashed);

  /* ---- Shadows (system is near-flat — hierarchy comes from fill + stroke) ---- */
  --shadow-none: none;
  --shadow-sm:   0 1px 2px rgba(38, 38, 38, 0.06);
  --shadow-card: 0 8px 24px rgba(38, 38, 38, 0.08);   /* reserve for overlays/menus */

  /* ---- Motion · easing curves ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);   /* default in/out */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);  /* entrances */
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);

  /* ---- Motion · durations ---- */
  --duration-fast: 0.15s;
  --duration:      0.3s;    /* default hover/color crossfade */
  --duration-slow: 0.5s;    /* entrance reveals */

  /* ---- Layering ---- */
  --z-header: 50;
  --z-menu:   40;
}

/* Dark theme — opt-in via [data-theme="dark"]. Only the base palette is
   remapped; every semantic alias above follows automatically. */
:root[data-theme="dark"] {
  --color-classic-white: #0f1216;
  --color-carbon:        #e9e9e7;
  --color-eerie-black:   #05070a;
  --color-secondary:     #9aa1ab;
  --color-white:         #191d24;
  --color-bold-grey:     #2b323c;
  --color-concrete:      #161a20;
  --color-off-white:     #0f1216;
  --color-endeavour:     #4d97e6;
  --stroke-dashed:       #3a424d;
  color-scheme: dark;
}

/* ============================== RESET ================================= */
* { box-sizing: border-box; }

body {
  margin: 0;
  background-color: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  line-height: var(--text-body-line);
  font-weight: var(--weight-regular);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: var(--weight-medium); }
h1 { font-family: var(--font-display); font-size: var(--text-h1-size); line-height: var(--text-h1-line); letter-spacing: var(--tracking-h1); }
h2 { font-family: var(--font-display); font-size: var(--text-h2-size); line-height: var(--text-h2-line); letter-spacing: var(--tracking-h2); }
h3 { font-family: var(--font-body); font-size: var(--text-h3-size); line-height: var(--text-h3-line); letter-spacing: var(--tracking-h3); }
h4 { font-family: var(--font-body); font-size: var(--text-h4-size); line-height: var(--text-h4-line); letter-spacing: var(--tracking-h4); }
h5 { font-family: var(--font-body); font-size: var(--text-h5-size); line-height: var(--text-h5-line); }
h6 { font-family: var(--font-body); font-size: var(--text-h6-size); line-height: var(--text-h6-line); }

p { margin: 0; }

a {
  color: var(--text-primary);
  font-family: var(--font-body);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color var(--duration);
}
a:hover { color: var(--text-secondary); }

img { max-width: 100%; vertical-align: middle; }

/* ========================== BASE UTILITIES =========================== */

/* Layout */
.container      { max-width: var(--container);      margin-inline: auto; padding-inline: var(--container-pad); }
.container-wide { max-width: var(--container-wide);  margin-inline: auto; padding-inline: var(--container-pad); }
.container-nav  { max-width: var(--container-nav);   margin-inline: auto; padding: var(--space-4) var(--container-pad) var(--space-3); }
.section        { padding-top: var(--section-pad); }
.center         { max-width: 640px; margin-inline: auto; text-align: center; }
.muted          { color: var(--text-secondary); }
.eyebrow        { font: var(--weight-medium) var(--text-small-size)/var(--text-small-line) var(--font-body);
                  text-transform: uppercase; letter-spacing: 0.02em; color: var(--text-secondary); }

@media (max-width: 600px) { .section { padding-top: var(--space-16); } }

/* Card — flat fill, no border, no shadow */
.card {
  background: var(--surface-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  height: 100%;
}

/* Pill button */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: 10px 24px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font: var(--weight-medium) var(--text-small-size)/var(--text-small-line) var(--font-body);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: color var(--duration), background-color var(--duration), border-color var(--duration);
}
.btn-primary   { background: var(--color-carbon); color: var(--color-off-white); }
.btn-primary:hover   { background: var(--color-off-white); color: var(--color-carbon); border-color: var(--color-bold-grey); }
.btn-secondary { background: var(--color-classic-white); color: var(--color-carbon); border-color: var(--color-bold-grey); }
.btn-secondary:hover { background: var(--color-carbon); color: var(--color-off-white); border-color: var(--color-carbon); }
.btn-subtle    { background: var(--color-concrete); color: var(--color-carbon); border-color: var(--color-bold-grey); }
.btn-subtle:hover    { background: var(--color-carbon); color: var(--color-white); border-color: var(--color-carbon); }
.btn-sm   { padding: 6px 16px; }
.btn-full { display: flex; width: 100%; }

/* Tags */
.pill {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 4px 12px; border-radius: var(--radius-pill);
  border: 1px solid var(--stroke); background: var(--color-white);
  font: var(--weight-medium) var(--text-small-size)/var(--text-small-line) var(--font-body);
  color: var(--text-primary);
}
.pill-soft   { background: var(--color-concrete); }
.pill-accent { border-color: var(--accent); color: var(--accent); background: transparent; }
.badge {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 6px 14px; border-radius: var(--radius-pill);
  border: 1px solid var(--stroke); background: var(--color-white);
  font: var(--weight-medium) var(--text-small-size)/var(--text-small-line) var(--font-body);
  color: var(--text-secondary);
}

/* Entrance animation — fade + rise. Add .enter to any element revealed on load
   or scroll. Stagger with inline `style="--enter-delay: 80ms"`. */
@keyframes enter {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.enter {
  animation: enter var(--duration-slow) var(--ease-out) both;
  animation-delay: var(--enter-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  .enter { animation: none; }
  * { scroll-behavior: auto; }
}