/* PRIME — Luxury design tokens (author Reed)
   Calm, warm, expensive-feeling. Shared by every PWA page + the bot UI. */
:root {
  /* Palette */
  --cream:        #F7F3EA;
  --cream-2:      #FBF8F1;
  --cream-3:      #EFE9DC;
  --charcoal:     #23211C;
  --ink:          #2B2B2B;
  --ink-soft:     #4A463F;
  --gold:         #b0894f;
  --gold-soft:    #E4C97A;
  --gold-deep:    #A8851B;
  --sage:         #6E8B7B;
  --sage-soft:    #B9CDB9;
  --clay:         #B0683F;
  --clay-soft:    #D9A982;
  --muted:        #8A8478;
  --line:         #E3E0D6;
  --line-strong:  #CFC9BA;
  --danger:       #B4543C;
  --ok:           #5E8B72;

  /* Type */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-hero:  clamp(2rem, 6vw, 3.2rem);
  --fs-q:     clamp(1.5rem, 4.2vw, 2.15rem);
  --fs-lead:  clamp(1.15rem, 2.2vw, 1.4rem);
  --fs-body:  1.1875rem;          /* 19px floor — 50+ legibility (ChatGPT: big fonts) */
  --fs-sm:    1.0625rem;          /* 17px min — never below for 50+ */
  --lh-tight: 1.12;
  --lh-body:  1.6;

  /* Spacing */
  --sp-1: .4rem; --sp-2: .8rem; --sp-3: 1.2rem; --sp-4: 1.8rem;
  --sp-5: 2.6rem; --sp-6: 3.6rem; --sp-7: 5rem;

  /* Radius */
  --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-pill: 999px;

  /* Shadow — soft, layered, expensive */
  --sh-1: 0 1px 2px rgba(35,33,28,.06), 0 2px 8px rgba(35,33,28,.05);
  --sh-2: 0 4px 14px rgba(35,33,28,.08), 0 10px 30px rgba(35,33,28,.07);
  --sh-3: 0 12px 40px rgba(35,33,28,.12), 0 24px 70px rgba(35,33,28,.10);
  --sh-gold: 0 6px 24px rgba(201,162,39,.22);

  /* Motion — Apple-effortless */
  --ease-spring: cubic-bezier(.22, .95, .26, 1);
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --ease-soft:   cubic-bezier(.4, 0, .2, 1);
  --dur:    .52s;
  --dur-fast: .26s;
  --dur-slow: .8s;

  --maxw: 520px;
}

/* Base — cream background + big, legible type everywhere (ChatGPT 50+ bar) */
body { margin: 0; background: var(--cream); color: var(--ink);
  font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--gold-soft); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }