/* =========================================================
   Juno Toys — design tokens ("Toy Box")
   Every colour, size, radius, shadow and motion value in the theme
   comes from here. Components reference tokens, never raw values,
   so a re-skin is an edit to this file only.
   ========================================================= */

:root {
  /* ---------- Colour: brand scales ---------- */
  /* Tangerine — the brand colour. 500 is for fills with ink text; 600+ for orange text. */
  --primary-50: #fff4ec;
  --primary-100: #ffe4d0;
  --primary-200: #ffc9a3;
  --primary-300: #ffa56e;
  --primary-400: #ff8547;
  --primary-500: #ff6b2c;
  --primary-600: #c9460f;
  --primary-700: #a8390b;
  --primary-rgb: 255 107 44;

  /* Grape — secondary accent (sale badges, highlights). */
  --accent-50: #f5f1ff;
  --accent-100: #eae2ff;
  --accent-200: #d5c6ff;
  --accent-300: #b79cff;
  --accent-400: #9874f5;
  --accent-500: #7c4deb;
  --accent-600: #6334d6;
  --accent-rgb: 124 77 235;

  /* Mint — success, stock, "learning". */
  --mint-50: #e9fbf4;
  --mint-100: #cdf5e6;
  --mint-200: #9febd0;
  --mint-400: #2fd4a0;
  --mint-500: #12b886;
  --mint-600: #087556;

  /* Sky — info, blog. */
  --sky-50: #eaf6ff;
  --sky-100: #d4edff;
  --sky-200: #a9dbff;
  --sky-400: #47b4ff;
  --sky-500: #1a9bf0;
  --sky-600: #0a64a4;
  --sky-700: #075d97;

  /* Sunshine — stars, highlights (name kept as "cream" for compatibility). */
  --cream-50: #fffbea;
  --cream-200: #fff0a8;
  --cream-400: #ffc93c;
  --cream-600: #a87b00;

  --danger-50: #fff0f0;
  --danger-200: #ffc9c9;
  --danger-600: #c42424;

  --whatsapp-green: #25d366; /* brand colour; ink text on it is 9.6:1 */

  /* Ink-tinted neutrals: greys lean indigo so they sit with the ink text instead of looking default-slate. */
  --gray-50: #f7f6fb;
  --gray-100: #efedf6;
  --gray-200: #e1deec;
  --gray-300: #c9c5da;
  --gray-400: #6e6a88;
  --gray-500: #5f5b7a;
  --gray-600: #4a4666;
  --gray-700: #37345a;
  --gray-800: #26244a;
  --gray-900: #1d1b3a;
  --gray-950: #12112a;

  --ink: #1d1b3a;
  --ink-rgb: 29 27 58;
  --paper: #fff9f0;
  --paper-rgb: 255 249 240;
  --white: #fff;
  --white-rgb: 255 255 255;

  /* ---------- Colour: semantic (components use these) ---------- */
  --color-bg: var(--paper);
  --color-surface: var(--white);
  --color-surface-muted: var(--gray-50);
  --color-text: var(--gray-800);
  --color-text-muted: var(--gray-500);
  --color-text-subtle: var(--gray-400);
  --color-heading: var(--ink);
  --color-border: var(--gray-200);
  --color-border-strong: var(--ink);
  --color-brand: var(--primary-500);
  --color-brand-text: var(--primary-600);
  --color-price: var(--primary-600);
  --color-link: var(--primary-600);
  --color-overlay: rgb(var(--ink-rgb) / 0.45);
  --color-selection: var(--cream-200);
  --color-on-dark: var(--white);
  --color-on-dark-muted: var(--gray-300);
  --color-on-dark-line: rgb(var(--white-rgb) / 0.14);

  --btn-primary-bg: var(--primary-500);
  --btn-primary-bg-hover: var(--primary-400);
  --btn-primary-text: var(--ink);
  --btn-dark-bg: var(--ink);
  --btn-dark-text: var(--white);

  /* ---------- Typography ---------- */
  --font-sans: 'Nunito', ui-rounded, system-ui, sans-serif;
  --font-display: 'Fredoka', 'Nunito', ui-rounded, system-ui, sans-serif;

  /* Type scale in rem so it follows the visitor's browser text-size setting (px comments = default 16px root). */
  --text-3xs: 0.625rem; /* 10px */
  --text-2xs: 0.6875rem; /* 11px */
  --text-xs: 0.75rem; /* 12px */
  --text-sm: 0.8125rem; /* 13px */
  --text-md: 0.875rem; /* 14px */
  --text-base: 1rem; /* 16px */
  --text-lg: 1.125rem; /* 18px */
  --text-xl: 1.25rem; /* 20px */
  --text-2xl: 1.5rem; /* 24px */
  --text-3xl: clamp(1.625rem, 1.2rem + 1.4vw, 1.875rem);
  --text-4xl: clamp(1.875rem, 1.3rem + 2vw, 2.375rem);
  --text-5xl: clamp(2.25rem, 1.4rem + 3vw, 3.25rem);
  --text-hero: clamp(2.5rem, 1.7rem + 3.2vw, 4rem); /* ~40px phone → 64px desktop */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  /* Weight roles — components use these, not raw weights. Fredoka (display) runs heavy: headings sit at 500, while
     buttons, labels and prices (--fw-ui / --fw-figure) keep 600 so they still read as actions and figures;
     anything at or below 13px uses --fw-ui (heavy weights blur into blobs at small sizes). */
  --fw-display: var(--fw-medium);
  --fw-heading: var(--fw-medium);
  --fw-figure: var(--fw-semibold);
  --fw-ui: var(--fw-semibold);
  --fw-hero: var(--fw-medium); /* the hero is the biggest text on the site; heavier weights overpower the photo */

  --lh-none: 1;
  --lh-tight: 1.08;
  --lh-hero: 1.15;
  --lh-snug: 1.25;
  --lh-normal: 1.55;
  --lh-relaxed: 1.7;

  --tracking-tight: -0.01em;
  --tracking-wide: 0.05em;
  --tracking-wider: 0.12em;

  /* ---------- Space (4px grid) ---------- */
  --space-0-5: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-3-5: 14px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --section-pad: clamp(56px, 4rem + 3vw, 112px);

  /* ---------- Layout ---------- */
  --container-w: 1280px;
  --gutter: var(--space-4);
  --header-h: 72px;
  --scroll-offset: 96px;

  /* ---------- Shape ---------- */
  --radius-2xs: 4px;
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 26px;
  --radius-2xl: 32px;
  --radius-3xl: 40px;
  --radius-pill: 999px;
  --border-w: 2px;
  --border-strong: var(--border-w) solid var(--color-border-strong);
  --color-border-input: var(--gray-300);
  --input-border: var(--border-w) solid var(--color-border-input);
  --input-radius: var(--radius-md);

  /* ---------- Elevation ---------- */
  /* Soft shadows are ink-tinted, not black. "Pop" shadows are the hard offset sticker look. */
  --shadow-sm: 0 2px 8px rgb(var(--ink-rgb) / 0.08);
  --shadow-md: 0 10px 24px rgb(var(--ink-rgb) / 0.1);
  --shadow-lg: 0 20px 40px rgb(var(--ink-rgb) / 0.12);
  --shadow-drawer: -12px 0 48px rgb(var(--ink-rgb) / 0.22);
  --shadow-pop-sm: 3px 3px 0 var(--ink);
  --shadow-pop: 5px 5px 0 var(--ink);
  --shadow-pop-lg: 8px 8px 0 var(--ink);
  --focus-ring: 0 0 0 3px var(--primary-200);
  --focus-ring-danger: 0 0 0 3px var(--danger-50);

  /* ---------- Motion ---------- */
  --dur-fast: 160ms;
  --dur-base: 260ms;
  --dur-slow: 480ms;
  --dur-reveal: 700ms;
  --dur-float: 6s;
  --dur-float-delay: 2s;
  --dur-marquee: 40s;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --lift: translate(-3px, -3px);
  --press: translate(3px, 3px);

  /* ---------- Layers ---------- */
  --z-header: 50;
  --z-overlay: 60;
  --z-drawer: 70;
  --z-skip: 100;

  /* ---------- Decorative ---------- */
  --pattern-dots: radial-gradient(rgb(var(--ink-rgb) / 0.07) 1.2px, transparent 1.3px) 0 0 / 22px 22px;
  /* Scalloped/wavy section edges: three mask layers (wave top, solid middle, wave bottom). */
  --wave-h: 22px;
  --wave-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='22' viewBox='0 0 120 22' preserveAspectRatio='none'%3E%3Cpath d='M0 22V12C20 12 20 2 40 2s20 10 40 10 20-10 40-10v20z'/%3E%3C/svg%3E");
  --wave-bottom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='22' viewBox='0 0 120 22' preserveAspectRatio='none'%3E%3Cpath d='M0 0v10c20 0 20 10 40 10s20-10 40-10 20 10 40 10V0z'/%3E%3C/svg%3E");
  --mask-wavy: var(--wave-top) top left / 120px var(--wave-h) repeat-x,
    linear-gradient(#000 0 0) 0 calc(var(--wave-h) - 1px) / 100% calc(100% - 2 * var(--wave-h) + 2px) no-repeat,
    var(--wave-bottom) bottom left / 120px var(--wave-h) repeat-x;
  --mask-wavy-bottom: linear-gradient(#000 0 0) 0 0 / 100% calc(100% - var(--wave-h) + 1px) no-repeat,
    var(--wave-bottom) bottom left / 120px var(--wave-h) repeat-x;
  --mask-wavy-top: var(--wave-top) top left / 120px var(--wave-h) repeat-x,
    linear-gradient(#000 0 0) 0 calc(var(--wave-h) - 1px) / 100% 100% no-repeat;

  /* Hand-drawn doodles (ink outline + candy fill) used around section titles. */
  --doodle-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M24 4l5.6 12.4L43 18l-10 9.4 2.8 13.6L24 34.2 12.2 41 15 27.4 5 18l13.4-1.6z' fill='%23ffc93c' stroke='%231d1b3a' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E");
  --doodle-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M24 41S6 30 6 17.5C6 11 11 6.5 16.5 6.5c3.6 0 6 2 7.5 4.5 1.5-2.5 3.9-4.5 7.5-4.5C37 6.5 42 11 42 17.5 42 30 24 41 24 41z' fill='%23ff8547' stroke='%231d1b3a' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E");
  --doodle-swirl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M8 30c0-10 8-16 16-16s12 6 12 11-4 8-8 8-6-3-6-6 2-4 4-4' fill='none' stroke='%237c4deb' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
  --doodle-cloud: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 40'%3E%3Cpath d='M16 34a10 10 0 0 1-1-20 13 13 0 0 1 25-3 9 9 0 0 1 10 9 7 7 0 0 1-1 14z' fill='%23fff' stroke='%231d1b3a' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E");
  --doodle-sparkle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M24 4c2 12 8 18 20 20-12 2-18 8-20 20-2-12-8-18-20-20 12-2 18-8 20-20z' fill='%232fd4a0' stroke='%231d1b3a' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E");
  --candy-stripe: repeating-linear-gradient(90deg, var(--primary-500) 0 40px, var(--cream-400) 40px 80px, var(--mint-400) 80px 120px, var(--sky-400) 120px 160px, var(--accent-400) 160px 200px);

  /* Candy tints cycled across cards so grids feel like a box of crayons, not a catalogue. */
  --tint-1: var(--primary-100);
  --tint-2: var(--cream-200);
  --tint-3: var(--mint-100);
  --tint-4: var(--sky-100);
  --tint-5: var(--accent-100);
  --tilt: 1.5deg;
  /* Text-decoration recipes: positioned from the text baseline, so they sit right in any font. */
  --marker-thickness: 0.42em;
  --marker-offset: -0.32em;
  --wavy-thickness: 0.075em;
  --wavy-offset: 0.14em;
  --squiggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='12' viewBox='0 0 40 12'%3E%3Cpath d='M0 6c5 0 5-4 10-4s5 4 10 4 5-4 10-4 5 4 10 4' fill='none' stroke='%23ffc93c' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
}