/* ==========================================================================
   Edenseek — Design Tokens (single source of truth)
   Every color, font, space, radius, shadow, breakpoint and timing is defined
   here once and consumed via var() everywhere. Do not hardcode these values
   elsewhere. See docs/Brand_Guide.md.
   ========================================================================== */

:root {
  /* ---- Color: dark shell (default / comics) ------------------------------ */
  --ink: #0F0F12;
  --surface: #17171C;
  --surface-raised: #20202A;
  --paper: #F5F1E9;
  --muted: #A7A2AD;
  --hairline: rgba(245, 241, 233, 0.10);
  --hairline-strong: rgba(245, 241, 233, 0.18);
  --scrim: rgba(10, 10, 12, 0.72);

  /* ---- Color: signature accents ----------------------------------------- */
  --crimson: #C8161D;
  --crimson-bright: #E63A2E;
  --blood: #7A0E12;

  /* ---- Per-imprint accents (overridable on a page/section root) ---------- */
  --accent: var(--crimson);
  --accent-2: var(--crimson-bright);
  --accent-contrast: #FFFFFF;

  /* ---- Color: children's ("Young Readers") theme ------------------------ */
  --kids-cream: #FBF3E4;
  --kids-ink: #2A2118;
  --kids-gold: #E8A72C;
  --kids-sky: #1F6FEB;
  --kids-brick: #B0392E;

  /* ---- Semantic surface tokens (themed layer flips these) --------------- */
  --bg: var(--ink);
  --bg-elev: var(--surface);
  --bg-raised: var(--surface-raised);
  --text: var(--paper);
  --text-muted: var(--muted);
  --border: var(--hairline);
  --link: var(--accent);
  --link-hover: var(--accent-2);

  /* ---- Typography: families --------------------------------------------- */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-rounded: "Fredoka", "Baloo 2", system-ui, sans-serif;

  /* ---- Typography: fluid scale ------------------------------------------ */
  --fs-display: clamp(2.75rem, 1.6rem + 5vw, 5.5rem);
  --fs-h1: clamp(2rem, 1.3rem + 3vw, 3.5rem);
  --fs-h2: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem);
  --fs-h3: clamp(1.15rem, 1rem + 0.8vw, 1.5rem);
  --fs-body: clamp(1rem, 0.97rem + 0.15vw, 1.125rem);
  --fs-small: 0.875rem;
  --fs-kicker: 0.78rem;

  --lh-tight: 1.1;
  --lh-heading: 1.15;
  --lh-body: 1.6;
  --tracking-kicker: 0.14em;
  --measure: 68ch;

  /* ---- Spacing scale ----------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --section-y: clamp(3rem, 6vw, 6rem);

  /* ---- Layout ------------------------------------------------------------ */
  --container-max: 1320px;
  --gutter: clamp(16px, 4vw, 48px);
  --header-h: 68px;

  /* ---- Radius ------------------------------------------------------------ */
  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* ---- Shadows / elevation ---------------------------------------------- */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-3: 0 18px 50px rgba(0, 0, 0, 0.55);
  --shadow-accent: 0 10px 40px rgba(200, 22, 29, 0.35);

  /* ---- Aspect ratios ----------------------------------------------------- */
  --ratio-cover: 2 / 3;   /* comic cover */
  --ratio-book: 4 / 3;    /* Egypt the Cat landscape picture book */
  --ratio-wide: 16 / 9;
  --ratio-og: 1200 / 630;

  /* ---- Motion ------------------------------------------------------------ */
  --dur-fast: 150ms;
  --dur: 240ms;
  --dur-slow: 400ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- Z-index scale ----------------------------------------------------- */
  --z-header: 100;
  --z-menu: 200;
  --z-lightbox: 300;

  /* ---- Breakpoints (referenced in JS; CSS uses the px directly in @media)  */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1440px;
}

/* Theme layer: children's / "Young Readers" zone. Flip semantic tokens only. */
.theme-kids {
  --bg: var(--kids-cream);
  --bg-elev: #FFFFFF;
  --bg-raised: #FFF9EE;
  --text: var(--kids-ink);
  --text-muted: #6B5E4A;
  --border: rgba(42, 33, 24, 0.14);
  --accent: var(--kids-brick);
  --accent-2: var(--kids-gold);
  --accent-contrast: #FFFFFF;
  --link: var(--kids-brick);
  --link-hover: var(--kids-gold);
  --scrim: rgba(42, 33, 24, 0.55);
  --font-display: var(--font-rounded);
  --shadow-accent: 0 10px 40px rgba(232, 167, 44, 0.35);
}

/* Per-imprint accent presets (apply on a page/section root) */
.accent-i-ride      { --accent: #E01A17; --accent-2: #B6D900; }
.accent-sok         { --accent: #8E1116; --accent-2: #C9A227; }
.accent-egypt       { --accent: var(--kids-brick); --accent-2: var(--kids-gold); }