/* ============================================================
   Xeit AI — Colors & Type
   ============================================================
   The voice is Baskerville. Display, body, UI: one family.
   Hierarchy comes from weight (400 / 700), italic, scale, and
   color — not from mixing typefaces.
   Substitution note: Adobe Baskerville is licensed; the open
   "Libre Baskerville" by Pablo Impallari is the closest free
   match and ships with this system. macOS users will fall
   through to Apple's Baskerville on `font-family` resolution.
   ============================================================ */

@font-face {
  font-family: "Libre Baskerville";
  src: url("./fonts/LibreBaskerville-Regular.woff2") format("woff2");
  font-weight: 400 700; /* file covers both; relies on synthesis at 700 */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Libre Baskerville";
  src: url("./fonts/LibreBaskerville-Italic.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* --------------------------------------------------------
     Color — neutral surfaces (warm-leaning greys)
     -------------------------------------------------------- */
  --xeit-ink-000: #141312;   /* deepest — panels-on-panels */
  --xeit-ink-050: #1a1917;   /* primary surface step-down */
  --xeit-ink-100: #1f1e1c;   /* PRIMARY APP BG (matches reference) */
  --xeit-ink-150: #26241f;   /* card raised on bg */
  --xeit-ink-200: #2e2b25;   /* card hover */
  --xeit-ink-300: #3a362e;   /* divider, faint stroke */
  --xeit-ink-400: #5a5448;   /* muted text on dark */
  --xeit-ink-500: #7d7665;   /* placeholder, captions */

  /* Cream/bone — the warm light palette */
  --xeit-bone-100: #f4f1e6;  /* hi-contrast text on dark */
  --xeit-bone-200: #e8e4d3;  /* default body text on dark */
  --xeit-bone-300: #d1cfc0;  /* light surface bg (footer) */
  --xeit-bone-400: #b8b4a3;  /* secondary text on light */
  --xeit-bone-500: #8d8978;  /* tertiary text on light */

  /* --------------------------------------------------------
     Color — the single accent
     One colour does all the heavy lifting: italic emphasis,
     links, focus rings, the logo. Use sparingly.
     -------------------------------------------------------- */
  --xeit-coral-300: #f4a48a; /* hover / hairline glow */
  --xeit-coral-400: #ef7d5e; /* PRIMARY accent */
  --xeit-coral-500: #d65a3a; /* pressed / on-light variant */
  --xeit-coral-700: #8a3320; /* deep — only for tinted bg blocks */

  /* Painterly secondary — used in imagery, charts, never UI chrome */
  --xeit-moss:  #6b7a4a;
  --xeit-ochre: #b8884a;
  --xeit-slate: #4a5a6a;
  --xeit-clay:  #9a5a3a;

  /* --------------------------------------------------------
     Color — semantic
     -------------------------------------------------------- */
  --xeit-bg:           var(--xeit-ink-100);
  --xeit-bg-raised:    var(--xeit-ink-150);
  --xeit-bg-overlay:   rgba(31, 30, 28, 0.72);
  --xeit-bg-light:     var(--xeit-bone-300);

  --xeit-fg:           var(--xeit-bone-200);
  --xeit-fg-strong:    var(--xeit-bone-100);
  --xeit-fg-muted:     var(--xeit-ink-400);
  --xeit-fg-on-light:  var(--xeit-ink-100);
  --xeit-fg-on-light-muted: var(--xeit-bone-500);

  --xeit-accent:       var(--xeit-coral-400);
  --xeit-accent-hover: var(--xeit-coral-300);
  --xeit-accent-press: var(--xeit-coral-500);

  --xeit-border:       rgba(232, 228, 211, 0.10);
  --xeit-border-strong:rgba(232, 228, 211, 0.18);
  --xeit-border-light: rgba(31, 30, 28, 0.14);

  /* Theme-aware tokens used by site chrome (default = dark) */
  --xeit-nav-bg:       rgba(31, 30, 28, 0.55);
  --xeit-watermark:    var(--xeit-bone-200);
  --xeit-input-bg:     var(--xeit-ink-050);
  --xeit-accent-on-bg: var(--xeit-coral-400);

  --xeit-success: #6b7a4a;  /* moss */
  --xeit-warning: #b8884a;  /* ochre */
  --xeit-danger:  #d65a3a;  /* deeper coral */

  /* --------------------------------------------------------
     Spacing — 4px base, named for intent not size
     -------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* --------------------------------------------------------
     Radii — gentle, not bubbly
     -------------------------------------------------------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* --------------------------------------------------------
     Shadows — minimal. Cards on dark use border + tint, not lift.
     -------------------------------------------------------- */
  --shadow-soft:  0 1px 0 rgba(255,255,255,0.04) inset, 0 1px 2px rgba(0,0,0,0.25);
  --shadow-raised:0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px -8px rgba(0,0,0,0.5);
  --shadow-glow:  0 0 0 1px rgba(239, 125, 94, 0.35), 0 0 24px -4px rgba(239, 125, 94, 0.25);

  /* --------------------------------------------------------
     Motion — slow, easeful. The default curves are non-bouncy.
     `--ease-soft-spring` is the one exception, reserved for the
     welcome step transitions and the rail open/close — moments
     where a small overshoot reads as life, not as cartoon. Used
     anywhere else, it will feel wrong.
     -------------------------------------------------------- */
  --ease-out:           cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out:        cubic-bezier(0.65, 0, 0.35, 1);
  --ease-soft-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);  /* Wave 6: welcome, rail */
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 480ms;
  --dur-hero: 900ms;    /* Wave 6: welcome-step entry, large fades */
  --stagger:   60ms;    /* Wave 6: interval between sibling element entries */

  /* --------------------------------------------------------
     Type — base
     -------------------------------------------------------- */
  --font-serif: "Libre Baskerville", "Baskerville", "Baskerville Old Face",
                "Hoefler Text", "Garamond", "Times New Roman", serif;
  --font-mono:  "JetBrains Mono", "SF Mono", "Menlo", "Consolas", monospace;

  /* Scale — tuned for Baskerville's small x-height (so larger than usual) */
  --fs-xs:   13px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   22px;
  --fs-xl:   28px;
  --fs-2xl:  36px;
  --fs-3xl:  48px;
  --fs-4xl:  64px;
  --fs-5xl:  88px;

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

  --tracking-tight:  -0.015em;
  --tracking-base:   0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.12em;
}

/* ============================================================
   Light theme override
   ============================================================
   Honors `data-theme="light"` on <html>. The accent stays.
   Only semantic tokens flip — type, spacing, layout untouched.
   ============================================================ */

:root[data-theme="light"] {
  --xeit-bg:           #f4f1e6;          /* warm cream */
  --xeit-bg-raised:    #ebe7d5;          /* card on cream */
  --xeit-bg-overlay:   rgba(244, 241, 230, 0.78);

  --xeit-fg:           #2e2b25;          /* body text */
  --xeit-fg-strong:    #1a1917;          /* high-contrast */
  --xeit-fg-muted:     #7d7665;          /* captions */

  --xeit-border:       rgba(26, 25, 23, 0.10);
  --xeit-border-strong:rgba(26, 25, 23, 0.20);
  --xeit-border-light: rgba(26, 25, 23, 0.10);

  --xeit-nav-bg:       rgba(244, 241, 230, 0.70);
  --xeit-watermark:    #1a1917;          /* dark mark on cream */
  --xeit-input-bg:     #ebe7d5;
  --xeit-accent:       var(--xeit-coral-500);  /* deeper coral on light for contrast */
  --xeit-accent-on-bg: var(--xeit-coral-500);

  --shadow-soft:  0 1px 2px rgba(26,25,23,0.08);
  --shadow-raised:0 8px 24px -8px rgba(26,25,23,0.18);
  --shadow-glow:  0 0 0 1px rgba(214, 90, 58, 0.40), 0 0 24px -4px rgba(214, 90, 58, 0.20);
}

/* ============================================================
   Semantic typography classes
   These are the ONLY type recipes. Don't roll your own.
   ============================================================ */

html, body {
  background: var(--xeit-bg);
  color: var(--xeit-fg);
  font-family: var(--font-serif);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.x-display {       /* hero, title slide */
  font-family: var(--font-serif);
  font-size: clamp(48px, 7vw, 88px);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--xeit-fg-strong);
}
.x-display em, .x-display .accent { font-style: italic; color: var(--xeit-accent); font-weight: 400; }

.x-h1 {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--xeit-fg-strong);
}
.x-h2 {
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--xeit-fg-strong);
}
.x-h3 {
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: var(--lh-snug);
  color: var(--xeit-fg-strong);
}
.x-h4 {
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: var(--lh-snug);
  color: var(--xeit-fg-strong);
}
.x-eyebrow {
  font-size: var(--fs-xs);
  font-weight: 400;
  font-style: italic;
  letter-spacing: var(--tracking-wide);
  color: var(--xeit-accent);
  text-transform: lowercase;
}
.x-body {
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--xeit-fg);
}
.x-body-lg {
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  color: var(--xeit-fg);
}
.x-caption {
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--xeit-fg-muted);
}
.x-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: 0;
  color: var(--xeit-fg);
}
.x-quote {
  font-style: italic;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--xeit-fg-strong);
}
.x-link {
  color: var(--xeit-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}
.x-link:hover { color: var(--xeit-accent-hover); }