/* ============================================================================
   Cardiology of Southern California — brand.css
   The single stylesheet. Served from Cloudflare Pages, loaded by a <link> in
   Squarespace Settings > Advanced > Code Injection > Header.

   RULES (CLAUDE.md §4)
     - This is the ONLY stylesheet. Do not split it.
     - Never hardcode a value. Add a token below, then reference it.
     - New rules go INSIDE their numbered section. Never append to the bottom.
     - Verify at 375px, 768px, 1440px.
     - Contrast clears WCAG AA: 4.5:1 body, 3:1 large. Never remove focus states.
     - Prefer specificity over !important.

   STATUS: tokens, plus one rule in section 4 (header logo). Sections 2, 3, 5,
   6 and 7 are scaffolded and intentionally empty.
   ========================================================================= */


/* ----------------------------------------------------------------------------
   1. TOKENS
   Palette verified 2026-09-21 against the Squarespace theme editor. Each value
   below is an exact match for the site's live -hsl theme variable.
   ------------------------------------------------------------------------- */

:root {

  /* -- Palette ------------------------------------------------------------ */

  /* warm coral, the pop color        Squarespace --white-hsl 15,80%,70%      */
  --csc-poppy:       #F09475;

  /* Pacific swell teal, primary CTA  Squarespace --black-hsl 198,54%,36%     */
  --csc-swell:       #2A708D;

  /* deep navy, site background       Squarespace --darkAccent-hsl 206,34%,20% */
  --csc-swell-deep:  #223544;

  /* coastal sage                     Squarespace --accent-hsl 153,16%,55%    */
  --csc-sage:        #7A9F8E;

  /* pale sage                        Squarespace --lightAccent-hsl 150,20%,75% */
  --csc-sage-pale:   #B3CCBF;

  /* warm off-white — NOT pure white                                          */
  --csc-shell:       #FBFAF6;


  /* -- Typography --------------------------------------------------------- */

  --csc-font-display: "Playfair Display", Georgia, serif;
  --csc-font-body:    "Nunito Sans", -apple-system, BlinkMacSystemFont, sans-serif;

  /* Body type — exact match to the live Squarespace theme.                   */
  --csc-body-weight:    400;
  --csc-body-tracking:  0;
  --csc-body-leading:   1.5;

  /* Heading type — SETTLED 2026-09-21. Sydney reviewed both options rendered
     against the real homepage and chose italic 500: what the site already
     renders. This intentionally amends CLAUDE.md §3, which specified roman
     300. Because italic 500 is Squarespace's own theme value, this file adds
     NO heading override — the tokens below simply record the decision.
     To switch to roman 300 later, add to section 2:
         :root { --heading-font-font-weight:300; --heading-font-font-style:normal; } */
  --csc-heading-weight:   500;
  --csc-heading-style:    italic;
  --csc-heading-tracking: -0.02em;
  --csc-heading-leading:  1.2;

  /* -- Brand assets ------------------------------------------------------- */

  /* Transparent logo lockups, generated from the live flat JPEG. The source
     has no alpha, so its near-white ground renders as a box on the navy
     header. These are matte-extracted: background removed, dark ink recoloured
     so it reads on dark, coral accent left untouched.
     Badge is preserved exactly as designed; only the wordmark flips to shell,
     since the dark ink is both the coin fill and the text. Gold is untouched —
     it measures 5.6:1 on navy. Rebuild: scripts/logo_reverse.py               */
  --csc-logo-light: url("https://csc-assets.pages.dev/assets/img/logo-horizontal-light.png");

}


/* ----------------------------------------------------------------------------
   CONTRAST REFERENCE — measured, do not re-derive (CLAUDE.md §3)

   SAFE as body text
     shell      on swell-deep    12.1 : 1
     sage-pale  on swell-deep     7.4 : 1

   FAILS as text — fills, borders and accents only
     swell      on swell-deep     2.29 : 1   <- the live site's current defect
     poppy      on shell          2.19 : 1
     sage       on shell          2.83 : 1
   ------------------------------------------------------------------------- */


/* ----------------------------------------------------------------------------
   2. BASE            typography, links, focus states
   ------------------------------------------------------------------------- */


/* ----------------------------------------------------------------------------
   3. LAYOUT          containers, spacing, section rhythm
   ------------------------------------------------------------------------- */


/* ----------------------------------------------------------------------------
   4. NAVIGATION
   ------------------------------------------------------------------------- */

/* Header logo.
   The logo Squarespace serves is a flat JPEG — no alpha — so its near-white
   ground shows as a light rectangle sitting on the navy transparent header.
   Swapping the element's `content` replaces the bitmap in place, keeping
   Squarespace's own sizing, link target and responsive behaviour untouched.
   859x600 at 2x the header's 270px render, so it stays sharp on retina. */
.header-title-logo img,
.header-mobile-logo img {
  content: var(--csc-logo-light);
}


/* ----------------------------------------------------------------------------
   5. COMPONENTS      buttons, cards, forms
   ------------------------------------------------------------------------- */


/* ----------------------------------------------------------------------------
   6. SECTIONS        .csc-section-dark and friends
      NOTE: the dark-section contrast fix described in CLAUDE.md §3 belongs
      here. Do NOT apply it site-wide without asking Sydney first.
   ------------------------------------------------------------------------- */


/* ----------------------------------------------------------------------------
   7. RESPONSIVE      375 / 768 / 1440 breakpoints
   ------------------------------------------------------------------------- */