/* ============================================
   Design Tokens – Einfach reisen mit Kind
   ============================================ */

:root {
    /* ---- Colors ---- */
    --color-paper: #fcfbf6;
    --color-ink: #4a4238;
    --color-otto-green: #87bdae;
    --color-otto-dark: #5a8f82;
    --color-sun-yellow: #f2d06b;
    --color-papa-rust: #d98e73;
    --color-paul-brown: #8c6b5d;
    --color-wash-green: #e8f3f0;
    --color-wash-yellow: #fdf8e6;
    --color-map-blue: #a8d5e2;
    --color-map-land: #e6b980;
    --color-label-white: #fdfdfd;

    /* Opacity variants */
    --color-otto-green-10: rgba(135, 189, 174, 0.1);
    --color-otto-green-20: rgba(135, 189, 174, 0.2);
    --color-otto-green-30: rgba(135, 189, 174, 0.3);
    --color-otto-green-50: rgba(135, 189, 174, 0.5);
    --color-sun-yellow-20: rgba(242, 208, 107, 0.2);
    --color-sun-yellow-30: rgba(242, 208, 107, 0.3);
    --color-papa-rust-20: rgba(217, 142, 115, 0.2);
    --color-papa-rust-30: rgba(217, 142, 115, 0.3);
    --color-papa-rust-40: rgba(217, 142, 115, 0.4);
    --color-ink-10: rgba(74, 66, 56, 0.1);
    --color-ink-20: rgba(74, 66, 56, 0.2);
    --color-ink-30: rgba(74, 66, 56, 0.3);
    --color-ink-40: rgba(74, 66, 56, 0.4);
    --color-ink-50: rgba(74, 66, 56, 0.5);
    --color-ink-60: rgba(74, 66, 56, 0.6);
    --color-ink-70: rgba(74, 66, 56, 0.7);
    --color-map-blue-20: rgba(168, 213, 226, 0.2);
    --color-map-blue-30: rgba(168, 213, 226, 0.3);
    --color-map-blue-50: rgba(168, 213, 226, 0.5);
    --color-map-land-30: rgba(230, 185, 128, 0.3);
    --color-map-land-40: rgba(230, 185, 128, 0.4);

    /* Tape / glass */
    --color-tape: rgba(255, 255, 255, 0.4);
    --color-tape-border: rgba(255, 255, 255, 0.3);

    /* Contra tape tint */
    --color-contra-tape: rgba(255, 200, 200, 0.3);

    /* Sun-yellow transparency for decorative elements */
    --color-sun-yellow-40: rgba(242, 208, 107, 0.4);

    /* Wash-yellow transparency */
    --color-wash-yellow-50: rgba(253, 248, 230, 0.5);

    /* Core neutrals */
    --color-white: #ffffff;
    --color-gray-100: #f3f4f6;
    --color-gray-200: #e5e7eb;
    --color-pin-red: #ef4444;
    --color-pin-red-dark: #dc2626;

    /* Info/warning box backgrounds */
    --color-info-bg: #e8f4f8;
    --color-warning-bg: #fcf0e6;

    /* ---- Typography ---- */
    --font-heading: 'Kalam', cursive;
    --font-body: 'Patrick Hand', cursive;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-6xl: 3.75rem;
    --text-8xl: 6rem;

    /* ---- Shadows ---- */
    --shadow-soft-ink: 4px 4px 0px 0px rgba(74, 66, 56, 0.15);
    --shadow-watercolor: 0 4px 14px 0 rgba(0,0,0,0.05), 4px 4px 0px 0px rgba(74, 66, 56, 0.1);
    --shadow-floating: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-paper-lift: 1px 1px 2px rgba(0,0,0,0.05), 2px 2px 4px rgba(0,0,0,0.05);
    --shadow-hard-sm: 3px 3px 0px 0px rgba(74, 66, 56, 0.15);
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);

    /* ---- Spacing ---- */
    --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;

    /* ---- Border Radius ---- */
    --radius-hand: 255px 15px 225px 15px / 15px 225px 15px 255px;
    --radius-hand-alt: 15px 225px 15px 255px / 255px 15px 225px 15px;
    --radius-full: 9999px;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;

    /* Blob border-radius (organic shapes) */
    --radius-blob-1: 63% 37% 54% 46% / 55% 48% 52% 45%;
    --radius-blob-2: 40% 60% 70% 30% / 40% 50% 60% 50%;
    --radius-blob-3: 55% 45% 35% 65% / 60% 30% 70% 40%;

    /* ---- Transitions ---- */
    --transition-fast: 100ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;
    --transition-bounce: 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);

    /* ---- Blur (watercolor effects) ---- */
    --blur-klecks: 12px;
    --blur-wash: 40px;

    /* ---- Backgrounds ---- */
    --bg-paper-dots: radial-gradient(#dcd8c8 1px, transparent 1px);
    --bg-paper-gradient: linear-gradient(to bottom right, #fcfbf6 0%, #f7f3e8 100%);
    --bg-dots-size: 24px 24px;
}