/* Storytime Guru web design tokens: the WARM-EDITORIAL website system.
   Sources of truth (vault, Projects/Grade Level Guru Website): "Design Spec" (palette,
   three-tier type, 8pt spatial system), "Landing Design - Locked Patterns" (exact recipes),
   "Design & Content" (direction). It INHERITS the app canon (src/theme.ts: Deep Blue,
   Vibrant Purple, Montserrat + Open Sans, radius/shadow scale) and overlays the warm
   paper/ink palette + Fraunces intermediary tier the GLG beta pages ship with, so
   storytimeguru.com reads as one system with gradelevelguru.com.
   Every page in sites/ links this file FIRST and uses only these variables for color,
   type, spacing, radius, shadow. Off-system values are bugs, not new tokens. */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&family=Fraunces:ital,opsz,wght@0,9..144,500;0,9..144,600;1,9..144,500&family=Open+Sans:wght@400;600;700&display=swap');

:root {
  /* Brand canon (app) */
  --stg-deep-blue: #2D5FA6;
  --stg-vibrant-purple: #8153C2;
  --stg-soft-sky-blue: #6C9EF9;
  --stg-muted-lavender: #B792E8;
  --stg-warm-yellow: #F5C36E;   /* canon highlight; the web kit says "no yellow" as a surface: use only as a tiny accent, if at all */
  --stg-warm-amber: #F2A03C;    /* app sparkle only; not used on web */

  /* Warm-editorial surfaces + ink (locked) */
  --paper: #FBF6EC;        /* page background */
  --alt-band: #F2E9D8;     /* alternating section band (sampler value, adopted) */
  --card: #FFFDF8;         /* card surface (warm white; pure white dropped) */
  --ink: #2B2621;          /* primary text; also the dark band background */
  --muted: #5B5148;        /* secondary text on LIGHT backgrounds only */
  --muted-on-dark: #C3BAA9;/* secondary text on ink/dark bands (5B5148 fails contrast there) */
  --hairline: #E7DCC8;     /* dividers, card borders */
  --gold: #B87F27;         /* eyebrow accent (bookish gold) */

  /* Semantic aliases (kept for page CSS) */
  --bg-primary: var(--paper);
  --bg-subtle: var(--alt-band);
  --bg-card: var(--card);
  --bg-inverse: var(--ink);
  --text-primary: var(--ink);
  --text-secondary: var(--muted);
  --text-on-dark: var(--paper);
  --accent-primary: var(--stg-deep-blue);    /* primary CTA + the one accented keyword per headline */
  --accent-secondary: var(--stg-vibrant-purple);
  --accent-highlight: var(--gold);
  --separator: var(--hairline);
  /* Icon-chip tints (deepened so none blend into paper) */
  --tint-blue-bg: #E7EEF7;   --tint-blue-fg: var(--stg-deep-blue);
  --tint-purple-bg: #F0E8F8; --tint-purple-fg: var(--stg-vibrant-purple);
  --tint-gold-bg: #EFD9A8;   --tint-gold-fg: var(--ink);
  --scrim-lock: rgba(45, 95, 166, 0.55);

  /* Type: three tiers. Montserrat = hero/H1 + wordmark. Fraunces = intermediary
     (taglines, section statements, pull quotes, editorial lines). Open Sans = body + eyebrows. */
  --font-heading: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-editorial: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --fs-display-xl: 2rem;     /* 32 (app ramp; web hero scales up via --fs-hero) */
  --fs-display-lg: 1.75rem;  /* 28 */
  --fs-heading-lg: 1.5rem;   /* 24 */
  --fs-heading-md: 1.25rem;  /* 20 */
  --fs-body-xl: 1.1875rem;   /* 19 */
  --fs-body-lg: 1.0625rem;   /* 17 */
  --fs-body-md: 0.9375rem;   /* 15 */
  --fs-caption: 0.75rem;     /* 12 */
  --fs-hero: clamp(2.25rem, 5vw, 3.5rem);        /* web hero H1 */
  --fs-section: clamp(1.75rem, 3.2vw, 2.25rem);  /* display H2 */
  --fs-statement: clamp(1.25rem, 2.4vw, 1.625rem); /* Fraunces statement ~26 */
  --fs-tagline: clamp(20px, 4.5vw, 26px);         /* demoted tagline (locked clamp) */
  --fs-eyebrow: 14px; --fs-eyebrow-mobile: 13px;
  --lh-tight: 1.15;
  --lh-body: 1.6;            /* 17px * 1.6 = 27.2 ~ lands near the 4pt baseline; body-md 15 * 1.6 = 24 */

  /* Spacing scale: space/N = N*4, 8pt base with a 4pt half-step (locked) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-24: 96px;
  /* Rhythm (locked): eyebrow->heading 8, heading->lead 16, lead->content 40, para->para 16, statement->body 24 */
  --gap-eyebrow: var(--sp-2); --gap-lead: var(--sp-4); --gap-content: var(--sp-10); --gap-para: var(--sp-4); --gap-statement: var(--sp-6);
  /* Section padding: hero 96, sections 64, mobile 32; container 1140; 24px min gutter; 2-col gutter 48; 3-up cards 24 */
  --section-pad: var(--sp-16); --section-pad-hero: var(--sp-24); --section-pad-mobile: var(--sp-8);
  --container-max: 1140px; --gutter: var(--sp-6); --col-gap: var(--sp-12); --card-gap: var(--sp-6);
  --measure: 64ch;

  /* Radius + shadow (app scale; card recipe from Locked Patterns) */
  --radius-sm: 6px; --radius-md: 12px; --radius-lg: 16px; --radius-full: 9999px;
  --shadow-subtle: 0 1px 4px rgba(0,0,0,0.05);
  --shadow-card: 0 6px 20px rgba(43,38,33,0.06);
  --shadow-raised: 0 5px 14px rgba(0,0,0,0.12);
  --shadow-phone: drop-shadow(0 20px 32px rgba(43,38,33,0.20));
  --shadow-phone-mobile: drop-shadow(0 14px 24px rgba(43,38,33,0.18));

  --dur-fast: 120ms; --dur-base: 200ms;
  --touch-min: 44px;
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: var(--fs-body-lg); line-height: var(--lh-body); }
h1, h2, h3, h4 { font-family: var(--font-heading); line-height: var(--lh-tight); margin: 0; color: var(--ink); text-wrap: balance; }
h1 { font-size: var(--fs-hero); font-weight: 800; letter-spacing: -0.01em; }
h2 { font-size: var(--fs-section); font-weight: 700; }
h3 { font-size: var(--fs-heading-md); font-weight: 700; }
p { margin: 0; max-width: var(--measure); }
p + p { margin-top: var(--gap-para); }
a { color: var(--stg-deep-blue); }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--stg-soft-sky-blue); outline-offset: 2px; }

/* Headline emphasis (locked): ONE keyword per headline in Deep Blue, solid, no gradient */
.accent-word { color: var(--stg-deep-blue); }

/* Eyebrow (locked): Open Sans 700, gold, 14/13, letter-spacing 1.6px, uppercase; 8px to its heading */
.eyebrow { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-eyebrow); letter-spacing: 1.6px; text-transform: uppercase; color: var(--gold); margin: 0 0 var(--gap-eyebrow); }
@media (max-width: 767px) { .eyebrow { font-size: var(--fs-eyebrow-mobile); } }

/* Fraunces tier */
.statement { font-family: var(--font-editorial); font-weight: 500; font-size: var(--fs-statement); line-height: 1.3; color: var(--ink); }
.tagline { font-family: var(--font-editorial); font-weight: 500; font-size: var(--fs-tagline); line-height: 1.3; color: var(--muted); }
.tagline em, .statement em { font-style: italic; color: var(--stg-deep-blue); }
.lead { font-size: var(--fs-body-xl); color: var(--ink); }

/* Section-label heading tier (between eyebrow and display): Montserrat 700 ink ~22/19 */
.section-label { font-family: var(--font-heading); font-weight: 700; font-size: 1.375rem; color: var(--ink); }
@media (max-width: 767px) { .section-label { font-size: 1.1875rem; } }

/* Wordmark: live text, mirrors src/components/WordmarkShimmer.tsx; on web the lockup is mark + "Storytime Guru" Montserrat 800 ink (Locked Patterns) */
.wordmark { font-family: var(--font-heading); font-weight: 800; letter-spacing: 0.5px; color: var(--ink); line-height: 1.04; display: inline-block; }
.wordmark--brand { color: var(--stg-deep-blue); text-transform: uppercase; }
.wordmark span { display: block; }
.wordmark--sm { font-size: 1.125rem; }
.wordmark--md { font-size: 1.6875rem; }
.wordmark--lg { font-size: 2.5rem; }
.byline { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-caption); letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); }

/* Buttons: primary CTA Deep Blue, radius md (12), element-first sizing */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 48px; padding: var(--sp-3) var(--sp-6); border-radius: var(--radius-md); font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-body-md); text-decoration: none; border: 1.5px solid transparent; cursor: pointer; transition: background var(--dur-base), color var(--dur-base), box-shadow var(--dur-base), transform var(--dur-fast); }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--stg-deep-blue); color: #FFFFFF; }
.btn--primary:hover { background: #24508F; box-shadow: var(--shadow-card); }
.btn--secondary { background: var(--card); color: var(--stg-deep-blue); border-color: var(--stg-deep-blue); }
.btn--secondary:hover { background: var(--tint-blue-bg); }
.btn--dark { background: var(--ink); color: var(--paper); }
.btn--on-dark { background: var(--paper); color: var(--ink); }
.btn[aria-disabled="true"], .btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* Layout */
.container { width: min(100% - 2 * var(--gutter), var(--container-max)); margin-inline: auto; }
.section { padding-block: var(--section-pad); }
.section--hero { padding-block: var(--section-pad-hero); }
.band--alt { background: var(--alt-band); }
.band--dark { background: var(--ink); color: var(--paper); }
.band--dark .muted, .band--dark .byline { color: var(--muted-on-dark); }
.band--dark h1, .band--dark h2, .band--dark h3, .band--dark .statement { color: var(--paper); }
@media (max-width: 767px) { .section, .section--hero { padding-block: var(--section-pad-mobile); } }
.two-col { display: flex; gap: var(--col-gap); align-items: center; }
@media (max-width: 767px) { .two-col { flex-wrap: wrap; } .two-col > * { flex-basis: 100%; } }
.card { background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 28px 24px; }
.hairline { border: 0; border-top: 1px solid var(--hairline); margin: 0; }
.chip { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--radius-md); }
.chip--blue { background: var(--tint-blue-bg); color: var(--tint-blue-fg); }
.chip--purple { background: var(--tint-purple-bg); color: var(--tint-purple-fg); }
.chip--gold { background: var(--tint-gold-bg); color: var(--gold); }
.phone { filter: var(--shadow-phone); }
@media (max-width: 767px) { .phone { filter: var(--shadow-phone-mobile); } }

/* Forms */
.field { display: grid; gap: var(--sp-1); margin-bottom: var(--sp-4); }
.field label { font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-body-md); color: var(--ink); }
.field input[type="text"], .field input[type="email"] { min-height: 48px; padding: var(--sp-3) var(--sp-4); font: inherit; font-size: var(--fs-body-lg); border: 1.5px solid var(--hairline); border-radius: var(--radius-md); background: var(--card); color: var(--ink); }
.field input:focus { border-color: var(--stg-deep-blue); }
.field--check { display: flex; align-items: flex-start; gap: var(--sp-3); }
.field--check input { width: 22px; height: 22px; margin-top: 3px; accent-color: var(--stg-deep-blue); }
.field--check label { font-family: var(--font-body); font-weight: 400; }
.help { color: var(--muted); font-size: var(--fs-body-md); }
.error { color: #9B2C1E; font-size: var(--fs-body-md); }

/* Code display */
.code-display { font-family: var(--font-mono); font-size: clamp(1.5rem, 6vw, 2.25rem); letter-spacing: 0.08em; font-weight: 700; color: var(--stg-deep-blue); background: var(--tint-blue-bg); border: 1px solid var(--hairline); border-radius: var(--radius-md); padding: var(--sp-4) var(--sp-6); display: inline-block; user-select: all; }

/* Accessibility */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }