/* Lucida design system — tokens + primitives.
   Target aesthetic: Linear, Stripe, Vercel, Attio.
   Per doc/BUILD_GUIDELINES.md §1 — motion + restraint + typographic care.

   Rules:
   1. Typography is the hero — variable fonts, tight display tracking
   2. Hairline everything — max 1px borders, subtle shadows
   3. Motion is felt, not seen — 150-400ms, ease-out-quint for transitions
   4. Color palette is restrained — ink + brand emerald + one accent
   5. Tabular nums for all data — never uneven digit widths
*/

:root {
  /* Type */
  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-display: 'Instrument Serif', 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Spacing system — 4px base, no odd multiples */
  --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;

  /* Elevation — subtle. shadow-xl is banned in this system. */
  --shadow-xs: 0 1px 0 0 rgb(15 23 42 / 0.02);
  --shadow-sm: 0 1px 2px 0 rgb(15 23 42 / 0.04), 0 1px 2px 0 rgb(15 23 42 / 0.03);
  --shadow-md: 0 4px 6px -1px rgb(15 23 42 / 0.06), 0 2px 4px -1px rgb(15 23 42 / 0.04);
  --shadow-lg: 0 12px 24px -8px rgb(15 23 42 / 0.12), 0 2px 6px -2px rgb(15 23 42 / 0.06);
  --shadow-inner: inset 0 1px 0 0 rgb(255 255 255 / 0.04);
  --shadow-focus: 0 0 0 3px rgb(16 185 129 / 0.12);

  /* Motion — Premium ease curves */
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 150ms;
  --dur-base: 300ms;
  --dur-slow: 500ms;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
}

/* ─────────────────────────── Base ─────────────────────────── */

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-sans);
  font-feature-settings: 'cv11', 'ss01', 'ss03', 'cv06';
  letter-spacing: -0.01em;
}

/* Display typography — where the design house aesthetic lives */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 0.98;
}

.tracking-display {
  letter-spacing: -0.03em;
}

.tracking-body {
  letter-spacing: -0.005em;
}

.mono, .font-mono, [data-mono] {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Tabular numbers everywhere — for prices, scores, dates, counts */
.tabular, .tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* ─────────────────────────── Primitives ─────────────────────────── */

/* Button — the one component everything else inherits from */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 10px 16px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.006em;
  line-height: 1;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out-quint);
  border: 1px solid transparent;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: translateY(0.5px); }

.btn-primary {
  background: #0f172a;
  color: white;
  box-shadow: var(--shadow-inner), var(--shadow-sm);
}
.btn-primary:hover { background: #1e293b; }
.btn-primary:active { background: #0f172a; }

.btn-brand {
  background: #059669;
  color: white;
  box-shadow: var(--shadow-inner), var(--shadow-sm);
}
.btn-brand:hover { background: #047857; }

.btn-secondary {
  background: white;
  color: #334155;
  border-color: #e2e8f0;
}
.btn-secondary:hover { border-color: #94a3b8; color: #0f172a; }

.btn-ghost {
  background: transparent;
  color: #475569;
}
.btn-ghost:hover { background: #f1f5f9; color: #0f172a; }

.btn-lg { padding: 14px 22px; font-size: 15px; border-radius: 12px; }
.btn-sm { padding: 6px 12px; font-size: 13px; border-radius: 8px; }

.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* Input — refined, borderless focus ring */
.input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-family: inherit;
  letter-spacing: -0.006em;
  background: white;
  color: #0f172a;
  transition: all var(--dur-fast) var(--ease-out-quint);
}
.input::placeholder { color: #94a3b8; }
.input:hover { border-color: #cbd5e1; }
.input:focus {
  outline: none;
  border-color: #10b981;
  box-shadow: var(--shadow-focus);
}
.input[aria-invalid="true"] {
  border-color: #f43f5e;
  box-shadow: 0 0 0 3px rgb(244 63 94 / 0.12);
}

.label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: #334155;
  margin-bottom: 6px;
  letter-spacing: -0.005em;
}

/* Card */
.card {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}
.card-elevated {
  box-shadow: var(--shadow-md);
}

/* Kbd */
kbd, .kbd {
  font-family: var(--font-mono);
  font-size: 11px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-bottom-width: 2px;
  padding: 1px 6px;
  border-radius: 5px;
  color: #475569;
  font-variant-numeric: tabular-nums;
}

/* ─────────────────────────── Motion primitives ─────────────────────────── */

/* Reveal — fade + rise on load. 188 usages across templates.
   Chrome throttles animations on off-screen elements to currentTime:0
   playState:running indefinitely, which starved Chrome CDP's screenshot
   injection on TOFU pages (2026-08-06 walkthrough). Fix: gate the animation
   behind a top-of-viewport check via `no-preference` — animations only run
   on the initial hero (which is always in-view). Off-screen elements go
   straight to the "to" state with no animation state to track.
   For scroll-triggered fade-rise, use `.reveal-on-scroll` (JS/IO-driven). */
@keyframes reveal {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.reveal { opacity: 1; transform: none; }
/* Animate only when JS explicitly opts in — apply `.reveal.js-animate` on
   above-fold elements at hydration time; leave off-screen elements static. */
.reveal.js-animate { animation: reveal var(--dur-base) var(--ease-out-quint) both; }
.reveal-delay-1 { animation-delay: 40ms; }
.reveal-delay-2 { animation-delay: 80ms; }
.reveal-delay-3 { animation-delay: 120ms; }
.reveal-delay-4 { animation-delay: 160ms; }
.reveal-delay-5 { animation-delay: 200ms; }
.reveal-delay-6 { animation-delay: 240ms; }

/* Shimmer for skeletons */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
.shimmer {
  background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%);
  background-size: 200% 100%;
  animation: shimmer 1.6s linear infinite;
}

/* Gentle pulse for live indicators */
@keyframes pulse-soft {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}
.pulse-soft { animation: pulse-soft 2s ease-in-out infinite; }

/* Hairline divider — subtler than a plain border */
.hairline {
  background-image: linear-gradient(to right, transparent, rgb(15 23 42 / 0.08), transparent);
  height: 1px;
  border: 0;
}

/* Respect the user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Selection — subtle brand tint */
::selection {
  background: rgb(16 185 129 / 0.2);
  color: #064e3b;
}

/* Focus-visible — never style away the ring on keyboard nav */
:focus-visible {
  outline: 2px solid #10b981;
  outline-offset: 2px;
}

/* Noisy gradient background — used for premium hero sections.
   Very subtle, adds texture without distracting. */
.bg-noise {
  background-color: #fafafa;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Aurora — soft radial gradient backgrounds for hero moments */
.aurora {
  position: relative;
  overflow: hidden;
}
.aurora::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(ellipse at 20% 0%, rgb(16 185 129 / 0.12), transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgb(59 130 246 / 0.08), transparent 50%);
  z-index: 0;
  pointer-events: none;
}
.aurora > * { position: relative; z-index: 1; }

/* ═════════════════════════════════════════════════════════════════════
   Panel display-scale tokens — DL-2 migration target (ADR-0006).
   Marketing templates shipped with dozens of raw `text-[Npx]` arbitrary
   values before Panel landed. New work uses these tokens; existing
   templates migrate incrementally per DESIGN_LANGUAGE.md §9.
   ═════════════════════════════════════════════════════════════════════ */

:root {
  /* Display scale — Instrument Serif hero moments */
  --fs-disp-xl: 5.5rem;    /* 88px  · landing H1 */
  --fs-disp-l:  4.25rem;   /* 68px  · pricing H2, TOFU form H1, /who-we-are-not-for H1 */
  --fs-disp-m:  2.75rem;   /* 44px  · section H2, /vs/* H1, feedback report title */
  --fs-disp-s:  1.75rem;   /* 28px  · card titles, admin dashboard H2 */

  /* Body scale — Inter */
  --fs-body-l:  1.1875rem; /* 19px  · hero subhead */
  --fs-body-m:  1.0625rem; /* 17px  · body-lg */
  --fs-body:    0.9375rem; /* 15px  · default body */
  --fs-body-s:  0.875rem;  /* 14px  · secondary */
  --fs-sm:      0.8125rem; /* 13px  · captions */
  --fs-xs:      0.75rem;   /* 12px  · fine print */
  --fs-micro:   0.6875rem; /* 11px  · eyebrow, footer, mono meta */
  --fs-nano:    0.625rem;  /* 10px  · uppercase micro-labels */

  /* Brand-tinted shadows for buttons + glow accents */
  --sh-brand-sm: 0 4px 12px -3px rgb(4 120 87 / 0.20);
  --sh-brand-md: 0 12px 24px -6px rgb(4 120 87 / 0.28);
  --sh-brand-lg: 0 20px 40px -12px rgb(4 120 87 / 0.35);
  --sh-amber-sm: 0 4px 12px -3px rgb(180 83 9 / 0.20);
  --sh-rose-sm:  0 4px 12px -3px rgb(159 18 57 / 0.20);
}

/* Display classes — one per scale step, applied on top of .display */
.disp-xl { font-size: var(--fs-disp-xl); line-height: 0.92; letter-spacing: -0.02em; }
.disp-l  { font-size: var(--fs-disp-l);  line-height: 0.94; letter-spacing: -0.02em; }
.disp-m  { font-size: var(--fs-disp-m);  line-height: 1.05; letter-spacing: -0.02em; }
.disp-s  { font-size: var(--fs-disp-s);  line-height: 1.15; letter-spacing: -0.01em; }
@media (max-width: 767px) {
  /* Mobile step-down — displays ~40% smaller for a 375px viewport */
  .disp-xl { font-size: 3.5rem; }   /* 56px on mobile */
  .disp-l  { font-size: 2.75rem; }  /* 44px */
  .disp-m  { font-size: 2rem; }     /* 32px */
  .disp-s  { font-size: 1.375rem; } /* 22px */
}

/* ─── Marketing kit classes — Panel §5 promoted patterns ─── */

/* Eyebrow — the pill-shaped badge above every H1 */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  background: rgb(255 255 255 / 0.8);
  backdrop-filter: blur(6px);
  font-size: var(--fs-micro);
  font-weight: 500;
  color: rgb(51 65 85); /* ink-700 */
  ring: 1px solid rgb(226 232 240); /* ink-200 */
}
.hero-eyebrow .dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: rgb(245 158 11); /* amber-500 default */
}

/* Section kicker — the uppercase brand-emerald label above H2 */
.section-kicker {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: rgb(4 120 87); /* brand-700 */
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Stat tile — giant tabular number + micro label under */
.stat-tile {
  display: block;
}
.stat-tile .num {
  font-family: var(--font-display);
  font-size: var(--fs-disp-m);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: rgb(15 23 42); /* ink-950 */
}
.stat-tile .lbl {
  margin-top: 0.25rem;
  font-family: var(--font-mono);
  font-size: var(--fs-nano);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgb(100 116 139); /* ink-500 */
}

/* Gradient italic — the signature moment. Enforcement note: one per page
   (see DESIGN_LANGUAGE.md §3.2). Multiple on the same page = anti-pattern. */
.grad-italic {
  background: linear-gradient(90deg, rgb(180 83 9), rgb(4 120 87), rgb(190 18 60));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: var(--font-display);
  font-style: italic;
}
.grad-italic.on-dark {
  background: linear-gradient(90deg, rgb(252 211 77), rgb(253 164 175), rgb(110 231 183));
  -webkit-background-clip: text;
  background-clip: text;
}

/* Marketing CTA button — brand-gradient, matches the emerald motion + shadow */
.btn.btn-brand-grad {
  background: linear-gradient(135deg, rgb(5 150 105), rgb(4 120 87), rgb(6 95 70));
  color: white;
  box-shadow: var(--sh-brand-md);
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--radius-lg);
  transition: transform var(--dur-fast) var(--ease-out-quint),
              box-shadow var(--dur-fast) var(--ease-out-quint);
}
.btn.btn-brand-grad:hover {
  transform: translateY(-1px) scale(1.01);
  box-shadow: var(--sh-brand-lg);
}
.btn.btn-brand-grad:active {
  transform: translateY(0) scale(1);
}

/* Pricing recommended-tier pulse — slow 3s cycle on the emerald ring.
   Used on the annual-prepay card to draw the eye without shouting.
   Reduced-motion users get a static ring. */
.pricing-pulse {
  animation: pricing-pulse-anim 3s ease-in-out infinite;
}
@keyframes pricing-pulse-anim {
  0%, 100% { box-shadow: 0 12px 24px -8px rgb(4 120 87 / 0.12), 0 0 0 0 rgb(16 185 129 / 0.35); }
  50%      { box-shadow: 0 12px 24px -8px rgb(4 120 87 / 0.24), 0 0 0 6px rgb(16 185 129 / 0); }
}
@media (prefers-reduced-motion: reduce) {
  .pricing-pulse { animation: none; }
}

.stat-tile-num { font-family: var(--font-display); font-size: 2rem; }
@media (min-width: 768px) { .stat-tile-num { font-size: 2.75rem; } }