/* ============================================================
   PRESS THAT IMAGE — BRAND LAYER
   Child override of the InstaWhew Layer-1 tokens.

   Source of the palette: the live product's ACSS/Bricks settings
   (behlcap MariaDB, DB `pressthatimage`, wp_options.automatic_css_settings):
     color-primary   #32a2c1   cyan-teal   -> accent ramp (brand)
     color-action    #5b99a6   muted teal  -> secondary CTA
     color-accent    #bcc8a2   sage green  -> tertiary highlight
     color-base      #0a2434   teal-navy   -> dark surface / base ramp
     color-secondary #1c1930   dark indigo -> deepest surface

   The palette itself is set authoritatively in this child's theme.json, which
   regenerates --wp--preset--color--* so InstaWhew's tokens.css aliases inherit
   the brand automatically. The :root block below re-declares those same values
   as a readable single reference + cascade safety net, and adds a few brand-only
   tokens the design system does not express. Keep this file lean (perf budget).
   ============================================================ */

:root {
  /* Brand accent ramp — cyan-teal, centred on color-primary #32a2c1.
     Mirrors theme.json so the values are visible in one place. */
  --wp--preset--color--accent-700: #1E7A93;
  --wp--preset--color--accent-600: #32A2C1;
  --wp--preset--color--accent-500: #45B0CD;
  --wp--preset--color--accent-400: #68C0D8;
  --wp--preset--color--accent-300: #93D3E4;
  --wp--preset--color--accent-200: #BEE5EF;
  --wp--preset--color--accent-100: #DDF1F7;
  --wp--preset--color--accent-50:  #EEF8FB;

  /* Brand-only tokens (no InstaWhew equivalent) — for the landing page to use. */
  --brand-primary: #32A2C1;   /* headline accent, links, primary CTA        */
  --brand-action:  #5B99A6;   /* secondary / muted CTA (ACSS color-action)  */
  --brand-sage:    #BCC8A2;   /* warm highlight / eyebrow (ACSS color-accent)*/
  --brand-ink:     #0A2434;   /* dark teal-navy surface (ACSS color-base)    */
  --brand-ink-deep:#1C1930;   /* deepest surface (ACSS color-secondary)      */
}

/* ============================================================
   TYPE-SCALE REPAIR: --text-2xl / 3xl / 4xl
   ------------------------------------------------------------
   BUG: WordPress does not emit --wp--preset--font-size--2xl / --3xl / --4xl
   for the parent theme.json's `2xl` / `3xl` / `4xl` fontSizes presets. Verified
   empirically on the rendered page: every other slug (xs, sm, base, md, lg, xl,
   display) IS emitted; the three whose slug STARTS WITH A DIGIT are silently
   dropped. (spacingSizes slugs 1..6 are purely numeric and survive, so this is
   specific to the font-size preset path.)

   CONSEQUENCE: InstaWhew's tokens.css aliases --text-2xl/3xl/4xl straight to
   those presets, so all three resolved to the EMPTY string. Every rule using
   them: the hero H1 (clamp(var(--text-3xl) ...)), .pti-h2, every feature-row h2,
   the .pti-price-card__amount "$5", the closer title. All fell back to the
   inherited ~18px body size, i.e. HEADINGS RENDERED SMALLER THAN BODY COPY.

   FIX (child-only, no parent edit, no theme.json slug rename): redeclare the
   three presets AND their --text-* aliases here with the parent theme.json's
   own intended clamp() values, copied verbatim from
   themes/instawhew/theme.json → settings.typography.fontSizes. Declaring the
   preset var as well as the alias means any consumer of either name resolves.
   custom.css is enqueued after the parent's tokens.css (dependency 'instawhew'),
   so these equal-specificity :root declarations win the cascade.

   If WordPress ever starts emitting these presets, this block becomes a
   redundant restatement of identical values, not a conflict.
   ============================================================ */
:root,
.pti-page {
  /* verbatim from instawhew/theme.json fontSizes */
  --wp--preset--font-size--2xl: clamp(2.25rem, 1.65rem + 3.04vw, 4.25rem);
  --wp--preset--font-size--3xl: clamp(3rem, 1.96rem + 5.22vw, 6.5rem);
  --wp--preset--font-size--4xl: clamp(2.75rem, 1.9rem + 4.3vw, 5rem);

  /* the tokens.css aliases the page CSS actually consumes */
  --text-2xl: clamp(2.25rem, 1.65rem + 3.04vw, 4.25rem);
  --text-3xl: clamp(3rem, 1.96rem + 5.22vw, 6.5rem);
  --text-4xl: clamp(2.75rem, 1.9rem + 4.3vw, 5rem);
}