/* ============================================================
   GENERATE — AI text & image platform landing page
   Aesthetic: soft sage-green grainy gradients, warm cream,
   dark feature/stat panels, soft modern grotesk. Premium + calm.
   ============================================================ */

:root {
  /* Warm green-tinted neutrals */
  --ink:        oklch(0.22 0.012 152);
  --ink-soft:   oklch(0.38 0.012 152);
  --muted:      oklch(0.52 0.010 152);
  --faint:      oklch(0.66 0.008 152);
  --line:       oklch(0.90 0.006 140);
  --line-soft:  oklch(0.93 0.005 140);
  --panel:      oklch(0.965 0.007 120);
  --card:       oklch(0.995 0.003 120);
  --bg:         oklch(0.928 0.006 132);   /* light gray-green page */

  /* Sage / olive accents */
  --accent:        oklch(0.44 0.046 142);  /* button olive */
  --accent-press:  oklch(0.38 0.046 142);
  --accent-bright: oklch(0.66 0.085 140);  /* highlight on dark */
  --sage:          oklch(0.66 0.055 138);
  --sage-deep:     oklch(0.54 0.062 142);
  --cream:         oklch(0.95 0.018 104);

  /* gradient "field" stops + text that sits on the field */
  --field-mid:     oklch(0.78 0.04 128);
  --field-glow:    oklch(0.92 0.04 130 / 0.55);
  --field-border:  oklch(0.84 0.02 130);
  --on-field:      oklch(0.22 0.012 152);
  --on-field-soft: oklch(0.32 0.02 150);

  /* Dark panels (green-black) */
  --dark:        oklch(0.185 0.016 158);
  --dark-2:      oklch(0.225 0.018 158);
  --dark-3:      oklch(0.275 0.018 158);
  --dark-line:   oklch(0.32 0.016 158);
  --on-dark:     oklch(0.93 0.008 130);
  --on-dark-mut: oklch(0.66 0.012 140);

  /* Type */
  --sans: "Geist", "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Radius / shadow */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --shadow-sm: 0 1px 2px oklch(0.2 0.02 150 / 0.06), 0 1px 1px oklch(0.2 0.02 150 / 0.04);
  --shadow-md: 0 10px 30px -12px oklch(0.2 0.03 150 / 0.18), 0 3px 8px -3px oklch(0.2 0.03 150 / 0.10);
  --shadow-lg: 0 32px 70px -28px oklch(0.2 0.05 150 / 0.34), 0 10px 28px -14px oklch(0.2 0.03 150 / 0.16);

  /* grain */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  --maxw: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.012em;
}

::selection { background: var(--sage); color: var(--ink); }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
.wrap-wide { max-width: 1340px; }
section { position: relative; }

/* ---------- Type scale ---------- */
.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex; align-items: center; gap: 9px;
}
.eyebrow .ebdot { width: 7px; height: 7px; border-radius: 999px; background: var(--accent); }
.eyebrow.on-dark { color: var(--on-dark-mut); }
.eyebrow.on-dark .ebdot { background: var(--accent-bright); }

h1, h2, h3 { margin: 0; font-weight: 540; line-height: 1.04; letter-spacing: -0.03em; }
.display { font-size: clamp(38px, 5.4vw, 64px); font-weight: 540; letter-spacing: -0.038em; line-height: 1.03; }
.h2 { font-size: clamp(30px, 3.8vw, 47px); letter-spacing: -0.034em; font-weight: 540; }
.h3 { font-size: clamp(19px, 1.7vw, 22px); letter-spacing: -0.022em; font-weight: 540; }
.lead { font-size: clamp(16px, 1.25vw, 18.5px); line-height: 1.55; color: var(--ink-soft); font-weight: 400; }
.body { font-size: 15.5px; line-height: 1.62; color: var(--muted); font-weight: 400; }
.mono-label { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.01em; color: var(--muted); }

/* ---------- Buttons (pill) ---------- */
.btn {
  --bh: 46px;
  height: var(--bh);
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 0 22px;
  border-radius: 999px;
  font-size: 14.5px; font-weight: 500; letter-spacing: -0.01em;
  cursor: pointer; border: 1px solid transparent;
  transition: transform .14s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: oklch(0.97 0.01 130); }
.btn-primary:hover { background: var(--accent-press); box-shadow: var(--shadow-md); }
.btn-dark { background: var(--dark); color: var(--on-dark); }
.btn-dark:hover { background: var(--dark-2); box-shadow: var(--shadow-md); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-light { background: var(--card); color: var(--ink); border-color: var(--line); }
.btn-light:hover { box-shadow: var(--shadow-sm); border-color: oklch(0.85 0.006 140); }
.btn-sm { --bh: 38px; padding: 0 16px; font-size: 13.5px; }
.btn-lg { --bh: 52px; padding: 0 26px; font-size: 15.5px; }
.arrow { transition: transform .18s ease; }
.btn:hover .arrow { transform: translateX(3px); }

/* on dark */
.on-dark .btn-ghost { color: var(--on-dark); border-color: var(--dark-line); }
.on-dark .btn-ghost:hover { border-color: var(--on-dark); }

/* ---------- Chips ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 14px;
  border: 1px solid oklch(0.5 0.03 140 / 0.4);
  border-radius: 999px;
  background: oklch(0.99 0.01 120 / 0.5);
  backdrop-filter: blur(6px);
  font-family: var(--mono); font-size: 12px; color: var(--ink-soft);
}
.chip .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--accent); }

/* ---------- Cards ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.card-dark { background: var(--dark); border: 1px solid var(--dark-line); border-radius: var(--r-lg); color: var(--on-dark); }

/* ---------- Placeholder imagery ---------- */
.ph {
  position: relative; overflow: hidden;
  background-color: var(--panel);
  background-image: repeating-linear-gradient(-45deg, oklch(0.9 0.01 140) 0 1px, transparent 1px 10px);
  border: 1px solid var(--line);
  display: flex; align-items: flex-end; border-radius: var(--r-md);
}
.ph.dark { background-color: var(--dark-2); background-image: repeating-linear-gradient(-45deg, oklch(0.3 0.02 150) 0 1px, transparent 1px 10px); border-color: var(--dark-line); }
.ph .ph-tag {
  margin: 10px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.02em; color: var(--muted);
  background: oklch(0.99 0.005 120 / 0.8); backdrop-filter: blur(4px);
  border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px;
}
.ph.dark .ph-tag { background: oklch(0.2 0.02 150 / 0.7); color: var(--on-dark-mut); border-color: var(--dark-line); }

/* ---------- Section rhythm ---------- */
.section-pad { padding: clamp(72px, 9vw, 128px) 0; }
.section-head { max-width: 660px; }
.section-head .h2 { margin-top: 16px; }
.section-head .lead { margin-top: 18px; }
.section-head.center { margin: 0 auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }

/* ---------- Reveal (CSS scroll-timeline; visible by default) ---------- */
.reveal { opacity: 1; }
@keyframes reveal-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal { animation: reveal-in linear both; animation-timeline: view(); animation-range: entry 4% entry 36%; }
  }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- Utility ---------- */
.hr { height: 1px; background: var(--line); border: 0; }
.muted { color: var(--muted); }
.center { text-align: center; }
.grain-layer { position: absolute; inset: 0; background-image: var(--grain); background-size: 150px 150px; mix-blend-mode: soft-light; opacity: 0.5; pointer-events: none; }
body.nograin .grain-layer { display: none; }

#root { position: relative; }

/* ============================================================
   PALETTES — swap the whole token set via [data-palette]
   • ember : dark warm maroon, cream text, coral accent  (ref: Arch_ai)
   • bloom : light, near-black buttons, lavender→lime washes (ref: invoice)
   ============================================================ */

/* ---------- EMBER (dark warm maroon) ---------- */
body[data-palette="ember"] {
  --ink:        oklch(0.94 0.018 60);
  --ink-soft:   oklch(0.80 0.025 50);
  --muted:      oklch(0.66 0.03 45);
  --faint:      oklch(0.52 0.035 40);
  --line:       oklch(0.34 0.045 32);
  --line-soft:  oklch(0.28 0.04 30);
  --panel:      oklch(0.20 0.038 28);
  --card:       oklch(0.215 0.042 28);
  --bg:         oklch(0.16 0.032 27);

  --accent:        oklch(0.66 0.17 33);
  --accent-press:  oklch(0.60 0.17 33);
  --accent-bright: oklch(0.74 0.15 45);
  --sage:          oklch(0.50 0.15 33);
  --sage-deep:     oklch(0.31 0.10 30);
  --cream:         oklch(0.185 0.04 27);
  --field-mid:     oklch(0.26 0.085 30);
  --field-glow:    oklch(0.62 0.16 38 / 0.45);
  --field-border:  oklch(0.40 0.07 32);
  --on-field:      oklch(0.96 0.02 60);
  --on-field-soft: oklch(0.84 0.035 52);

  --dark:        oklch(0.235 0.05 29);
  --dark-2:      oklch(0.285 0.055 30);
  --dark-3:      oklch(0.335 0.06 32);
  --dark-line:   oklch(0.37 0.05 33);
  --on-dark:     oklch(0.94 0.018 60);
  --on-dark-mut: oklch(0.72 0.03 48);
}
body[data-palette="ember"] { background: var(--bg); }
body[data-palette="ember"] .nav-pill { background: oklch(0.20 0.04 28 / 0.74); border-color: oklch(0.62 0.12 35 / 0.22); box-shadow: 0 10px 34px -16px oklch(0 0 0 / 0.6); }
body[data-palette="ember"] .nav-pill.scrolled { background: oklch(0.185 0.04 28 / 0.92); }
body[data-palette="ember"] .chip { background: oklch(0.28 0.05 30 / 0.5); border-color: oklch(0.62 0.12 35 / 0.28); color: var(--ink-soft); }
body[data-palette="ember"] .btn-dark { background: var(--accent); color: oklch(0.98 0.012 60); }
body[data-palette="ember"] .btn-dark:hover { background: var(--accent-press); }
body[data-palette="ember"] .btn-light { background: var(--card); color: var(--ink); border-color: var(--line); }
body[data-palette="ember"] .hero-dots { background-image: radial-gradient(oklch(0.92 0.06 45 / 0.10) 1px, transparent 1.4px); }
body[data-palette="ember"] .ph { background-color: var(--dark-2); background-image: repeating-linear-gradient(-45deg, oklch(0.34 0.05 32) 0 1px, transparent 1px 10px); border-color: var(--dark-line); }
body[data-palette="ember"] .ph .ph-tag { background: oklch(0.2 0.03 30 / 0.7); color: var(--on-dark-mut); border-color: var(--dark-line); }

/* ---------- BLOOM (light pastel + black buttons) ---------- */
body[data-palette="bloom"] {
  --ink:        oklch(0.20 0.015 285);
  --ink-soft:   oklch(0.38 0.015 285);
  --muted:      oklch(0.54 0.012 285);
  --faint:      oklch(0.68 0.010 285);
  --line:       oklch(0.90 0.010 290);
  --line-soft:  oklch(0.93 0.008 290);
  --panel:      oklch(0.965 0.010 290);
  --card:       oklch(0.995 0.004 290);
  --bg:         oklch(0.975 0.006 290);

  --accent:        oklch(0.22 0.015 285);
  --accent-press:  oklch(0.33 0.020 285);
  --accent-bright: oklch(0.83 0.10 295);
  --sage:          oklch(0.85 0.09 292);
  --sage-deep:     oklch(0.83 0.075 268);
  --cream:         oklch(0.945 0.085 116);
  --field-mid:     oklch(0.91 0.075 150);
  --field-glow:    oklch(0.96 0.06 110 / 0.5);
  --field-border:  oklch(0.88 0.04 290);
  --on-field:      oklch(0.20 0.015 285);
  --on-field-soft: oklch(0.34 0.020 285);

  --dark:        oklch(0.205 0.015 285);
  --dark-2:      oklch(0.255 0.018 285);
  --dark-3:      oklch(0.305 0.020 285);
  --dark-line:   oklch(0.35 0.018 285);
  --on-dark:     oklch(0.96 0.006 290);
  --on-dark-mut: oklch(0.70 0.012 285);
}
body[data-palette="bloom"] { background: var(--bg); }
body[data-palette="bloom"] .btn-primary { color: oklch(0.97 0.01 290); }