/* =========================================================================
   LISTLEY.AI — DESIGN SYSTEM / TOKENS
   Poppins · light + dark · cool-neutral surfaces · red→purple signature
   ========================================================================= */

:root {
  /* ---- Brand ---- */
  --brand-red:     #E63946;
  --brand-red-600: #d62f3c;
  --pro-blue:      #2563EB;
  --pro-blue-600:  #1d54cc;
  --success:       #059669;
  --purple:        #7C3AED;

  /* signature gradient (red -> purple), animated */
  --grad-accent: linear-gradient(110deg, #E63946 0%, #EC4567 32%, #B33AC9 68%, #7C3AED 100%);
  --grad-accent-soft: linear-gradient(110deg, rgba(230,57,70,.16), rgba(124,58,237,.16));

  /* ---- Radius (tweakable via --radius-scale) ---- */
  --radius-scale: 1;
  --r-xs: calc(6px  * var(--radius-scale));
  --r-sm: calc(10px * var(--radius-scale));
  --r-md: calc(14px * var(--radius-scale));
  --r-lg: calc(20px * var(--radius-scale));
  --r-xl: calc(28px * var(--radius-scale));
  --r-2xl:calc(36px * var(--radius-scale));
  --r-pill: 999px;

  /* ---- Spacing rhythm ---- */
  --space-section: clamp(72px, 11vw, 168px);
  --container: 1200px;
  --container-wide: 1320px;
  --gutter: clamp(20px, 5vw, 48px);

  /* ---- Type ---- */
  --font: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --tracking-tight: -0.03em;
  --tracking-tighter: -0.045em;

  /* ---- Motion ---- */
  --motion: 1;           /* 1 = full, 0.5 = subtle, 0 = off (set by tweak/js) */
  --ease-out: cubic-bezier(.16,.84,.34,1);
  --ease-soft: cubic-bezier(.33,.78,.4,1);
  --t-fast: 160ms;
  --t-med: 260ms;
  --t-slow: 460ms;
}

/* ===================== LIGHT (default) ===================== */
:root, [data-theme="light"] {
  --bg:          #FBFBFD;
  --bg-2:        #F3F4F8;
  --surface:     #FFFFFF;
  --surface-2:   #F7F8FB;
  --surface-3:   #EEF0F5;
  --glass:       rgba(255,255,255,.72);
  --glass-brd:   rgba(13,16,23,.08);
  --border:      rgba(13,16,23,.09);
  --border-strong: rgba(13,16,23,.14);

  --ink:         #0C0E13;
  --ink-2:       #2C313C;
  --muted:       #5C636F;
  --muted-2:     #868D99;
  --faint:       #AEB4BF;

  --shadow-sm: 0 1px 2px rgba(13,16,23,.06), 0 2px 6px rgba(13,16,23,.05);
  --shadow-md: 0 4px 14px rgba(13,16,23,.07), 0 12px 32px rgba(13,16,23,.06);
  --shadow-lg: 0 12px 28px rgba(13,16,23,.10), 0 32px 70px rgba(13,16,23,.10);
  --shadow-xl: 0 30px 60px rgba(13,16,23,.14), 0 60px 120px rgba(13,16,23,.12);
  --glow-blue: 0 0 0 1px rgba(37,99,235,.22), 0 14px 50px rgba(37,99,235,.20);

  --dot: rgba(13,16,23,.045);
  --gold: #B8860B;
  --gold-tint: rgba(184,134,11,.07);
  color-scheme: light;
}

/* ===================== DARK (extension theme) ===================== */
[data-theme="dark"] {
  --bg:          #0A0B0F;
  --bg-2:        #0E1016;
  --surface:     #15171E;
  --surface-2:   #1B1E27;
  --surface-3:   #232732;
  --glass:       rgba(18,20,27,.62);
  --glass-brd:   rgba(255,255,255,.08);
  --border:      rgba(255,255,255,.085);
  --border-strong: rgba(255,255,255,.16);

  --ink:         #F4F6FA;
  --ink-2:       #C8CDD8;
  --muted:       #9298A6;
  --muted-2:     #6B7280;
  --faint:       #474D5A;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.36);
  --shadow-md: 0 6px 20px rgba(0,0,0,.46), 0 14px 40px rgba(0,0,0,.4);
  --shadow-lg: 0 18px 44px rgba(0,0,0,.55), 0 40px 90px rgba(0,0,0,.5);
  --shadow-xl: 0 34px 70px rgba(0,0,0,.6), 0 70px 140px rgba(0,0,0,.55);
  --glow-blue: 0 0 0 1px rgba(37,99,235,.45), 0 18px 60px rgba(37,99,235,.34);

  --dot: rgba(255,255,255,.05);
  --gold: #F2C44D;
  --gold-tint: rgba(242,196,77,.09);
  color-scheme: dark;
}

/* ===================== RESET / BASE ===================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background var(--t-med) var(--ease-out), color var(--t-med) var(--ease-out);
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font-family: inherit; }
::selection { background: rgba(230,57,70,.22); }

/* ===================== TYPE SCALE ===================== */
.display {
  font-weight: 800;
  letter-spacing: var(--tracking-tighter);
  line-height: 0.98;
  font-size: clamp(2.6rem, 7vw, 5.4rem);
}
h1, .h1 { font-weight: 700; letter-spacing: var(--tracking-tight); line-height: 1.04; font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2, .h2 { font-weight: 700; letter-spacing: var(--tracking-tight); line-height: 1.08; font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
h3, .h3 { font-weight: 600; letter-spacing: -0.02em; line-height: 1.18; font-size: clamp(1.25rem, 2vw, 1.6rem); }
.eyebrow {
  font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); display: inline-flex; align-items: center; gap: .5rem;
}
.lead { font-size: clamp(1.05rem, 1.5vw, 1.32rem); color: var(--muted); font-weight: 400; line-height: 1.5; }
.balance { text-wrap: balance; }
.pretty { text-wrap: pretty; }

.grad-text {
  background: var(--grad-accent);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: gradShift calc(9s / max(var(--motion), .35)) linear infinite;
}
@keyframes gradShift { to { background-position: -200% 0; } }

/* ===================== LAYOUT ===================== */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container.wide { max-width: var(--container-wide); }
.section { padding-block: var(--space-section); position: relative; }
.section.tight { padding-block: clamp(48px, 7vw, 96px); }

.dot-grid {
  background-image: radial-gradient(var(--dot) 1px, transparent 1px);
  background-size: 26px 26px;
}

/* utility */
.center { text-align: center; }
.mx-auto { margin-inline: auto; }
.measure { max-width: 56ch; }
.measure-sm { max-width: 44ch; }
.stack-sm > * + * { margin-top: .6rem; }
.stack > * + * { margin-top: 1.1rem; }
.row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.hide-mobile { }
@media (max-width: 720px) { .hide-mobile { display: none !important; } }

/* reduced motion master switch */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
[data-motion="off"] *, [data-motion="off"] *::before, [data-motion="off"] *::after {
  animation-duration: .001ms !important; animation-iteration-count: 1 !important;
  transition-duration: 1ms !important;
}

/* ===================== PAGE TRANSITIONS ===================== */
@media (prefers-reduced-motion: no-preference) {
  main { animation: pageIn .5s var(--ease-out) both; }
}
@keyframes pageIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
[data-motion="off"] main { animation: none !important; }

body { transition: opacity .26s var(--ease-out), transform .26s var(--ease-out), background var(--t-med) var(--ease-out), color var(--t-med) var(--ease-out); }
body.pt-leaving { opacity: 0; transform: translateY(-8px); }
[data-motion="off"] body.pt-leaving { opacity: 1; transform: none; }