/* ============================================================
   Go Away, Gertie! — Colors & Type
   A children's picture book design system.
   ------------------------------------------------------------
   Visual language: lush, painterly, farmyard.
   Sky blue + kelly green + wheat gold + warm browns,
   anchored by the title's forest-green / marigold-orange duo.
   ============================================================ */

/* ---------- Web fonts ----------
   Substitutions (until publisher fonts are supplied):
   - "Go Away,"  → Bowlby One   (display-1, chunky/bouncy caps)
   - "Gertie!"   → Lilita One   (display-2, fat rounded marker)
   - body copy   → Nunito        (rounded humanist sans)
   - hand notes  → Patrick Hand  (signpost / handwritten accents)
*/
@import url("https://fonts.googleapis.com/css2?family=Atma:wght@300;400;500;600;700&family=Chewy&family=Nunito:ital,wght@0,400;0,500;0,700;0,800;1,400;1,700&family=Patrick+Hand&display=swap");

:root {
  /* ----------------------------------------------------------
     CORE BRAND COLORS — the title duo
     ---------------------------------------------------------- */
  --gertie-green:      #172E17;  /* "Go Away," forest green */
  --gertie-orange:     #FF7F2F;  /* "Gertie!" marigold */
  --gertie-orange-deep:#E25E10;  /* drop-shadow / hover */
  --gertie-cream:      #FFF6E1;  /* page / paper */
  --gertie-ink:        #2A1B0E;  /* deepest brown ink */

  /* ----------------------------------------------------------
     SCENE COLORS — the painted farmyard palette
     Sampled directly from the cover illustration.
     ---------------------------------------------------------- */
  --sky-blue:          #5FC4D6;  /* clear summer sky */
  --sky-blue-soft:     #A9DEE7;  /* horizon haze */
  --cloud-white:       #F4F1E6;  /* not pure white — warm */

  --grass-bright:      #7DAB3E;  /* foreground grass */
  --grass-deep:        #4A7A2C;  /* shadowed grass */
  --leaf-green:        #2F5D2A;  /* tree shadow */

  --wheat-gold:        #E0A53A;  /* sunlit wheat field */
  --wheat-deep:        #B97A1F;  /* shaded wheat */

  --fence-wood:        #A66C3A;  /* fence post */
  --fence-wood-deep:   #6B3F1E;  /* shaded wood */
  --mud-brown:         #5A3A1F;  /* mud puddle */

  --basset-tan:        #B6753C;  /* basset coat */
  --basset-cream:      #F2DCB5;  /* basset belly */
  --pig-pink:          #F0A8AE;  /* the pig */
  --cow-red:           #B32E1E;  /* cow patches */
  --goat-grey:         #8C8478;  /* goat coat */
  --rooster-rust:      #B0531C;  /* rooster feathers */

  --stink-green:       #9DC34A;  /* ripe-compost stink wisps */

  /* Wildflowers */
  --flower-yellow:     #F5C642;
  --flower-red:        #D8413A;
  --flower-blue:       #5B8AC4;
  --flower-white:      #F8F4E3;

  /* ----------------------------------------------------------
     SEMANTIC TOKENS
     ---------------------------------------------------------- */
  /* Backgrounds */
  --bg-page:           var(--gertie-cream);     /* default paper */
  --bg-sky:            var(--sky-blue);         /* daytime panel */
  --bg-grass:          var(--grass-bright);     /* meadow panel */
  --bg-night:          #1B2A3F;                 /* bedtime panel */
  --bg-spotlight:      #FFFBEC;                 /* reading card */

  /* Foregrounds (text + ink) */
  --fg-1:              var(--gertie-ink);       /* primary ink */
  --fg-2:              #5C463A;                 /* secondary ink */
  --fg-3:              #8A7363;                 /* muted / caption */
  --fg-on-dark:        var(--cloud-white);      /* text over photos */
  --fg-on-orange:      var(--gertie-cream);

  /* Brand actions */
  --action:            var(--gertie-orange);
  --action-hover:      var(--gertie-orange-deep);
  --action-press:      #C44E08;
  --action-fg:         var(--gertie-cream);

  /* Borders / cards */
  --border-ink:        var(--gertie-ink);       /* hand-inked border */
  --border-soft:       #E2D3B5;                 /* subtle paper line */
  --card-bg:           var(--bg-spotlight);
  --card-shadow:       0 4px 0 var(--gertie-ink), 0 8px 18px rgba(42,27,14,0.18);

  /* States */
  --focus-ring:        var(--gertie-orange);
  --success:           var(--grass-deep);
  --danger:            var(--cow-red);
  --warning:           var(--flower-yellow);
  --info:              var(--sky-blue);

  /* ----------------------------------------------------------
     TYPE FAMILIES
     ---------------------------------------------------------- */
  --font-display-1:    "Atma", system-ui, sans-serif;     /* "Go Away," — bouncy bold */
  --font-display-2:    "Atma", system-ui, sans-serif;     /* "Gertie!" — same family, heavier weight */
  --font-story:        "Chewy", "Atma", system-ui, sans-serif; /* interior storybook copy */
  --font-body:         "Nunito", ui-rounded, system-ui, sans-serif;      /* paragraphs */
  --font-hand:         "Patrick Hand", "Comic Sans MS", cursive;         /* signs / notes */

  /* ----------------------------------------------------------
     SPACING (8pt baseline, generous for kids' UI)
     ---------------------------------------------------------- */
  --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;

  /* Radii — soft, hand-drawn feel */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* Strokes — borders on cards mimic ink lines from the cover */
  --stroke-thin:    2px solid var(--border-ink);
  --stroke-medium:  3px solid var(--border-ink);
  --stroke-thick:   4px solid var(--border-ink);

  /* Shadows */
  --shadow-soft:    0 2px 6px rgba(42,27,14,0.12);
  --shadow-card:    0 4px 0 var(--gertie-ink), 0 10px 22px rgba(42,27,14,0.18);
  --shadow-lift:    0 8px 0 var(--gertie-ink), 0 16px 32px rgba(42,27,14,0.22);
  --shadow-press:   0 1px 0 var(--gertie-ink), 0 2px 6px rgba(42,27,14,0.18);
}

/* ============================================================
   BASE TYPOGRAPHY
   ============================================================ */
html { color: var(--fg-1); background: var(--bg-page); }
body {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.55;
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Display heading — ALWAYS pair the two display faces by stacking them.
   The cover never uses a single display face alone. */
.display-stack {
  display: inline-grid;
  line-height: 0.95;
  text-align: center;
  filter: drop-shadow(0 4px 0 rgba(0,0,0,0.12));
}
.display-stack .d1 {
  font-family: var(--font-display-1);
  font-weight: 700;
  color: var(--gertie-green);
  text-transform: none;
  letter-spacing: -0.01em;
  transform: rotate(-2deg);
}
.display-stack .d2 {
  font-family: var(--font-display-2);
  font-weight: 700;
  color: var(--gertie-orange);
  -webkit-text-stroke: 4px var(--cloud-white);
  paint-order: stroke fill;
  letter-spacing: 0.01em;
  transform: rotate(2deg) translateY(-0.05em);
}

/* Heading scale — for non-cover use (interior headings, UI titles) */
h1, .h1 {
  font-family: var(--font-display-2);
  font-weight: 700;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.0;
  color: var(--gertie-orange);
  -webkit-text-stroke: 3px var(--gertie-cream);
  paint-order: stroke fill;
  margin: 0 0 var(--space-5);
}
h2, .h2 {
  font-family: var(--font-display-1);
  font-weight: 700;
  font-size: clamp(28px, 3.5vw, 44px);
  line-height: 1.05;
  color: var(--gertie-green);
  margin: 0 0 var(--space-4);
}
h3, .h3 {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.2;
  color: var(--fg-1);
  margin: 0 0 var(--space-3);
}
h4, .h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  color: var(--fg-1);
  margin: 0 0 var(--space-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Body */
p, .p {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  margin: 0 0 var(--space-4);
  color: var(--fg-1);
  text-wrap: pretty;
}
.p-large {
  font-size: 22px;
  line-height: 1.5;
}
.p-small, small {
  font-size: 14px;
  line-height: 1.45;
  color: var(--fg-2);
}
em, i { font-style: italic; }
strong, b { font-weight: 800; }

/* Storybook page text — the canonical interior font from the book.
   Chewy: rounded, hand-drawn, unicase-feeling display sans.
   Used for narrated story prose on cream pages. */
.story-text {
  font-family: var(--font-story);
  font-weight: 400; /* Chewy ships at one weight */
  font-size: 26px;
  line-height: 1.45;
  color: var(--fg-1);
  text-wrap: balance;
  letter-spacing: 0.005em;
}

/* Signpost / handwritten — for "Go Away!" sign & tags */
.hand {
  font-family: var(--font-hand);
  font-size: 22px;
  line-height: 1.2;
  color: var(--fg-1);
  letter-spacing: 0.01em;
}

/* Tag / pill labels */
.eyebrow {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-2);
}

a {
  color: var(--gertie-orange-deep);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
a:hover { color: var(--gertie-orange); }

/* Selection — orange marker highlight */
::selection { background: var(--gertie-orange); color: var(--gertie-cream); }