/* ==========================================================================
   DESIGN TOKENS
   ========================================================================== */
:root {
    /* Sky (hero gradient) */
    --sky-purple: #895DA9;
    --sky-pink: #EB9B9A;
    --sky-orange: #FAC0A2;
    --sky-yellow: #FDD395;
    --sky-yellow-light: #FDECAB;

    /* Ocean (one tone per section, from shallow to deep) */
    --teal-100: #3FB6C4;
    --teal-200: #2D8EA9;
    --teal-300: #1B6F87;

     /* Texts */
    --ink: #835A43;
    --ink-white: #ffffff;

    /* Neutrals */
    --cream: #FEEDCE;
    --cream-light: #FFF8E8;
    --sand: #FDECAB;
    --shore: #F6E3B4;
    --white: #ffffff;

    /* Wood (signs, boards) */
    --wood-dark: #7A4421;
    --wood: #8b5a3c;
    --wood-light: #b07a4f;

    --green: #7CC34E;
    --green-dark: #3F7F2A;
    --orange: #FF8A5B;
    --orange-dark: #d9741a;
    --blue: #2D8EA9;
    --purple: #B07BD6;
    --yellow: #FFC93C;
    --pink: #ed8ebb;

    /* Typography */
    --font-display: "Baloo 2", "Segoe UI", system-ui, sans-serif;
    --font-body: "Fresca", "Segoe UI", system-ui, sans-serif;
    --font-other: "Fredoka", "Segoe UI", system-ui, sans-serif;

    /* Shape & depth */
    --radius-lg: 36px;
    --radius-md: 14px;
    --radius-full: 999px;
    --shadow-card: 0 10px 30px rgba(58, 42, 29, 0.22);
    --shadow-soft: 0 4px 10px rgba(0, 0, 0, 0.15);

    /* Layout */
    --content-width: 1120px;
    --gutter: clamp(20px, 5vw, 48px);
    --wave-height: clamp(40px, 8vw, 90px);

    --focus-ring: 3px solid #ffd166;
}