/* Žaislų Dėžė V3 — Užburtas žaislų teatras
   Design tokens for WordPress child theme. Load first, before base.css.
   Deviations from Design Bible V3 are marked NOTE. */

:root {
  /* ---------- Color ---------- */
  --ink-950: #151622;
  --ink-900: #1d1c2c;
  --plum-800: #31243b;
  --plum-700: #4a2d52;      /* NOTE: added — logotipo vidurinis plum tonas */
  --plum-600: #5c4b70;      /* NOTE: added — mascot/figure tone readable on dark stages */

  --paper-050: #fff9ec;
  --paper-100: #f3e6ce;
  --paper-200: #e6d2ae;

  --crimson-600: #b33a46;
  --crimson-700: #7d2830;   /* NOTE: added — primary plaque 3D edge */
  --crimson-500: #d35450;

  --gold-500: #d5a63b;
  --gold-300: #e8c96a;
  --gold-700: #8a6422;      /* NOTE: added — auksinis sesely; logotipe ir arku ornamentuose */

  --teal-600: #347e77;
  --dust-blue-500: #6677a5;
  --dust-blue-600: #4f5d80;  /* FIX 2026-08-12: dust-blue-500 tekstui ant pergamento duoda 4,22:1 (reikia 4,5) ir 3,59:1 ant paper-100. Šis — 6,23 ir 5,30. */
  --lavender-300: #b6a7cc;
  --success-600: #2e6b3a;  /* FIX: buvo #2f7d62 — dE 12.5 nuo teal-600, susiliedavo */
  --danger-600: #b4451c;   /* FIX: buvo #a73542 — dE 4.2 nuo crimson-600, akiai ta pati spalva */

  /* Semantic */
  --bg-page: var(--paper-050);
  --bg-brand: var(--ink-900);
  --bg-section-alt: var(--paper-100);
  --bg-product-scene: #ffffff;
  --text-strong: var(--ink-950);
  --text-body: var(--plum-800);
  /*
   * FIX 2026-08-12. Buvo --dust-blue-500, ir tai NEATITIKO WCAG AA: 4,22:1 ant
   * paper-050, 3,59:1 ant paper-100, o smulkiam tekstui reikia 4,5:1. Ne
   * teorija — išmatuota gyvai prekės puslapyje: tuo tonu rašomi VISI prekių
   * skaičiai kataloge, meniu paantraštės ir „zd-caption“ tekstai, t. y. bene
   * tankiausiai kartojama smulki informacija visoje svetainėje.
   *
   * Pats --dust-blue-500 NEKEIČIAMAS: jis naudojamas kaip užpildo spalva
   * (filtrų langeliai, --accent-4), o tam kontrasto riba netaikoma.
   */
  --text-muted: var(--dust-blue-600);            /* only on paper surfaces */
  --text-muted-on-dark: var(--lavender-300);     /* AA 7.5:1 on ink — dust-blue is 3.8:1, never for small text on ink */
  --line: var(--paper-200);
  --focus-ring: var(--gold-500);

  /* Category accent fallback cycle (taxonomy meta overrides these) */
  --accent-1: var(--crimson-600);
  --accent-2: var(--gold-500);
  --accent-3: var(--teal-600);
  --accent-4: var(--dust-blue-500);
  --accent-5: var(--lavender-300);

  /* ---------- Typography ---------- */
  /* Display: Fraunces, self-hosted kaip "Fraunces ZD".
     PATIKRINTA 2026-08-11 (fontTools): fraunces-latin-ext-700.woff2 turi visus 18
     lietuviskuju rasmenu, iskaitant U+016B (u su makronu). Ankstesnis perejimas
     prie Lora buvo pagristas klaidinga premisa ir Lora failu pakete nera. */
  --font-display: "Fraunces ZD", Georgia, serif;
  --font-ui: "Manrope ZD", system-ui, sans-serif;

  --fs-hero: clamp(2.625rem, 1.6rem + 4.3vw, 4.375rem);   /* 42 → 70 */
  --fs-h1: clamp(1.875rem, 1.25rem + 2.6vw, 2.75rem);      /* 30 → 44 */
  --fs-h2: clamp(1.75rem, 1.2rem + 2.3vw, 2.875rem);       /* 28 → 46 */
  --fs-h3: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);        /* 24 → 34 */
  --fs-lead: clamp(1.0625rem, 1rem + .2vw, 1.25rem);       /* 17 → 20 */
  --fs-body: 1rem;
  --fs-ui: .875rem;
  --fs-price: clamp(1.25rem, 1.05rem + .8vw, 1.75rem);     /* 20 → 28 */
  --fs-caption: .78125rem;

  --lh-display: 1.02;
  --lh-hero: .97;
  --lh-body: 1.6;
  --ls-display: -.015em;

  /* ---------- Radius (never one radius everywhere) ---------- */
  --r-field: 12px 5px 10px 4px;
  --r-card-a: 18px 8px 16px 6px;
  --r-card-b: 8px 18px 6px 16px;
  --r-panel: 24px 10px 22px 8px;
  --r-badge: 4px 9px 3px 8px;
  --r-chip: 4px 11px 3px 9px;
  --r-medallion: 52% 48% 50% 50% / 50% 52% 48% 50%;
  --r-arch: 50% 50% 14px 14px / 34% 34% 3% 3%;
  --r-stage: 50% 50% 18px 18px / 30% 30% 3% 3%;

  /* ---------- Border / elevation ---------- */
  --bw-ui: 1.5px;
  --bw-illustration: 3px;
  --plaque-edge: inset 2px -2px 0 rgba(232, 201, 106, .55), 0 4px 0 var(--crimson-700);
  --plaque-edge-hover: inset 2px -2px 0 var(--gold-300), 0 6px 0 var(--crimson-700);
  --plaque-edge-active: inset 2px -2px 0 rgba(232, 201, 106, .4), 0 1px 0 var(--crimson-700);
  --shadow-drawer: -24px 0 60px rgba(21, 22, 34, .4);
  --backdrop: rgba(21, 22, 34, .72);

  /* ---------- Space (4px base) ---------- */
  --space-1: .25rem;  --space-2: .5rem;   --space-3: .75rem;  --space-4: 1rem;
  --space-6: 1.5rem;  --space-8: 2rem;    --space-12: 3rem;   --space-16: 4rem;
  --space-24: 6rem;   --space-32: 8rem;

  --container: 1320px;
  --gutter-desktop: 3.75rem;
  --gutter-tablet: 1.5rem;
  --gutter-mobile: 1rem;
  --section-y: clamp(4rem, 2.5rem + 5vw, 8rem);

  /* ---------- Controls ---------- */
  --control-h: 52px;
  --control-h-lg: 56px;
  --tap-min: 44px;
  --cta-min-w: 112px;
  --cta-max-w: 320px;

  /* ---------- Motion ---------- */
  --ease-ui: cubic-bezier(.2, .8, .2, 1);
  --ease-reveal: cubic-bezier(.22, 1, .36, 1);
  --ease-press: cubic-bezier(.4, 0, .2, 1);
  --ease-swing: cubic-bezier(.34, 1.2, .64, 1);

  --d-press: 120ms;
  --d-fast: 160ms;
  --d-ui: 240ms;
  --d-drawer: 300ms;
  --d-reveal: 460ms;
  --d-hero: 1200ms;
  --d-success: 1300ms;
  --d-idle: 7s;

  --reveal-shift: 22px;
  --stagger: 50ms;
  --lift-card: -4px;
  --lift-button: -2px;
  --parallax-max: 12px;
}

/* Focus is one rule everywhere: 3px gold ring, 2px ink gap. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: inherit;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --d-press: 0ms; --d-fast: 0ms; --d-ui: 0ms; --d-drawer: 0ms;
    --d-reveal: 0ms; --d-hero: 0ms; --d-success: 0ms; --d-idle: 0s;
    --reveal-shift: 0px; --stagger: 0ms; --lift-card: 0px; --lift-button: 0px; --parallax-max: 0px;
  }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}