/*
 * Brand tokens.
 *
 * Values taken from the Squarespace :root variables captured in
 * _migration/content/design_tokens.json - not sampled from screenshots, and not read off a
 * hex frequency count of site.css (that file is polluted by Squarespace's Monokai
 * code-block syntax theme, so #f92672 and #ae81ff are NOT brand colours).
 *
 * The one people get wrong: --black is navy #243974, not black. It is the body text colour.
 */

:root {
  /* ---- palette (HSL as authored, hex for reference) ---- */
  --hs-gold: hsl(42.18, 66.27%, 48.82%);        /* #cf9e2a - accent, primary */
  --hs-gold-light: hsl(45.11, 93.01%, 71.96%);  /* #fad975 - lightAccent */
  --hs-maroon: hsl(350.72, 56.73%, 33.53%);     /* #862534 - darkAccent, secondary */
  --hs-navy: hsl(224.25, 52.63%, 29.8%);        /* #243974 - "black", body text */
  --hs-white: #fff;

  /* Secondary colours observed in the site's own custom.css. */
  --hs-teal: #0aa6bf;
  --hs-coral: #fd936d;
  --hs-cream: #fff5e7;

  --hs-text: var(--hs-navy);
  --hs-text-muted: hsl(224.25, 20%, 45%);
  --hs-rule: hsl(224.25, 30%, 88%);

  /* ---- type ---- */
  --hs-font-heading: 'Zilla Slab', Georgia, 'Times New Roman', serif;
  --hs-font-body: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Squarespace weights: headings 500, body 300, meta 700. */
  --hs-weight-heading: 500;
  --hs-weight-body: 300;
  --hs-weight-meta: 700;

  --hs-leading-heading: 1.1;
  --hs-leading-body: 1.6; /* Squarespace used 1.4em; 1.6 reads better at body sizes. */

  /*
   * Squarespace's scale in rem: h1 4, h2 2.8, h3 2.2, h4 1.2.
   * Kept as the desktop ceiling, but fluid so 4rem does not overflow a 390px phone -
   * the live site horizontally overflows on mobile and we are not reproducing that.
   */
  --hs-h1: clamp(2.25rem, 1.35rem + 3.6vw, 3.6rem);
  --hs-h2: clamp(1.85rem, 1.3rem + 2.2vw, 2.8rem);
  --hs-h3: clamp(1.45rem, 1.15rem + 1.2vw, 2.2rem);
  --hs-h4: clamp(1.1rem, 1.02rem + 0.32vw, 1.2rem);
  --hs-body: clamp(1rem, 0.97rem + 0.12vw, 1.0625rem);
  --hs-small: 0.875rem;
  --hs-large: clamp(1.3rem, 1.05rem + 1vw, 1.625rem);

  /* ---- layout ---- */
  --hs-width-narrow: 44rem;
  --hs-width-medium: 60rem;
  --hs-width-wide: 78rem;
  --hs-gutter: clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem);

  --hs-space-small: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  --hs-space-medium: clamp(3rem, 2rem + 4vw, 6rem);
  --hs-space-large: clamp(4.5rem, 3rem + 6vw, 9rem);

  --hs-radius: 0.5rem;
  --hs-radius-pill: 999px;
  --hs-shadow: 0 1px 2px hsl(224 30% 20% / 0.06), 0 8px 24px -8px hsl(224 30% 20% / 0.14);

  --hs-transition: 160ms cubic-bezier(0.2, 0, 0.3, 1);
}

/*
 * Section colour themes, mirroring Squarespace's data-section-theme values so the ACF theme
 * selector maps 1:1 onto what the old site rendered. Each theme sets its own foreground so
 * nested text, links and buttons inherit correctly.
 */
/*
 * Backgrounds are taken from Squarespace's own `--siteBackgroundColor` declarations in
 * site.css, NOT guessed from the theme names. The names refer to palette *slots*, and the
 * intuitive reading is wrong in both directions:
 *
 *   [data-section-theme="black"]      --siteBackgroundColor: hsla(var(--black-hsl),1)      -> NAVY
 *   [data-section-theme="black-bold"] --siteBackgroundColor: hsla(var(--black-hsl),1)      -> NAVY
 *   [data-section-theme="dark"]       --siteBackgroundColor: hsla(var(--darkAccent-hsl),1) -> MAROON
 *   [data-section-theme="dark-bold"]  --siteBackgroundColor: hsla(var(--darkAccent-hsl),1) -> MAROON
 *   [data-section-theme="bright"]     --siteBackgroundColor: hsla(var(--accent-hsl),1)     -> GOLD
 *   [data-section-theme="light"]      --siteBackgroundColor: hsla(var(--lightAccent-hsl),1)-> LIGHT GOLD
 *
 * "black" is navy and "dark" is maroon. Assuming otherwise rendered the homepage with its
 * Welcome and Curriculum sections swapped.
 *
 * The -bold variants share a background with their base but pair it with the accent colour
 * for headings, which is how Squarespace differentiates them.
 */
.hs-section[data-theme='white'] {
  --section-bg: var(--hs-white);
  --section-fg: var(--hs-navy);
  --section-accent: var(--hs-gold);
}
.hs-section[data-theme='light'] {
  --section-bg: var(--hs-gold-light);
  --section-fg: var(--hs-navy);
  --section-accent: var(--hs-maroon);
}
.hs-section[data-theme='bright'] {
  --section-bg: var(--hs-gold);
  --section-fg: var(--hs-white);
  --section-accent: var(--hs-white);
}
.hs-section[data-theme='dark'],
.hs-section[data-theme='dark-bold'] {
  --section-bg: var(--hs-maroon);
  --section-fg: var(--hs-white);
  --section-accent: var(--hs-gold);
}
.hs-section[data-theme='black'],
.hs-section[data-theme='black-bold'] {
  --section-bg: var(--hs-navy);
  --section-fg: var(--hs-white);
  --section-accent: var(--hs-gold);
}

/*
 * -bold themes set section HEADINGS in the accent colour rather than --section-fg - confirmed
 * live: /programs' "Frequently Asked Questions" (theme dark, non-bold) is white, but /about's
 * "Our Learning Strategy" (theme dark-bold) is gold, on an identical maroon background. Every
 * other -bold rule above was a background/foreground no-op next to its plain counterpart; this
 * is the one place the two variants actually differ, so it needed its own variable rather than
 * living on --section-fg.
 */
.hs-section[data-theme='dark-bold'],
.hs-section[data-theme='black-bold'] {
  --heading-color: var(--section-accent);
}