/* ============================================================
   JoJo Aquatics — token bridge + semantic layer.

   theme.json owns every raw value the editor exposes (colors,
   font families, font sizes, spacing, shadows) and the custom
   group (radii, control sizes, containers, motion, z-index).
   Those auto-emit --wp--preset--* and --wp--custom--* properties.

   This file does NOT re-declare brand hex. It (1) re-exposes the
   presets under the design-system's original token names so brand
   markup can use them, (2) defines the ~40 semantic aliases, the
   composite font role shorthands, weights, leading, tracking, and
   (3) ships the helpers theme.json has no schema for (.jojo-display,
   .jojo-wash, --ring). The only raw colors declared here are the
   status hues and two hairline borders that are intentionally NOT
   in the brand picker.
   ============================================================ */
:root {
  /* --- Color ramp tokens → presets (single source: theme.json) --- */
  --blue-50:  var(--wp--preset--color--blue-50);
  --blue-100: var(--wp--preset--color--blue-100);
  --blue-200: var(--wp--preset--color--blue-200);
  --blue-300: var(--wp--preset--color--blue-300);
  --blue-400: var(--wp--preset--color--blue-400);
  --blue-500: var(--wp--preset--color--blue-500);
  --blue-600: var(--wp--preset--color--blue-600);
  --blue-700: var(--wp--preset--color--blue-700);
  --blue-800: var(--wp--preset--color--blue-800);
  --blue-900: var(--wp--preset--color--blue-900);
  --blue-950: var(--wp--preset--color--blue-950);

  --sky-50:  var(--wp--preset--color--sky-50);
  --sky-100: var(--wp--preset--color--sky-100);
  --sky-200: var(--wp--preset--color--sky-200);
  --sky-300: var(--wp--preset--color--sky-300);
  --sky-400: var(--wp--preset--color--sky-400);
  --sky-500: var(--wp--preset--color--sky-500);
  --sky-600: var(--wp--preset--color--sky-600);

  --teal-50:  var(--wp--preset--color--teal-50);
  --teal-100: var(--wp--preset--color--teal-100);
  --teal-200: var(--wp--preset--color--teal-200);
  --teal-300: var(--wp--preset--color--teal-300);
  --teal-400: var(--wp--preset--color--teal-400);
  --teal-500: var(--wp--preset--color--teal-500);
  --teal-600: var(--wp--preset--color--teal-600);

  --coral-50:  var(--wp--preset--color--coral-50);
  --coral-100: var(--wp--preset--color--coral-100);
  --coral-200: var(--wp--preset--color--coral-200);
  --coral-300: var(--wp--preset--color--coral-300);
  --coral-400: var(--wp--preset--color--coral-400);
  --coral-500: var(--wp--preset--color--coral-500);
  --coral-600: var(--wp--preset--color--coral-600);

  --sunny-300: var(--wp--preset--color--sunny-300);
  --sunny-400: var(--wp--preset--color--sunny-400);
  --sunny-500: var(--wp--preset--color--sunny-500);

  --ink-950: var(--wp--preset--color--ink-950);
  --ink-900: var(--wp--preset--color--ink-900);
  --ink-800: var(--wp--preset--color--ink-800);
  --ink-700: var(--wp--preset--color--ink-700);
  --ink-600: var(--wp--preset--color--ink-600);
  --ink-500: var(--wp--preset--color--ink-500);
  --ink-400: var(--wp--preset--color--ink-400);
  --ink-300: var(--wp--preset--color--ink-300);
  --ink-200: var(--wp--preset--color--ink-200);
  --ink-100: var(--wp--preset--color--ink-100);
  --ink-50:  var(--wp--preset--color--ink-50);
  --white:   var(--wp--preset--color--base);

  /* --- Status hues (intentionally outside the brand picker) --- */
  --green-100: #D6F3E5;
  --green-400: #1FA971;
  --green-600: #157A52;
  --amber-100: #FCEBCE;
  --amber-400: #F5A623;
  --amber-600: #B9791A;
  --red-100:   #FBDDDD;
  --red-400:   #E5484D;
  --red-600:   #B5363A;

  /* --- Font family tokens → presets --- */
  --font-display: var(--wp--preset--font-family--display);
  --font-heading: var(--wp--preset--font-family--nunito);
  --font-body:    var(--wp--preset--font-family--nunito);
  --font-mono:    var(--wp--preset--font-family--mono);

  /* --- Type scale tokens ---
     Literal values, not preset refs: WordPress does not emit
     --wp--preset--font-size--* for slugs that start with a digit
     (2xs, 2xl, 3xl…7xl), so those presets are empty. Defining the
     scale here keeps the design system reliable regardless. The
     editor still exposes the sizes from theme.json. */
  --text-2xs:  0.6875rem;
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  clamp(2rem, 1.4rem + 2vw, 3rem);
  --text-6xl:  clamp(2.5rem, 1.8rem + 2.6vw, 3.75rem);
  --text-7xl:  clamp(2.75rem, 1.9rem + 3vw, 4.75rem);

  /* --- Weights / leading / tracking (no theme.json schema) --- */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extrabold:800;
  --fw-black:    900;

  --leading-none:    1;
  --leading-tight:   1.12;
  --leading-snug:    1.28;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.015em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.09em;

  /* --- Spacing tokens → presets --- */
  --space-px: 1px;
  --space-0:  0;
  --space-1:  var(--wp--preset--spacing--1);
  --space-2:  var(--wp--preset--spacing--2);
  --space-3:  var(--wp--preset--spacing--3);
  --space-4:  var(--wp--preset--spacing--4);
  --space-5:  var(--wp--preset--spacing--5);
  --space-6:  var(--wp--preset--spacing--6);
  --space-8:  var(--wp--preset--spacing--8);
  --space-10: var(--wp--preset--spacing--10);
  --space-12: var(--wp--preset--spacing--12);
  --space-16: var(--wp--preset--spacing--16);
  --space-20: var(--wp--preset--spacing--20);
  --space-24: var(--wp--preset--spacing--24);
  --space-32: var(--wp--preset--spacing--32);
  --gutter:   var(--wp--preset--spacing--6);

  /* --- Containers / control sizes → custom --- */
  --container-sm:  var(--wp--custom--container--sm);
  --container-md:  var(--wp--custom--container--md);
  --container-lg:  var(--wp--custom--container--lg);
  --container-xl:  var(--wp--custom--container--xl);
  --container-2xl: var(--wp--custom--container--2xl);
  --container-brand: 1240px;
  --control-sm: var(--wp--custom--control--sm);
  --control-md: var(--wp--custom--control--md);
  --control-lg: var(--wp--custom--control--lg);

  /* --- Radii → custom --- */
  --radius-xs:     var(--wp--custom--radius--xs);
  --radius-sm:     var(--wp--custom--radius--sm);
  --radius-md:     var(--wp--custom--radius--md);
  --radius-lg:     var(--wp--custom--radius--lg);
  --radius-xl:     var(--wp--custom--radius--xl);
  --radius-2xl:    28px; /* literal: WP omits --wp--custom--radius--2xl (digit-leading slug) */
  --radius-3xl:    36px; /* literal: WP omits --wp--custom--radius--3xl (digit-leading slug) */
  --radius-pill:   var(--wp--custom--radius--pill);
  --radius-circle: var(--wp--custom--radius--circle);

  /* --- Shadows → presets --- */
  --shadow-xs:     var(--wp--preset--shadow--xs);
  --shadow-sm:     var(--wp--preset--shadow--sm);
  --shadow-md:     var(--wp--preset--shadow--md);
  --shadow-lg:     var(--wp--preset--shadow--lg);
  --shadow-xl:     var(--wp--preset--shadow--xl);
  --shadow-brand:  var(--wp--preset--shadow--brand);
  --shadow-accent: var(--wp--preset--shadow--accent);
  --shadow-inner:  var(--wp--preset--shadow--inner);

  /* --- Motion / z-index → custom --- */
  --ease-out:    var(--wp--custom--ease--out);
  --ease-in-out: var(--wp--custom--ease--in-out);
  --ease-spring: var(--wp--custom--ease--spring);
  --dur-fast: var(--wp--custom--duration--fast);
  --dur-base: var(--wp--custom--duration--base);
  --dur-slow: var(--wp--custom--duration--slow);

  --z-base:    var(--wp--custom--z--base);
  --z-raised:  var(--wp--custom--z--raised);
  --z-sticky:  var(--wp--custom--z--sticky);
  --z-overlay: var(--wp--custom--z--overlay);
  --z-modal:   var(--wp--custom--z--modal);
  --z-toast:   var(--wp--custom--z--toast);

  /* ===================== SEMANTIC ALIASES ===================== */
  /* Brand */
  --brand-primary:      var(--blue-600);
  --brand-primary-ink:  var(--blue-900);
  --brand-secondary:    var(--teal-400);
  --brand-accent:       var(--coral-400);

  /* Text */
  --text-strong:  var(--blue-900);
  --text-body:    var(--ink-700);
  --text-muted:   var(--ink-500);
  --text-faint:   var(--ink-400);
  --text-link:    var(--blue-600);
  --text-on-brand:  var(--white);
  --text-on-accent: var(--white);

  /* Surfaces */
  --surface-page:       var(--ink-50);
  --surface-card:       var(--white);
  --surface-sunken:     var(--ink-100);
  --surface-raised:     var(--white);
  --surface-brand:      var(--blue-900);
  --surface-brand-soft: var(--blue-50);
  --surface-teal-soft:  var(--teal-50);
  --surface-accent-soft:var(--coral-50);
  --surface-inverse:    var(--ink-900);

  /* Borders */
  --border-subtle:  #E6EDF3;
  --border-default: #D2DEE7;
  --border-strong:  var(--ink-300);
  --border-brand:   var(--blue-600);

  /* Status semantic */
  --success:      var(--green-400);
  --success-soft: var(--green-100);
  --warning:      var(--amber-400);
  --warning-soft: var(--amber-100);
  --danger:       var(--red-400);
  --danger-soft:  var(--red-100);
  --info:         var(--sky-400);
  --info-soft:    var(--sky-50);

  /* Focus ring */
  --ring: 0 0 0 4px rgba(37, 99, 217, 0.28);

  /* ===================== ROLE SHORTHANDS ===================== */
  --type-display: var(--fw-black) var(--text-7xl)/var(--leading-none) var(--font-display);
  --type-h1:      var(--fw-extrabold) var(--text-4xl)/var(--leading-tight) var(--font-heading);
  --type-h2:      var(--fw-extrabold) var(--text-3xl)/var(--leading-tight) var(--font-heading);
  --type-h3:      var(--fw-bold) var(--text-2xl)/var(--leading-snug) var(--font-heading);
  --type-h4:      var(--fw-bold) var(--text-xl)/var(--leading-snug) var(--font-heading);
  --type-body:    var(--fw-regular) var(--text-base)/var(--leading-normal) var(--font-body);
  --type-body-sm: var(--fw-regular) var(--text-sm)/var(--leading-normal) var(--font-body);
  --type-label:   var(--fw-bold) var(--text-sm)/var(--leading-snug) var(--font-body);
  --type-eyebrow: var(--fw-extrabold) var(--text-xs)/var(--leading-snug) var(--font-body);
  --type-mono:    var(--fw-medium) var(--text-sm)/var(--leading-normal) var(--font-mono);
}

/* ===================== HELPERS ===================== */

/* Brand wordmark voice — big playful display text */
.jojo-display {
  font-family: var(--font-display);
  color: var(--brand-primary-ink);
  letter-spacing: var(--tracking-normal);
  line-height: var(--leading-tight);
}

/* Soft aquatic page-wash behind hero sections */
.jojo-wash {
  background:
    radial-gradient(120% 90% at 100% 0%, var(--teal-50) 0%, transparent 55%),
    radial-gradient(120% 90% at 0% 100%, var(--blue-50) 0%, transparent 55%),
    var(--surface-page);
}

/* Sci-names render true italic (real Nunito italic, not a faux slant) */
.jojo-sci { font-style: italic; }

/* Mono numerals for prices / SKUs / quantities */
.jojo-mono { font-family: var(--font-mono); font-feature-settings: "t