/* ============================================================
   VESTA — Design tokens
   World: warm editorial atelier — cream paper, rust accent,
   ink text, Poppins throughout (display weight 600) — user-pinned.
   Login/landing keeps the original Cormorant Garamond serif.
   Inherited from the established Vesta/Mosso identity.
   ============================================================ */

:root {
  /* ---- Color: ground ---- */
  --bg: #F3F1ED;            /* app paper */
  --bg-warm: #FAF7F4;       /* raised warm paper (challenge, sheets) */
  --surface: #FFFFFF;       /* cards */
  --surface-2: #ECEAE7;     /* report ground / recessed */
  --ink: #25252D;           /* primary text */
  --ink-soft: #55555E;      /* secondary text (4.6:1 on cream) */
  --ink-faint: #6E6E78;     /* tertiary — large/short labels only */
  --line: #EBE5DE;          /* hairline borders */
  --line-strong: #DDD5CB;

  /* ---- Color: brand ---- */
  --rust: #B32800;          /* primary accent (quiz/brand) */
  --rust-deep: #96220A;     /* hover / pressed */
  --rust-ember: #C1440E;    /* challenge accent, gradients */
  --rust-tint: #F7E9E3;     /* rust-tinted fill */
  --cream: #F5E6D3;
  --gold: #D4A574;
  --peach-grad: linear-gradient(103deg, #FDF1EC, #F3D4C5 50%, #E3D9CF);
  --info-bg: #EEF4FB;
  --info-fg: #4A6F9C;
  --success: #2E7D4F;
  --danger: #C62828;

  /* ---- Dark chrome (nav bar, dark buttons) ---- */
  --chrome: #25252D;
  --chrome-2: #33333D;
  --on-chrome: #F6F4F0;
  --on-chrome-soft: #B9B7C2;

  /* ---- Type ---- */
  --font-ui: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-11: 0.6875rem;
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-22: 1.375rem;
  --fs-24: 1.5rem;
  --fs-28: 1.75rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;

  /* ---- Space (4pt rhythm) ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px;

  /* ---- Radius ---- */
  --r-sm: 8px;
  --r-md: 10px;   /* Mosso card radius */
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* ---- Elevation (warm-tinted, offset + soft blur) ---- */
  --shadow-1: 0 1px 2px rgba(48, 36, 26, .05), 0 2px 8px rgba(48, 36, 26, .06);
  --shadow-2: 0 2px 6px rgba(48, 36, 26, .07), 0 10px 28px rgba(48, 36, 26, .10);
  --shadow-3: 0 6px 16px rgba(48, 36, 26, .12), 0 24px 56px rgba(48, 36, 26, .16);
  --shadow-nav: 0 -2px 20px rgba(37, 37, 45, .10);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);     /* confident arrival */
  --ease-in: cubic-bezier(0.55, 0, 0.85, 0.36);  /* quick exit */
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); /* sheets, hearts */
  --t-fast: 140ms;
  --t-base: 240ms;
  --t-slow: 420ms;
  --t-focal: 640ms;

  /* ---- Layout ---- */
  --app-max: 520px;          /* phone-frame content column */
  --nav-h: 64px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

/* Selection, caret, focus — chrome carries the brand too */
::selection { background: #F0D9CC; color: var(--ink); }
input, textarea { caret-color: var(--rust); }
:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; border-radius: 4px; }

/* Scrollbars */
* { scrollbar-width: thin; scrollbar-color: #CFC7BC transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: #CFC7BC; border-radius: 8px; }
*::-webkit-scrollbar-track { background: transparent; }