/* =========================================================================
   What-A-Toy! — Design Tokens (single source of design truth)
   ========================================================================= */
:root {
  /* ---- Brand palette ---- */
  --red: #D8392B;          /* primary — CTAs, nav */
  --red-dark: #B42C20;     /* hover / pressed red */
  --navy: #2A3B6E;         /* text, outlines, accents */
  --gold: #F2B82B;         /* stripes, decorative */
  --cream: #F4E8D3;        /* card surfaces / logo letter tone */
  --bg-yellow: #FFF6DC;    /* page background */

  /* ---- Channel tokens (R,G,B triplets for rgba(var(--x), <alpha>)) ---- */
  --navy-rgb: 42, 59, 110;
  --cream-rgb: 244, 232, 211;
  --white-rgb: 255, 255, 255;
  --gold-rgb: 242, 184, 43;

  /* ---- Scroll background journey (per-section page colors) ---- */
  --bg-sun: #F9CE51;       /* golden yellow — hero/intro/gallery */
  --bg-red: #D8392B;       /* warm red — products/about/contact */
  --bg-navy: #1E2A52;      /* deep navy — locations (globe pops) */

  /* ---- Semantic text ---- */
  --ink: #22305C;          /* primary text */
  --muted: #6B6552;        /* secondary / muted text */
  --on-red: #F8EFDD;       /* text on red surfaces */

  /* ---- Surfaces ---- */
  --surface: var(--cream);
  --surface-alt: #FBF3E2;
  --surface-card: #FFFDF6;
  --border: rgba(42, 59, 110, 0.16);
  --border-strong: rgba(42, 59, 110, 0.32);
  --scrim: rgba(34, 48, 92, 0.86);   /* navy-tinted modal/lightbox backdrop */

  /* ---- Type families ---- */
  --font-display: 'Fredoka', system-ui, sans-serif;
  --font-body: 'Nunito', system-ui, -apple-system, Segoe UI, sans-serif;

  /* ---- Type scale (fluid) ----
     Enlarged for legibility (Material Design 3 spirit: generous, readable
     type). Base is 18px; the display sizes step up a full M3-style scale. */
  --fs-xs: 0.85rem;
  --fs-sm: 1rem;
  --fs-base: 1.125rem;
  --fs-md: 1.3rem;
  --fs-lg: clamp(1.45rem, 1.2rem + 1vw, 1.95rem);
  --fs-xl: clamp(1.9rem, 1.45rem + 1.9vw, 2.7rem);
  --fs-2xl: clamp(2.5rem, 1.8rem + 3vw, 3.9rem);
  --fs-3xl: clamp(3.2rem, 2rem + 5.5vw, 6.5rem);
  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-base: 1.6;

  /* ---- Spacing scale ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 5rem;
  --space-9: 7rem;

  /* ---- Radius scale (M3-style generous rounding) ---- */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-xl: 40px;
  --radius-pill: 999px;

  /* ---- Shadow tokens ---- */
  --shadow-sm: 0 2px 6px rgba(42, 59, 110, 0.10);
  --shadow-md: 0 8px 22px rgba(42, 59, 110, 0.14);
  --shadow-lg: 0 18px 44px rgba(42, 59, 110, 0.18);
  --shadow-red: 0 10px 24px rgba(216, 57, 43, 0.32);
  --shadow-nav: 0 4px 20px rgba(42, 59, 110, 0.12);   /* sticky navbar (rest) */

  /* ---- Shared display-title text-shadow (cream halo + soft navy depth) ---- */
  --text-shadow-display: 0 2px 0 var(--cream), 0 6px 18px rgba(42, 59, 110, 0.18);

  /* ---- Hover-lift scale (translateY) ---- */
  --lift-sm: -2px;
  --lift-md: -4px;
  --lift-lg: -6px;

  /* ---- Layout ----
     Container widths are in rem so they widen on large monitors together with
     the fluid root font-size (see html{} in base.css). 77.5rem = 1240px @16. */
  --container: 77.5rem;
  --container-narrow: 50rem;
  --nav-h: 80px;

  /* ---- Motion ---- */
  --dur-fast: 0.18s;
  --dur-base: 0.34s;
  --dur-slow: 0.6s;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---- Z-index ---- */
  --z-nav: 100;
  --z-overlay: 900;
  --z-lightbox: 1000;
  --z-transition: 1100;
}