/* ============================================================================
 * Cub Klub TV — apex marketing tokens
 * Shares the Cub Klub brand palette (Cub Klub Design System) with the Nurseries
 * site; re-skinned for the streaming brand's warmer canvas and playful type.
 *   TEAL   #01707D  — primary, actions, links
 *   PURPLE #662483  — depth / dark anchor (chrome, hero, footer)
 *   YELLOW #FFCD00  — accent ONLY (badges/new markers) — never body/surfaces
 *   Alert red #B3261E stays reserved for in-product safety records — not used here.
 * Type: Fredoka (display/headings — rounded, warm) + Mulish (body/UI).
 * ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700&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{
  --ckn-teal:#01707d; --ckn-teal-strong:#015b66; --ckn-purple:#662483; --ckn-purple-deep:#3d1650;
  --ckn-yellow:#ffcd00; --ckn-orange:#f68b4f; --ckn-pink:#b5306e; --ckn-oat:#f4f1e8; --ckn-ink:#2d2d2d; --ckn-white:#ffffff;

  --teal-50:#e0f0f1; --teal-100:#c3dee0; --teal-300:#5a9aa1; --teal-500:#01707d; --teal-600:#015f6a; --teal-700:#015b66; --teal-900:#013238;

  --ckn-gradient-primary:linear-gradient(135deg,#3d1650 0%,#662483 120%);
  --ckn-gradient-soft:linear-gradient(120deg,#01707d 0%,#015b66 100%);
  --ckn-teal:#01707d;

  --paper:#faf6f0; --paper-2:#f3ece2; --surface:#ffffff;
  --ink-1:#2d2d2d; --ink-2:#5f5a55; --ink-3:#8f887f;
  --line:rgba(45,32,20,0.10); --line-strong:rgba(45,32,20,0.16);

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

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

  --brand:var(--ckn-teal); --brand-strong:var(--ckn-teal-strong); --accent:var(--ckn-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(--ckn-purple-deep); --bg-dark-2:#2a0f38;
  --border-1:var(--line); --border-on-dark:var(--line-on-dark);

  --font-sans:'Mulish','Helvetica Neue',system-ui,sans-serif;
  --font-serif:'Fredoka','Helvetica Neue',system-ui,sans-serif;
  --font-round:'Baloo 2','Fredoka','Helvetica Neue',system-ui,sans-serif;
  --font-mono:'Mulish',ui-monospace,monospace;

  --fs-display-xl:88px; --fs-display-lg:64px; --fs-display-md:52px;
  --fs-h1:42px; --fs-h2:34px; --fs-h3:24px; --fs-h4:20px;
  --fs-body-lg:18px; --fs-body:17px; --fs-body-sm:14px; --fs-caption:12px; --fs-overline:11px;
  --lh-tight:1.06; --lh-snug:1.12; --lh-normal:1.5; --lh-relaxed:1.6;
  --ls-display:-0.01em; --ls-tight:-0.01em; --ls-overline:0.14em;

  --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(45,20,40,0.07),0 1px 1px rgba(45,20,40,0.04);
  --shadow-md:0 6px 18px rgba(45,20,40,0.10),0 2px 6px rgba(45,20,40,0.05);
  --shadow-lg:0 24px 50px rgba(36,18,54,0.20),0 6px 14px rgba(36,18,54,0.10);
  --shadow-glow:0 0 0 4px rgba(1,112,125,0.18);

  --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:320ms;

  /* ── 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:#160a26; --paper-2:#1d0e30; --surface:#241236;
  --ink-1:#f7f4fb; --ink-2:#cdc4dd; --ink-3:#978bab;
  --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;
  --bg-1:var(--paper); --bg-2:var(--paper-2);
}