/* --- Google Fonts Import --- */
@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Fredoka:wght@400;600;700&family=Work+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

/* --- CSS Custom Properties --- */
:root {
  /* Primary pinks */
  --pink-vivid: #ef719f;
  --pink-hot: #e24d86;
  --pink-soft: #f8bfd4;
  --pink-glow: rgba(226, 77, 134, 0.18);

  /* Burgundy / dark */
  --burgundy: #4f3d42;
  --burgundy-warm: #6b545b;
  --burgundy-light: #8a7077;

  /* Cream / warm whites */
  --cream: #f5e8df;
  --cream-light: #fffaf7;
  --cream-paper: #fdf8f3;
  --white: #FFFFFF;

  /* Character accent colors */
  --jenny-purple: #8660b7;
  --tony-amber: #d68b46;
  --flora-green: #67b06b;
  --arachna-teal: #53aaa4;
  --andy-blue: #6e93cf;

  /* Functional */
  --focus-ring: #e24d86;
  --error: #D32F2F;
  --success: #388E3C;
  --overlay: rgba(43, 22, 27, 0.6);

  /* Font families */
  --font-heading: 'Abril Fatface', Georgia, serif;
  --font-body: 'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-kids: 'Fredoka', var(--font-heading);

  /* Fluid type scale */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
  --text-2xl: clamp(2rem, 1.5rem + 2.5vw, 3rem);
  --text-3xl: clamp(2.5rem, 1.8rem + 3.5vw, 4rem);
  --text-display: clamp(3rem, 2rem + 5vw, 5.5rem);

  /* Spacing scale (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-section: clamp(3rem, 5vw, 6rem);

  /* Border radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1.25rem;
  --radius-xl: 2rem;
  --radius-full: 50%;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(43, 22, 27, 0.08);
  --shadow-md: 0 4px 12px rgba(43, 22, 27, 0.1);
  --shadow-lg: 0 8px 30px rgba(43, 22, 27, 0.12);
  --shadow-glow: 0 0 20px rgba(250, 3, 107, 0.2);

  /* Transitions */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;

  --site-nav-h: 4.5rem;

  /* Z-index scale */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;

  /* Page accent rhythm (books / kids / educators override below) */
  --page-accent: var(--pink-hot);
  --page-accent-soft: var(--pink-glow);
  --page-accent-hero-label: rgba(255, 210, 225, 0.95);
  --page-accent-on-light: var(--pink-hot);
}

body.page-theme-books {
  --page-accent: var(--tony-amber);
  --page-accent-soft: rgba(214, 139, 70, 0.2);
  --page-accent-hero-label: rgba(255, 230, 200, 0.95);
  --page-accent-on-light: #c4752a;
}

body.page-theme-educators {
  --page-accent: var(--flora-green);
  --page-accent-soft: rgba(103, 176, 107, 0.22);
  --page-accent-hero-label: rgba(200, 245, 210, 0.95);
  --page-accent-on-light: #2f8a38;
}

html.kids-zone-page {
  --page-accent: var(--arachna-teal);
  --page-accent-soft: rgba(83, 170, 164, 0.2);
  --page-accent-hero-label: rgba(190, 245, 240, 0.95);
  --page-accent-on-light: #2a9e94;
}

body.page-theme-books .section-label,
body.page-theme-educators .section-label {
  color: var(--page-accent-on-light);
}

body.page-theme-books .books-hero .section-label,
body.page-theme-educators .educators-hero .section-label {
  color: var(--page-accent-hero-label);
}

/* --- Reset & Base --- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.7;
  color: var(--burgundy);
  background-color: var(--cream-paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/*
   ────────────────────────────────────────────
   SCRAP PAPER TEXTURE SYSTEM
   Layered SVG noise + crosshatch + grain
   ────────────────────────────────────────────
*/

/* Global page grain overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  /* Noise texture via SVG filter rendered to a tiny data-URI PNG tile */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px 200px;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: multiply;
}

/* Diagonal fibre lines (subtle) */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 3px,
      rgba(43, 22, 27, 0.012) 3px,
      rgba(43, 22, 27, 0.012) 4px
    );
  pointer-events: none;
  z-index: 9998;
}

/* Scrap paper utility classes */
.paper-bg {
  background-color: var(--cream-paper);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 120px 120px;
}

.paper-bg--aged {
  background-color: #F5ECD7;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='80' height='80' filter='url(%23n)' opacity='0.09'/%3E%3C/svg%3E");
}

/* Torn paper edge helper — used via ::before/::after on section dividers */
.torn-edge {
  position: relative;
}

.torn-edge--bottom::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 28' preserveAspectRatio='none'%3E%3Cpath d='M0,14 C30,2 55,22 80,12 C110,2 130,20 160,10 C195,0 215,18 245,8 C275,0 300,16 335,6 C365,0 385,18 420,8 C450,0 470,20 505,10 C535,0 560,22 595,12 C625,2 645,20 680,10 C710,0 735,18 770,8 C800,0 820,16 855,6 C885,0 910,20 945,10 C975,0 995,18 1030,8 C1060,0 1085,22 1120,12 C1150,2 1175,16 1200,8 L1200,28 L0,28 Z' fill='%23FDF6F0'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
  z-index: 2;
}

.torn-edge--top::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  height: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 28' preserveAspectRatio='none'%3E%3Cpath d='M0,14 C30,22 55,2 80,12 C110,22 130,4 160,16 C195,26 215,8 245,18 C275,26 300,10 335,20 C365,28 385,8 420,18 C450,26 470,6 505,16 C535,26 560,4 595,14 C625,22 645,6 680,16 C710,26 735,8 770,18 C800,26 820,10 855,20 C885,28 910,6 945,16 C975,26 995,8 1030,18 C1060,26 1085,4 1120,14 C1150,22 1175,10 1200,18 L1200,0 L0,0 Z' fill='%23FDF6F0'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
  z-index: 2;
}

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: 1.2;
  color: var(--burgundy);
  text-wrap: balance;
}

h1 { font-size: var(--text-display); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); }

p {
  max-width: 65ch;
  margin-block-end: var(--space-4);
}

p:last-child {
  margin-block-end: 0;
}

a {
  color: var(--pink-hot);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--duration-fast) var(--ease-smooth);
}

a:hover {
  color: var(--burgundy);
}

strong, b {
  font-weight: 600;
}

small {
  font-size: var(--text-sm);
}

/* --- Focus styles --- */
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* --- Selection --- */
::selection {
  background-color: var(--pink-soft);
  color: var(--burgundy);
}

/* --- Images --- */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

/* --- Lists --- */
ul, ol {
  padding-inline-start: var(--space-6);
}

li {
  margin-block-end: var(--space-2);
}

/* --- Skip to content --- */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: var(--z-toast);
  padding: var(--space-3) var(--space-6);
  background: var(--burgundy);
  color: var(--white);
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  transition: top var(--duration-fast) var(--ease-smooth);
}

.skip-link:focus {
  top: 0;
}

/* --- Screen reader only --- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Utility classes --- */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.font-heading { font-family: var(--font-heading); }
.font-kids { font-family: var(--font-kids); }

.color-pink { color: var(--pink-hot); }
.color-burgundy { color: var(--burgundy); }

.bg-cream { background-color: var(--cream); }
.bg-cream-light { background-color: var(--cream-light); }
.bg-cream-paper { background-color: var(--cream-paper); }
.bg-burgundy { background-color: var(--burgundy); color: var(--cream-light); }
.bg-pink-soft { background-color: var(--pink-soft); }