/* =========================================================
   KID EXPLORERS BOOKS — DESIGN TOKENS
   Edit values here to re-theme the entire site.
   These are the ONLY hex codes that should appear anywhere
   in the CSS — every component references a token below.
   ========================================================= */

:root {

  /* ---- BRAND COLORS (extends the book-series palette) ---- */
  --color-ink-navy:     #1B3A4B; /* headlines, nav bar, footer — the credible anchor */
  --color-ink-navy-dark:#12262F; /* hover/active state of navy elements */
  --color-amber:        #C47A1E; /* primary accent — series label color from the books */
  --color-orange:       #BF5700; /* CTA buttons, links, active states */
  --color-orange-dark:  #9C4600; /* CTA hover */
  --color-rust:         #8B2500; /* section banners, strong emphasis */
  --color-cream:        #FBF6EE; /* page background — parchment, not white */
  --color-cream-dim:    #F3ECDF; /* alternating section background */
  --color-sage:         #5B7B5A; /* success / quiz-correct / nature accent */
  --color-sage-dark:    #45603F;
  --color-error:        #B3261E; /* quiz-incorrect only, used sparingly */

  /* ---- NEUTRALS ---- */
  --color-text:         #212121; /* body copy */
  --color-text-soft:    #4A4A46; /* secondary copy, captions */
  --color-white:        #FFFFFF;
  --color-border:       #E4D9C4; /* soft warm border on cream backgrounds */
  --color-placeholder-bg: #E9E2D4; /* fallback fill behind placeholder boxes */
  --color-placeholder-text: #6B6355;

  /* ---- TYPOGRAPHY ---- */
  --font-display: 'Fraunces', Georgia, serif;   /* headlines — characterful serif */
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-h1: clamp(2rem, 4vw + 1rem, 3.4rem);
  --fs-h2: clamp(1.5rem, 2vw + 1rem, 2.3rem);
  --fs-h3: clamp(1.15rem, 1vw + 1rem, 1.5rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.78rem;

  --lh-tight: 1.15;
  --lh-normal: 1.55;

  /* ---- SPACING SCALE ---- */
  --space-xs: 0.4rem;
  --space-sm: 0.8rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;

  /* ---- LAYOUT ---- */
  --content-max: 1180px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  /* ---- SHADOWS ---- */
  --shadow-card: 0 2px 6px rgba(27, 58, 75, 0.08), 0 1px 2px rgba(27, 58, 75, 0.06);
  --shadow-card-hover: 0 10px 24px rgba(27, 58, 75, 0.14), 0 2px 6px rgba(27, 58, 75, 0.08);
  --shadow-nav: 0 2px 10px rgba(0, 0, 0, 0.08);

  /* ---- FIXED ASPECT RATIOS (do not change without updating all placeholders) ---- */
  --ratio-book-cover: 1 / 1;      /* 8.5x8.5 square trim — the real Kid Explorers book format */
  --ratio-adventure:  7 / 4;      /* landscape "destination" scene, not a book cover */
  --ratio-featured:   16 / 9;     /* e.g. 1280x720 */
  --ratio-video:      16 / 9;
  --ratio-video-vertical: 9 / 16; /* vertical Shorts thumbnails, e.g. 1080x1920 */
  --ratio-printable: 1 / 1;       /* square 8.5x8.5 — matches the actual printable page shape */
}