/* ==========================================================================
   Jolly Panda Studio — Design Tokens
   Every color, radius, shadow, spacing and type value used across the site
   is declared here as a CSS Custom Property. Nothing below should be
   hard-coded anywhere else in the codebase.

   COLOR SOURCE: every color below was sampled directly from the official
   mascot artwork (assets/mascot/jolly-panda-mascot.jpeg) via k-means /
   channel-filtered pixel extraction — nothing here is an invented or
   generic palette:
     - Panda Orange   #f0852e  → the hoodie (primary brand color)
     - Ember Orange    #be5a29  → hoodie shadow folds (hover / dark state)
     - Bamboo Yellow  #fcdd4e  → the badge's geometric backdrop
     - Blush Rose     #ebbeb1  → the mascot's cheek blush
     - Panda Ink      #362122  → the fur outline / eyes / nose
     - Warm Cream     #f0e6d9  → the mascot's white fur, warmed
   ========================================================================== */

:root {
  /* ---------- Color: Surfaces (from the mascot's cream fur) ---------- */
  --color-paper: #fdfaf5;        /* primary background */
  --color-paper-alt: #f7ecdf;    /* alternating section background */
  --color-surface: #ffffff;      /* card surfaces */
  --color-surface-tint: #f6ece1; /* subtle surface on paper-alt sections */

  /* ---------- Color: Ink (from the mascot's outline / eyes) ---------- */
  --color-ink: #34211f;          /* headings / high emphasis text */
  --color-ink-soft: #6b504b;     /* body copy */
  --color-ink-faint: #9c8078;    /* captions, meta */
  --color-border: rgba(52, 33, 31, 0.1);
  --color-border-strong: rgba(52, 33, 31, 0.18);

  /* ---------- Color: Panda Orange (primary — the hoodie) ---------- */
  --color-orange: #f0852e;
  --color-orange-dark: #be5a29;
  --color-orange-light: #fdead9;

  /* ---------- Color: Bamboo Yellow (secondary — the badge backdrop) ---------- */
  --color-yellow: #fcdd4e;
  --color-yellow-dark: #dcb52a;
  --color-yellow-light: #fff6d8;

  /* ---------- Color: Blush Rose (accent — the cheek blush) ---------- */
  --color-blush: #ebbeb1;
  --color-blush-dark: #d18f7c;
  --color-blush-light: #faeae5;

  /* ---------- Color: Warm Taupe (neutral accent — fur shading) ---------- */
  --color-taupe: #d3b5a8;
  --color-taupe-dark: #a9877a;
  --color-taupe-light: #f2e6de;

  /* ---------- Gradients (used sparingly — one signature moment only) ---------- */
  --gradient-brand: linear-gradient(135deg, var(--color-orange) 0%, var(--color-yellow) 100%);
  --gradient-ink: linear-gradient(180deg, #3c2521 0%, #2a1917 100%);

  /* ---------- Shadows (warm-tinted, matching the ink color) ---------- */
  --shadow-xs: 0 2px 6px rgba(52, 33, 31, 0.07);
  --shadow-soft: 0 10px 26px rgba(52, 33, 31, 0.09);
  --shadow-lift: 0 20px 44px rgba(52, 33, 31, 0.16);
  --shadow-orange: 0 14px 30px rgba(240, 133, 46, 0.32);
  --shadow-yellow: 0 14px 30px rgba(252, 221, 78, 0.35);

  /* ---------- Radii ---------- */
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 32px;
  --radius-xl: 48px;
  --radius-full: 999px;

  /* ---------- Spacing scale ---------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;

  /* ---------- Layout ---------- */
  --container-max: 1180px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);
  --nav-height: 84px;

  /* ---------- Typography ---------- */
  --font-en: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-fa: 'Vazirmatn', 'Inter', Tahoma, sans-serif;

  --fs-display: clamp(2.75rem, 6vw, 5rem);
  --fs-h1: clamp(2.25rem, 4.4vw, 3.5rem);
  --fs-h2: clamp(1.75rem, 3.2vw, 2.5rem);
  --fs-h3: clamp(1.25rem, 2vw, 1.5rem);
  --fs-lead: clamp(1.05rem, 1.4vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-tiny: 0.75rem;

  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-normal: 1.6;

  /* ---------- Motion ---------- */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 180ms;
  --duration-base: 320ms;
  --duration-slow: 600ms;

  /* ---------- Z-index scale ---------- */
  --z-nav: 100;
  --z-menu: 200;
  --z-modal: 300;
}

/* Dark surface used behind footer / CTA — a deep tint of the mascot's own
   ink color, so the "night" mode still reads as part of the same brand
   rather than a generic near-black. */
:root {
  --color-night: #2a1917;
  --color-night-soft: #3c2521;
  --color-on-night: #fdf3ea;
  --color-on-night-soft: rgba(253, 243, 234, 0.72);
}