/* ──────────────────────────────────────────────────────────────────
   Amos Design System — Colors & Type
   The mission economy. Warm, earthy, plumbline-true.
   ────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,400&family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ─── Ledger palette (the 6 brand tokens) ─────────────────────── */
  --cacao:    #341800;   /* primary  — wordmarks, headlines */
  --saffron:  #D89B2C;   /* accent   — CTAs, totals, signal */
  --kelp:     #2F4A3E;   /* signal   — success/safe, alt mode */
  --walnut:   #6A4A30;   /* muted    — secondary, body on light */
  --linen:    #EFE3D1;   /* surface  — cards, panels */
  --oat:      #E4D3C4;   /* canvas   — page background */

  /* ─── Extended ramp (derived, harmonised in oklch) ─────────────── */
  --cacao-95: oklch(20% 0.05 50);
  --cacao-80: oklch(28% 0.06 55);
  --cacao-60: oklch(40% 0.06 55);
  --cacao-40: oklch(55% 0.05 55);
  --cacao-20: oklch(72% 0.04 55);

  --oat-light: #EEDFD0;       /* +5% L */
  --oat-deep:  #D6C2AE;       /* −5% L */
  --linen-deep: #E5D6BF;
  --paper:     #F7EFE2;       /* lightest neutral, near-white */
  --bone:      #FAF4EA;
  --ink:       #1F0E00;       /* near-black, only for max contrast */

  --saffron-deep: #B5811F;
  --saffron-soft: #F2C772;
  --kelp-deep:   #1F352B;
  --kelp-soft:   #6E8A7E;

  /* Status — derived to fit the warm palette */
  --positive:    var(--kelp);
  --negative:    #B0392E;     /* terracotta-red, not pure red */
  --warning:     var(--saffron-deep);
  --info:        var(--walnut);

  /* ─── Semantic surfaces ────────────────────────────────────────── */
  --bg-canvas:    var(--oat);
  --bg-surface:   var(--linen);
  --bg-raised:    var(--paper);
  --bg-inverse:   var(--cacao);

  --fg-primary:   var(--cacao);
  --fg-secondary: var(--walnut);
  --fg-muted:     #8A6E54;
  --fg-on-dark:   var(--oat);
  --fg-on-dark-muted: #B59E89;

  --border-soft:  rgba(52, 24, 0, 0.08);
  --border-base:  rgba(52, 24, 0, 0.14);
  --border-strong:rgba(52, 24, 0, 0.28);
  --border-dark:  rgba(239, 227, 209, 0.16); /* on cacao */

  /* ─── Type families ───────────────────────────────────────────── */
  --font-display: "DM Serif Display", "Newsreader", Georgia, serif;
  --font-serif:   "Newsreader", Georgia, "Times New Roman", serif;
  --font-sans:    "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ─── Type scale ──────────────────────────────────────────────── */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   22px;
  --text-xl:   28px;
  --text-2xl:  36px;
  --text-3xl:  48px;
  --text-4xl:  64px;
  --text-5xl:  84px;
  --text-6xl:  112px;

  /* Tracking */
  --track-tightest: -0.03em;
  --track-tight:    -0.015em;
  --track-normal:   0;
  --track-wide:     0.04em;
  --track-widest:   0.18em;        /* eyebrows / labels */

  /* Leading */
  --lead-tight:  1.05;
  --lead-snug:   1.18;
  --lead-normal: 1.45;
  --lead-relaxed:1.6;

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

  /* ─── Corner radii — soft, "here to help" ────────────────────── */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-pill: 999px;

  /* ─── Shadows — low, warm, never blue ─────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(52, 24, 0, 0.06);
  --shadow-sm: 0 2px 6px rgba(52, 24, 0, 0.08);
  --shadow-md: 0 8px 24px -8px rgba(52, 24, 0, 0.16), 0 2px 6px rgba(52, 24, 0, 0.05);
  --shadow-lg: 0 24px 60px -20px rgba(52, 24, 0, 0.22), 0 4px 12px rgba(52, 24, 0, 0.06);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.4);

  /* ─── Motion ──────────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
}

/* ─── Semantic text styles — apply with class names ──────────────── */
.t-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  color: var(--fg-secondary);
}
.t-display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-6xl);
  line-height: var(--lead-tight);
  letter-spacing: var(--track-tight);
  color: var(--fg-primary);
}
.t-h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-4xl);
  line-height: var(--lead-tight);
  letter-spacing: var(--track-tight);
  color: var(--fg-primary);
  text-wrap: balance;
}
.t-h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-3xl);
  line-height: var(--lead-snug);
  letter-spacing: var(--track-tight);
  color: var(--fg-primary);
  text-wrap: balance;
}
.t-h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: var(--lead-snug);
  color: var(--fg-primary);
}
.t-h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-md);
  line-height: var(--lead-snug);
  color: var(--fg-primary);
}
.t-lede {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: var(--lead-relaxed);
  color: var(--fg-secondary);
  text-wrap: pretty;
}
.t-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--lead-relaxed);
  color: var(--fg-primary);
  text-wrap: pretty;
}
.t-body-sm {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-sm);
  line-height: var(--lead-normal);
  color: var(--fg-secondary);
}
.t-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--lead-normal);
  color: var(--fg-primary);
  font-feature-settings: "ss01", "calt" off;
}
.t-mono-sm {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--lead-normal);
  color: var(--fg-secondary);
}
.t-amount {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-3xl);
  letter-spacing: var(--track-tight);
  color: var(--fg-primary);
  font-variant-numeric: tabular-nums lining-nums;
}

/* Reset-ish helpers used by the cards and UI kit */
.amos-base {
  font-family: var(--font-sans);
  color: var(--fg-primary);
  background: var(--bg-canvas);
  font-size: var(--text-base);
  line-height: var(--lead-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── Waitlist dialog (shadcn-style sheet: overlay + bordered surface) ───
   Width: full bleed on small screens (see mobile.css); ~80% from 601px up.
   Theme tokens follow `html.inverse-page` with the landing toggle. */
:root {
  --dialog-overlay: rgba(15, 8, 0, 0.55);
  --dialog-surface: var(--paper);
  --dialog-border: color-mix(in srgb, var(--cacao) 14%, transparent);
  --dialog-shadow: var(--shadow-lg);
  --dialog-radius: var(--radius-sm);
  --dialog-close-bg: var(--bone);
  --dialog-close-border: var(--border-strong);
  --dialog-close-fg: var(--cacao);
  --dialog-close-hover-bg: var(--linen-deep);
}

html.inverse-page {
  --dialog-overlay: rgba(0, 0, 0, 0.72);
  --dialog-surface: oklch(22% 0.045 55);
  --dialog-border: rgba(239, 227, 209, 0.14);
  --dialog-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.45);
  --dialog-close-bg: rgba(255, 255, 255, 0.06);
  --dialog-close-border: rgba(239, 227, 209, 0.18);
  --dialog-close-fg: var(--linen);
  --dialog-close-hover-bg: rgba(255, 255, 255, 0.1);
}

@keyframes amosFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes amosRise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.waitlist-dialog-overlay.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--dialog-overlay);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  animation: amosFadeIn var(--dur-base) var(--ease-out) both;
}

.waitlist-dialog-content.modal-card {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  background: var(--dialog-surface);
  color: var(--fg-primary);
  border-radius: var(--dialog-radius);
  border: 1px solid var(--dialog-border);
  box-shadow: var(--dialog-shadow);
  animation: amosRise 320ms var(--ease-out) both;
}

html.inverse-page .waitlist-dialog-content.modal-card {
  color: var(--linen);
}

@media (min-width: 601px) {
  .waitlist-dialog-content.modal-card {
    width: 80%;
    max-width: min(80vw, 1120px);
  }
}

.waitlist-dialog-body {
  padding: var(--space-6) 52px var(--space-6) var(--space-5);
}

.waitlist-dialog-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: var(--radius-pill);
  border: 1px solid var(--dialog-close-border);
  background: var(--dialog-close-bg);
  color: var(--dialog-close-fg);
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.waitlist-dialog-close:hover {
  background: var(--dialog-close-hover-bg);
}

.waitlist-dialog-close:focus-visible {
  outline: 2px solid var(--saffron);
  outline-offset: 2px;
}