/*
Theme Name: Kidzone
Theme URI: https://example.com/kidzone
Author: Your Studio
Author URI: https://example.com
Description: A warm, playful WordPress theme for preschools, kindergartens and kids' learning centers. Custom-built with CPTs for Programs, Teachers, Events, Notices and Gallery.
Version: 1.9.1
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: kidzone
Tags: education, block-styles, custom-menu, custom-logo, translation-ready

Kidzone is derivative of a preschool site-structure brief (pages: Home, About,
Programs, Program Details, Contact, Image/Video Gallery, Teachers, Events,
Admission, Notice, 404) built with fully original design assets, copy and code.
*/

/* =========================================================
   DESIGN TOKENS
   Palette:
     --color-ink     #1E2A38  (Deep Navy – header/footer/banners, body text)
     --color-coral   #FF6B4A  (Warm Coral – primary CTA buttons)
     --color-sky     #2C8E93  (Teal – secondary accent, links, badges)
     --color-sun     #FFC93C  (Sunshine Yellow – star ratings only)
     --color-leaf    #3FA66B  (Green – checklist ticks)
     --color-cream   #FFFBF5  (page background)
     --color-cream-dark #EAF6F1 (pale mint – alternating section background)

   Type:
     Display: 'Poppins' (bold, confident, modern-friendly for headings)
     Body:    'Inter' (clean, highly legible for paragraphs/UI)

   Signature elements: a floating rating badge over the hero image, a
   diagonal dark-navy-to-transparent page banner on every inner page,
   and a crayon-underline accent beneath key headings.
   ========================================================= */

:root {
  /* Colors */
  --color-sun: #FFC93C;
  --color-sun-dark: #E8A91E;
  --color-sky: #2C8E93;
  --color-sky-dark: #1F6F78;
  --color-coral: #FF6B4A;
  --color-coral-dark: #E85536;
  --color-leaf: #3FA66B;
  --color-leaf-dark: #2C8452;
  --color-cream: #FFFBF5;
  --color-cream-dark: #EAF6F1;
  --color-peach: #FDEFE6;
  --color-ink: #1E2A38;
  --color-ink-light: #2C3E52;
  --color-ink-soft: #5B6B7A;
  --color-white: #FFFFFF;

  /* Typography */
  --font-display: 'Poppins', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

  --fs-h1: clamp(2.4rem, 4vw, 3.6rem);
  --fs-h2: clamp(1.9rem, 3vw, 2.6rem);
  --fs-h3: clamp(1.3rem, 2vw, 1.7rem);
  --fs-body: 1.05rem;
  --fs-small: 0.9rem;
  --fs-eyebrow: 0.85rem;

  /* Spacing scale */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.75rem;
  --space-lg: 3rem;
  --space-xl: 5rem;

  /* Shape / radius */
  --radius-card: 22px;
  --radius-pill: 999px;
  --shadow-soft: 0 12px 30px rgba(43, 50, 66, 0.10);
  --shadow-lift: 0 18px 40px rgba(43, 50, 66, 0.16);

  /* Container: full-width layout (edge-to-edge with side padding).
     Set a max-width below (e.g. 1600px) instead of "none" if you'd
     prefer a capped-but-wide layout on ultra-large monitors. */
  --container-max: none;
}

/* Reduced motion respect (referenced by assets/css/main.css animations) */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}