/* ============================================
   Design Tokens — Spanisch Zürioberland
   ============================================
   Single source of truth for colors, fonts,
   and spacing used across all CSS files.
   ============================================ */

:root {
    /* Brand colors */
    --color-green: #4e8c3a;
    --color-green-dark: #3d8f22;
    --color-cream: #F6EDDB;
    --color-dark: #333;
    --color-footer-bg: #2b2b2b;

    /* Cream with opacity variants */
    --color-cream-90: rgba(246, 237, 219, 0.9);
    --color-cream-70: rgba(246, 237, 219, 0.7);
    --color-cream-60: rgba(246, 237, 219, 0.6);
    --color-cream-30: rgba(246, 237, 219, 0.3);
    --color-cream-25: rgba(246, 237, 219, 0.25);

    /* White with opacity variants (glass effects) */
    --color-glass: rgba(255, 255, 255, 0.15);
    --color-glass-hover: rgba(255, 255, 255, 0.22);
    --color-glass-border: rgba(255, 255, 255, 0.2);
    --color-glass-btn: rgba(255, 255, 255, 0.2);
    --color-glass-btn-hover: rgba(255, 255, 255, 0.35);

    /* Accent */
    --color-star: #ffc107;

    /* Fonts */
    --font-display: "Josefin Sans", sans-serif;
    --font-body: inherit;

    /* Font sizes (project rem scale: html 36%–62.5%) */
    --fs-section-title: 4.5rem;
    --fs-section-title-mobile: 3.5rem;
    --fs-section-title-xs: 3rem;
    --fs-subsection-h2: 4rem;
    --fs-subsection-h2-mobile: 3.5rem;
    --fs-icon: 6rem;

    /* Spacing */
    --section-padding: 80px;
    --section-padding-mobile: 60px;
    --section-title-mb: 60px;
    --section-title-mb-mobile: 40px;
}