/* ============================================================================
 * Cub Klub Store — storefront design tokens
 * Shares the Cub Klub family palette; re-skinned for the values-led shop.
 *   TEAL   #01707D  — primary · leads, CTAs, links, nav
 *   PURPLE #662483  — secondary · supports, highlights, dark anchors
 *   YELLOW #FFCD00  — accent ONLY · badges, dots, small joyful marks
 *   INK    #26201C  — soft text (never pure black)
 *   Illustration colours (bear brown / fox orange / cheek pink) = artwork only.
 * Type: Playfair Display (display/headings) + Nunito Sans (body/UI).
 * ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Mulish:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

:root{
  --teal:#01707d; --teal-strong:#015b66; --teal-900:#024049; --teal-700:#015b66;
  --teal-500:#01707d; --teal-300:#5ca7b0; --teal-100:#cfe6e8; --teal-50:#e9f3f4;
  --purple:#662483; --purple-700:#4f1c66; --purple-deep:#3a1450; --purple-100:#e6d8ee; --purple-50:#f2ebf6;
  --yellow:#ffcd00; --yellow-100:#fff1b8; --yellow-50:#fff8dd;
  --bear:#9a6638; --fox:#e97b3c; --cream:#f2e1c4; --cheek:#f4a9ce;

  --ink:#26201c; --ink-1:#26201c; --ink-2:#5c544d; --ink-3:#8d857c;
  --paper:#fbf8f3; --paper-2:#f4efe6; --mist:#f0ebe1; --surface:#ffffff;
  --line:rgba(38,32,28,0.10); --line-strong:rgba(38,32,28,0.16);

  --on-dark-1:#ffffff; --on-dark-2:rgba(255,255,255,0.82); --on-dark-3:rgba(255,255,255,0.56);
  --line-on-dark:rgba(255,255,255,0.16);

  --ok:#1f8a5b; --ok-bg:#e2f2ea; --warn:#b0771a; --warn-bg:#f7ecd4;
  --risk:#c0492f; --risk-bg:#f8e6e1; --info:#01707d; --info-bg:#e0f0f1; --sale:#b3266e;

  --brand:var(--teal); --brand-strong:var(--teal-strong); --accent:var(--yellow);
  --fg-1:var(--ink-1); --fg-2:var(--ink-2); --fg-3:var(--ink-3);
  --fg-on-dark-1:var(--on-dark-1); --fg-on-dark-2:var(--on-dark-2); --fg-on-dark-3:var(--on-dark-3);
  --bg-1:var(--paper); --bg-2:var(--paper-2);
  --bg-dark-1:var(--purple-deep); --bg-dark-2:#2c0f3d;
  --border-1:var(--line); --border-on-dark:var(--line-on-dark);

  --grad-purple:linear-gradient(145deg,#3a1450 0%,#662483 120%);
  --grad-teal:linear-gradient(145deg,#01707d 0%,#015b66 100%);
  --grad-sun:radial-gradient(120% 120% at 78% 20%,#fff1b8 0%,#ffcd00 42%,#f8b800 100%);

  --font-sans:'Mulish','Helvetica Neue',system-ui,sans-serif;
  --font-serif:'Fredoka','Helvetica Neue',system-ui,sans-serif;

  --fs-display-xl:82px; --fs-display-lg:60px; --fs-display-md:46px;
  --fs-h1:40px; --fs-h2:32px; --fs-h3:24px; --fs-h4:19px;
  --fs-body-lg:18px; --fs-body:16px; --fs-body-sm:14px; --fs-caption:12px; --fs-overline:11px;
  --lh-tight:1.05; --lh-snug:1.14; --lh-normal:1.55; --lh-relaxed:1.65;
  --ls-display:-0.015em; --ls-tight:-0.01em; --ls-overline:0.16em;

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
  --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:128px;
  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:22px; --r-xl:30px; --r-pill:999px;

  --shadow-sm:0 1px 2px rgba(38,20,10,0.06),0 1px 1px rgba(38,20,10,0.04);
  --shadow-md:0 8px 22px rgba(58,30,15,0.09),0 2px 6px rgba(58,30,15,0.05);
  --shadow-lg:0 26px 54px rgba(40,18,12,0.16),0 8px 16px rgba(40,18,12,0.08);
  --shadow-glow:0 0 0 4px rgba(1,112,125,0.16);

  --ease-standard:cubic-bezier(0.2,0.8,0.2,1); --ease-emphasis:cubic-bezier(0.16,1,0.3,1);
  --dur-fast:120ms; --dur-base:200ms; --dur-slow:340ms;
  --container:1200px;

  /* ── motion (Design & Motion Skills - Canonical Standard §1) ── */
  --ease-standard:cubic-bezier(.2,.8,.2,1); --ease-emphasis:cubic-bezier(.16,1,.3,1);
  --ease-out:cubic-bezier(.16,1,.3,1); --ease-in:cubic-bezier(.4,0,1,1); --ease-in-out:cubic-bezier(.65,0,.35,1);
  --dur-instant:100ms; --dur-fast:180ms; --dur-base:260ms; --dur-slow:400ms; --dur-deliberate:600ms; --dur-cinematic:1200ms;
}

html[data-theme="dark"]{
  --paper:#160a24; --paper-2:#1d0e30; --mist:#241236; --surface:#241236;
  --ink-1:#f6f2fa; --ink-2:#cabfda; --ink-3:#948aa8;
  --line:rgba(255,255,255,0.12); --line-strong:rgba(255,255,255,0.2);
  --brand:#3fb5c1; --brand-strong:#6fd0da;
  --teal-50:#22303a; --teal-100:#2b3c48; --purple-50:#26173a; --purple-100:#33204a; --yellow-50:#2e2610;
  --bg-1:var(--paper); --bg-2:var(--paper-2);
  --shadow-md:0 8px 22px rgba(0,0,0,0.4),0 2px 6px rgba(0,0,0,0.3);
  --shadow-lg:0 26px 54px rgba(0,0,0,0.5),0 8px 16px rgba(0,0,0,0.35);
}