/* ============================================================
   Sunroom design system v0.1 — web tokens
   Source of truth: ReadytoFly Directions 4a (design-handoff).
   Mirrors readytofly-app/src/theme/*. Used by quiz-v2 now; the
   website adopts it in the website wave.

   Module coding: coral = CBT · dusk = ACT audio · marigold =
   exercise & primary actions. Rules: never red (alarm = deep
   coral text on coral tint) · one marigold action per screen ·
   type never sits on artwork · touch targets ≥48px, primary
   buttons 58px.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600&family=Figtree:wght@400;500;600;700&display=swap');

:root {
  /* Surfaces */
  --cream: #FFF7EB;
  --cream-dip: #FDEFD4;
  --card: #FFFFFF;
  --sand: #F0E4CE;
  --sand-strong: #E3D4B4;
  --sand-deep: #C4B48D;
  --sand-tint: #F5EBD8;

  /* Text */
  --ink: #33344A;
  --body: #6E6858;
  --muted: #8C8371;
  --label: #9A8C68;

  /* Module + action hues */
  --marigold: #F2A93B;
  --coral: #F07856;
  --coral-deep: #C4682F;
  --coral-tint: #FDEBD9;
  --dusk: #5A6B9E;
  --dusk-tint: #EEF1F8;

  /* Anxiety scale (cool → warm) */
  --calm: #8FA3C9;
  --panicked: #D97C5A;

  /* Type */
  --font-display: 'Fredoka', sans-serif; /* weight 500 */
  --font-body: 'Figtree', sans-serif;
  --text-display: 500 30px/1.1 var(--font-display);
  --text-title: 500 26px/1.1 var(--font-display);
  --text-strong: 600 16px/1.3 var(--font-body);
  --text-body: 500 14.5px/1.6 var(--font-body);
  --text-label: 700 11px/1.3 var(--font-body); /* caps, +2.5px tracking */
  --tracking-label: 2.5px;

  /* Shape */
  --radius-hero: 24px;
  --radius-card: 20px;
  --radius-squircle: 16px;
  --radius-pill: 999px;

  /* Space */
  --pad-screen: 22px;
  --gap-card: 10px;
  --gap-section: 18px;

  /* Touch */
  --touch-min: 48px;
  --touch-button: 58px;
  --touch-thumb: 56px;

  /* Motion — buoyant. Rise-and-settle; crossfade + 24px rise;
     nothing slides sideways. Pacer 4s in / 6s out. */
  --motion-duration: 400ms;
  --motion-rise: 24px;
  --motion-ease: cubic-bezier(0.22, 0.9, 0.36, 1);

  /* Shadows */
  --shadow-button: 0 8px 20px rgba(242, 169, 59, 0.35);
  --shadow-thumb: 0 4px 12px rgba(51, 52, 74, 0.25);

  /* ---- Web-only tokens (website wave, per 13b/13c) ---- */
  --ink-deep: #2B2C40;            /* footer ground */
  --gold-soft: #F2CB86;           /* sun-ring stroke, dark-band accent text */
  --gold-faint: #F6DFB4;          /* outer sun ring */
  --tint-gold: #FBF0DB;           /* stage-pill bg */
  --gold-label: #C99A34;          /* stage-pill text */
  --track: #F5EBD8;               /* progress track (alias of sand-tint) */
  --hairline: rgba(240, 228, 206, 0.7); /* section rules */
  --body-deep: #4A4536;           /* long-form article body */
  --body-soft: #5B5648;           /* secondary strong text */
  --label-faint: #B3A98F;         /* disabled step text */
  --shadow-card: 0 10px 26px rgba(51, 52, 74, 0.08);
  --shadow-card-hover: 0 10px 26px rgba(51, 52, 74, 0.12);
  --shadow-nav: 0 14px 36px rgba(51, 52, 74, 0.14);
  --shadow-cta-hover: 0 12px 26px rgba(242, 169, 59, 0.45);
  --marigold-press: #E29B2F;      /* active state — darkens, no move */

  /* Web display type scale (desktop demo is a 59% miniature of 1440;
     values anchored to the annotated real sizes: 17px article body,
     pill-nav paddings as drawn) */
  --text-hero: 500 clamp(38px, 5.4vw, 68px)/1.08 var(--font-display);
  --text-hero-sub: 500 clamp(20px, 2.4vw, 32px)/1.2 var(--font-display);
  --text-section: 500 clamp(26px, 3vw, 40px)/1.18 var(--font-display);
  --text-card-title: 500 clamp(18px, 1.8vw, 24px)/1.25 var(--font-display);
  --text-web-body: 500 16px/1.65 var(--font-body);
  --text-article: 500 17px/1.85 var(--font-body);

  --dur-web: 320ms; /* cursor-land transitions (13b) */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-rise: 0px; /* fades only */
  }
}