/* ---------------------------------------------------------------------------
   tokens.css — the Wildgence design tokens.

   The palette is warm and hand-made: cream clay surfaces, moss greens for
   growth, lavender for "mind" topics and peach for calls to action.
   --------------------------------------------------------------------------- */

@font-face {
  font-family: 'Nunito Variable';
  src: url('../assets/fonts/nunito-variable.ttf') format('truetype-variations');
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Core palette (authoritative) ---- */
  --cream: #f8f1e3;
  --cream-raised: #fff8ea;
  --moss-900: #29452c;
  --moss-700: #59733a;
  --moss-500: #7f9b53;
  --moss-300: #b7c990;
  --peach: #f0a36e;
  --lavender: #b18ae6;
  --lavender-soft: #ded0f5;
  --ink: #213423;
  --ink-muted: #697466;

  /* ---- Derived / supporting palette ---- */
  --cream-sunk: #efe4d0;
  --cream-deep: #e7dac2;
  --moss-100: #e6eed6;
  --peach-deep: #d97f44;
  --peach-soft: #fbe0cb;
  --lavender-deep: #8a63c4;
  --lavender-ink: #4a3169;
  --bark: #9a6a44;
  --bark-deep: #6f4a2e;
  --sky: #cfe6ef;
  --sky-deep: #9ac9dc;
  --amber: #edb64f;
  --rose: #ef6250;

  --line: rgba(41, 69, 44, 0.12);
  --line-strong: rgba(41, 69, 44, 0.2);
  --focus-ring: #8a63c4;

  /* ---- Radii ---- */
  --radius-sm: 14px;
  --radius-md: 22px;
  --radius-lg: 30px;
  --radius-xl: 40px;
  --radius-pill: 999px;

  /* ---- Space ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 44px;

  /* ---- Elevation ---- */
  --shadow-soft:
    0 8px 24px rgba(58, 68, 44, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
  --shadow-raised:
    0 2px 4px rgba(58, 68, 44, 0.06),
    0 14px 30px rgba(58, 68, 44, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  --shadow-pressed:
    inset 0 3px 8px rgba(58, 68, 44, 0.16),
    inset 0 -1px 0 rgba(255, 255, 255, 0.35);
  --shadow-sunk:
    inset 0 2px 5px rgba(58, 68, 44, 0.14),
    inset 0 -1px 0 rgba(255, 255, 255, 0.5);
  --shadow-contact: 0 10px 18px -8px rgba(58, 68, 44, 0.4);

  /* ---- Motion ---- */
  --spring-duration: 280ms;
  --spring-ease: cubic-bezier(0.34, 1.42, 0.5, 1);
  --ease-out: cubic-bezier(0.22, 0.68, 0.24, 1);

  /* ---- Typography ---- */
  --font-sans:
    'Nunito Variable', ui-rounded, 'SF Pro Rounded', 'Hiragino Maru Gothic ProN', 'Varela Round',
    'Quicksand', 'Trebuchet MS', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-numeric:
    'Nunito Variable', ui-rounded, 'SF Pro Rounded', system-ui, sans-serif;

  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-md: 17px;
  --text-lg: 20px;
  --text-xl: 26px;
  --text-2xl: 32px;
  --text-3xl: 38px;

  /* ---- App frame ---- */
  --app-max-width: 480px;
  --app-gutter: 20px;
  --nav-height: 68px;

  /* ---- Safe areas (fall back to 0 where unsupported) ---- */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  /* Tileable clay grain, layered at low opacity over large cream surfaces. */
  --grain: url('../assets/textures/cream-grain.webp');
  --grain-size: 192px;
}

/* Narrow phones (iPhone SE and friends): tighten the rhythm a little. */
@media (max-width: 359px) {
  :root {
    --app-gutter: 16px;
    --text-3xl: 32px;
    --text-2xl: 27px;
    --text-xl: 23px;
    --nav-height: 64px;
  }
}