/* ============================================================
   LUMIO — Design system v2 tokens
   Loaded BEFORE styles.css so the old visual stays untouched
   until each screen is individually restyled. The new screens
   reference these tokens directly.
   ============================================================ */

:root {
  /* ── Sky: hazy mint-teal, mistier than today ───────────── */
  --c-sky-dawn:        #D8E4D5;
  --c-sky-day:         #B8D4C8;
  --c-sky-deep:        #6A9A8C;

  /* ── Forest: punchier than today, with mist & sunlit edge ─ */
  --c-forest:          #4E8A53;
  --c-forest-deep:     #2F5733;
  --c-forest-mist:     #A4BFA8;
  --c-leaf-bright:     #7BC55C;
  --c-leaf:            #5FA858;

  /* ── Sun & warm light ──────────────────────────────────── */
  --c-sun:             #FFD56B;
  --c-glow-warm:       #FFE9A8;

  /* ── Amber CTA (only orange in the system) ─────────────── */
  --c-gold:            #FFC857;   /* gradient start */
  --c-amber:           #F2A33C;   /* gradient end */
  --c-amber-deep:      #C97818;   /* CTA shadow */

  /* ── Earth: warm anchor for amber CTA ──────────────────── */
  --c-bark:            #6B4423;
  --c-soil:            #8B6A47;
  --c-stone:           #C9B79C;

  /* ── Surface: green-tinted cream, not warm cream ───────── */
  --c-cream:           #EAEAD5;
  --c-cream-soft:      #F2F0DC;
  --c-cream-glass:     rgba(234, 234, 213, 0.85);

  /* ── Display text: sage default, amber when scene is green ─ */
  --c-display-sage:    #5E7A65;
  --c-display-amber:   #F4A52A;
  --c-ink:             #38463C;
  --c-ink-soft:        #6E8074;
  --c-ink-faint:       #8A968F;

  /* ── Feedback ──────────────────────────────────────────── */
  --c-success:         #5C9E5C;
  --c-error:           #C2604C;
  --c-wrong-soft:      #F5D6CC;

  /* ── Atmosphere (depth layer) ──────────────────────────── */
  --c-haze-mint:       rgba(168, 200, 181, 0.40);
  --c-shadow-forest:   rgba(47, 87, 51, 0.35);

  /* ── Typography ────────────────────────────────────────── */
  --font-display:      "Fredoka", "Baloo 2", "Nunito", system-ui, sans-serif;
  --font-body:         "Nunito", "Quicksand", system-ui, sans-serif;

  --size-display-xl:   44px;
  --size-display-lg:   32px;
  --size-display-md:   24px;
  --size-body-lg:      18px;
  --size-body:         16px;
  --size-body-sm:      14px;
  --size-button:       18px;

  --lh-tight:          1.15;
  --lh-body:           1.45;

  --weight-display:    600;
  --weight-body:       400;
  --weight-body-bold:  700;

  /* default heading colour (screens override with --pop variant
     when sage doesn't read against a saturated scene) */
  --color-heading:     var(--c-display-sage);
  --color-heading-pop: var(--c-display-amber);

  /* ── Shape: organic squircle everywhere ────────────────── */
  --r-card-sm:         24px;
  --r-card:            32px;
  --r-card-lg:         40px;
  --r-pill:            9999px;
  --r-icon-btn:        50%;

  /* ── Spacing scale (4-based) ───────────────────────────── */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;

  /* ── Shadows: warm-tinted with forest undertone ────────── */
  --shadow-soft:
    0 2px 6px rgba(47, 87, 51, 0.08),
    0 8px 24px rgba(47, 87, 51, 0.12);
  --shadow-card:
    0 4px 12px rgba(47, 87, 51, 0.10),
    0 16px 40px rgba(47, 87, 51, 0.22);
  --shadow-cta:
    0 2px 4px rgba(217, 132, 42, 0.30),
    0 8px 18px rgba(217, 132, 42, 0.35);
  --shadow-cta-press:
    0 1px 2px rgba(217, 132, 42, 0.30),
    0 3px 6px rgba(217, 132, 42, 0.30);

  /* ── Gradients ─────────────────────────────────────────── */
  --grad-cta:          linear-gradient(180deg, var(--c-gold) 0%, var(--c-amber) 100%);
  --grad-cta-hl:       linear-gradient(180deg, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0) 50%);
  --grad-sky:          linear-gradient(180deg, var(--c-sky-dawn) 0%, var(--c-sky-day) 70%, var(--c-sky-deep) 100%);

  /* ── Motion ────────────────────────────────────────────── */
  --ease-spring:       cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-soft:         cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:          120ms;
  --dur-base:          260ms;
  --dur-slow:          480ms;
  --dur-idle:          3200ms;

  /* ── Layout frame ──────────────────────────────────────── */
  --frame-max-w:       440px;
  --frame-pad-x:       20px;
  --frame-safe-top:    env(safe-area-inset-top, 0);
  --frame-safe-bot:    env(safe-area-inset-bottom, 0);
}