/* =====================================================================
   Springer's Homemade Ice Cream — Colors & Type
   Source of truth: Brand Style Guide (Stone Harbor, NJ)

   Imported verbatim from the Claude Design project
   (assets/colors_and_type.css), with two documented additions at the
   bottom of the :root block and one responsive block:
     1. --fs-* tokens scale down under 900px / 560px. The design was
        drawn desktop-only; a 56px H1 on a 375px phone overflows.
        Scaling the TOKENS (not each rule) keeps every page consistent.
     2. h1's brand pink underline is opt-out via .h1--plain, because
        the navy hero H1s in the design deliberately drop it.
   Nothing else is changed — this file stays the brand's, not the site's.
   --------------------------------------------------------------------- */

/* -------- Webfonts ---------------------------------------------------
   The brand's print typefaces are Adobe Caslon and Ashbury. Digital
   materials use Georgia (headings, bold italic) and Calibri (body).
   Georgia is a system font; for Calibri we use Carlito, a free
   metric-compatible substitute. Allura approximates the curly script
   in the Springer's wordmark for large decorative moments only.
   -------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Carlito:ital,wght@0,400;0,700;1,400;1,700&family=Allura&display=swap');

:root {
  /* ---------- Brand palette (Pantone-matched hexes from style guide) */
  --navy:          #2C3D83;   /* PANTONE 3584 C — primary */
  --green:         #96CE92;   /* PANTONE 2255 C — accent */
  --pink:          #F295BF;   /* PANTONE 1905 C — footer/accent */
  --cornflower:    #8897CC;   /* PANTONE 6092 C — secondary blue */
  --brown:         #AF794E;   /* PANTONE 7515 C — cone/warm accent */

  /* ---------- Supporting neutrals */
  --cream:         #F5F3EE;   /* content backgrounds */
  --white:         #FFFFFF;
  --body-text:     #444455;   /* body copy */
  --muted:         #888899;   /* captions, meta */
  --rule:          #E6E3DC;   /* hairline on cream */
  --rule-strong:   #D3CFC5;

  /* ---------- Tints (derived, used sparingly) */
  --navy-900:      #1E2B60;
  --navy-100:      #E4E7F2;
  --green-100:     #E5F3E4;
  --pink-100:      #FBE4EE;
  --cream-deep:    #EDE9DF;

  /* ---------- Semantic roles */
  --bg:            var(--cream);
  --bg-elev:       var(--white);
  --bg-dark:       var(--navy);
  --fg:            var(--body-text);
  --fg-strong:     var(--navy);
  --fg-muted:      var(--muted);
  --accent:        var(--pink);
  --accent-alt:    var(--green);
  --link:          var(--navy);
  --link-hover:    var(--navy-900);

  /* ---------- Typography stacks */
  --font-display:  Georgia, 'Times New Roman', serif;        /* H1-H3, bold italic */
  --font-serif:    Georgia, 'Times New Roman', serif;        /* general serif */
  --font-body:     'Carlito', Calibri, 'Helvetica Neue', Arial, sans-serif;
  --font-script:   'Allura', 'Lucida Handwriting', cursive;  /* decorative only */
  --font-mono:     'SF Mono', Menlo, Consolas, monospace;

  /* ---------- Type scale (digital base = 16px; body target 11pt ≈ 15px) */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 15px;   /* ≈ brand's 11pt Calibri body */
  --fs-md:   17px;
  --fs-lg:   20px;
  --fs-xl:   26px;
  --fs-h3:   30px;
  --fs-h2:   40px;
  --fs-h1:   56px;
  --fs-display: 80px;

  --lh-tight:  1.15;
  --lh-snug:   1.3;
  --lh-normal: 1.45;   /* within brand's 1.3–1.5 band */
  --lh-loose:  1.6;

  /* ---------- Letter-spacing (Navy headings are tight; labels tracked) */
  --tr-tight:   -0.01em;
  --tr-normal:   0;
  --tr-label:    0.14em;   /* all-caps section labels, green */
  --tr-wide:     0.22em;   /* "HOMEMADE ICE CREAM" tagline style */

  /* ---------- Spacing (4-pt base) */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;

  /* ---------- Radii — modest; brand skews classic, not rounded */
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 8px;
  --r-pill: 999px;

  /* ---------- Borders */
  --bw-hair: 1px;
  --bw-rule: 2px;
  --bw-accent: 3px;   /* pink underline on H1 */
  --bw-bar: 6px;      /* pink footer bar */

  /* ---------- Shadows — subtle, print-like */
  --shadow-sm: 0 1px 2px rgba(44,61,131,0.08);
  --shadow-md: 0 4px 14px rgba(44,61,131,0.10);
  --shadow-lg: 0 18px 40px rgba(44,61,131,0.14);

  /* ---------- Motion */
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --ease-in-out: cubic-bezier(.4,0,.2,1);
  --dur-fast: 120ms;
  --dur-med:  220ms;
  --dur-slow: 400ms;
}

/* ---------- ADDITION 1: responsive type scale ----------------------
   The design is desktop-only. Most ice-cream-shop traffic is a phone
   on a sidewalk, so the display sizes have to come down. Scaling the
   tokens keeps the whole site in proportion with one change. */
@media (max-width: 900px) {
  :root {
    --fs-xl: 22px;
    --fs-h3: 25px;
    --fs-h2: 31px;
    --fs-h1: 38px;
    --fs-display: 52px;
    --sp-9: 64px;
    --sp-8: 48px;
  }
}
@media (max-width: 560px) {
  :root {
    --fs-lg: 18px;
    --fs-xl: 20px;
    --fs-h3: 22px;
    --fs-h2: 26px;
    --fs-h1: 30px;
    --fs-display: 40px;
    --sp-7: 32px;
  }
}

/* =====================================================================
   Base semantic element styles
   --------------------------------------------------------------------- */
html { color: var(--fg); background: var(--bg); }
body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  color: var(--fg-strong);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  margin: 0 0 var(--sp-4);
}
h1 {
  font-size: var(--fs-h1);
  display: inline-block;
  padding-bottom: var(--sp-2);
  border-bottom: var(--bw-accent) solid var(--pink); /* brand rule: pink underline on H1 */
}
/* ADDITION 2: opt out of the pink underline (navy hero headings). */
h1.h1--plain { display: block; border-bottom: none; padding-bottom: 0; }

h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-xl); }

/* Small all-caps green label used for section markers */
.label,
.eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-style: normal;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tr-label);
  color: var(--green);
}

/* Wide tracked tagline — mirrors "HOMEMADE ICE CREAM" */
.tagline {
  font-family: var(--font-body);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
  color: var(--navy);
}

/* Decorative script — use sparingly for pull quotes or display flourishes */
.script {
  font-family: var(--font-script);
  font-weight: 400;
  font-style: normal;
  color: var(--navy);
  line-height: 1;
}

p {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg);
  margin: 0 0 var(--sp-4);
  max-width: 68ch;
}

small, .caption { font-size: var(--fs-xs); color: var(--fg-muted); }

a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { color: var(--link-hover); text-decoration-thickness: 2px; }

hr { border: 0; border-top: var(--bw-hair) solid var(--rule); margin: var(--sp-6) 0; }

code, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--cream-deep);
  color: var(--navy-900);
  border-radius: var(--r-sm);
}
code { padding: 0.12em 0.35em; }
pre  { padding: var(--sp-4); overflow: auto; }

/* ---- Brand-specific helpers -------------------------------------- */
.bg-navy  { background: var(--navy);  color: var(--white); }
.bg-cream { background: var(--cream); color: var(--fg); }
.bg-white { background: var(--white); color: var(--fg); }
.bg-pink  { background: var(--pink);  color: var(--navy); }
.bg-green { background: var(--green); color: var(--navy); }

/* Pink footer bar — appears on most branded pages */
.brand-footer-bar {
  height: var(--bw-bar);
  background: var(--pink);
  width: 100%;
}

/* Navy table header (brand table rule) */
.brand-table { width: 100%; border-collapse: collapse; font-family: var(--font-body); }
.brand-table thead th {
  background: var(--navy); color: var(--white);
  text-align: left; padding: var(--sp-3) var(--sp-4);
  font-weight: 700; font-size: var(--fs-sm);
  letter-spacing: var(--tr-label); text-transform: uppercase;
}
.brand-table tbody td { padding: var(--sp-3) var(--sp-4); font-size: var(--fs-base); }
.brand-table tbody tr:nth-child(odd)  td { background: var(--cream); }
.brand-table tbody tr:nth-child(even) td { background: var(--white); }