/*
 * Design-Tokens Bali VW Tour (aus dem Claude-Design-Handover).
 * Zentrale Stellschrauben: Farben, Schrift, Abstände, Radien, Schatten.
 * Der Betreiber kann hier Farben/Schriftgrößen für die ganze Site anpassen.
 */
:root {
    /* ---- Farben ---- */
    --color-bg: #faf7f0;            /* Creme – Seitenhintergrund */
    --color-bg-sand: #f1eadc;       /* Sand – alternierende Sektionen */
    --color-bg-dark: #0f2e29;       /* dunkelstes Grün – Footer/Topbar/dunkle Sektionen */
    --color-bg-panel: #1d4d44;      /* Panel-Grün auf dunklen Flächen */
    --color-green: #206359;         /* Primärgrün – Buttons/Links */
    --color-green-hover: #1a5249;
    --color-green-deep: #163f38;    /* Überschriften */
    --color-gold: #cf9b3f;          /* Akzent Gold – CTA */
    --color-gold-hover: #c08f30;
    --color-terracotta: #c1623f;    /* Kicker/Eyebrows */
    --color-teal: #1c8a86;          /* Badge-Akzent */
    --color-text: #1b211e;
    --color-text-soft: #454e48;
    --color-text-muted: #5a635c;
    --color-text-faint: #8a938c;
    --color-cream: #f6f1e7;         /* helle Schrift auf Grün */
    --color-cream-bright: #fbf6ea;  /* Überschriften auf Dunkel */
    --color-dark-body: #bcd0c9;     /* Fließtext auf Dunkel */
    --color-dark-muted: #9fb6ad;
    --color-line: rgba(32, 99, 89, .12);
    --color-line-dark: rgba(243, 237, 224, .12);
    --color-error: #a33a2a;
    --color-success-bg: #e5efe0;

    /* ---- Typografie ---- */
    --font-head: 'Archivo', system-ui, sans-serif;
    --font-body: 'Hanken Grotesk', system-ui, sans-serif;
    --font-mono: ui-monospace, Menlo, Consolas, monospace;
    --fs-body: 1.0625rem;           /* 17px */
    --fs-small: .875rem;
    --fs-h1: clamp(2rem, 5vw, 3.25rem);
    --fs-h2: clamp(1.75rem, 3.5vw, 2.75rem);
    --fs-h3: clamp(1.2rem, 2vw, 1.45rem);
    --lh-body: 1.65;
    --lh-head: 1.06;

    /* ---- Abstände ---- */
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 2rem;
    --space-6: 3rem;
    --space-7: 4rem;
    --space-8: 6rem;
    --wrap-max: 1280px;
    --wrap-pad: clamp(20px, 4vw, 32px);

    /* ---- Radien & Schatten ---- */
    --radius-s: 8px;
    --radius-m: 12px;
    --radius-l: 20px;
    --radius-xl: 22px;
    --shadow-card: 0 18px 40px rgba(22, 63, 56, .14);
    --shadow-header: 0 2px 20px rgba(22, 63, 56, .05);
    --shadow-btn-gold: 0 6px 16px rgba(207, 155, 63, .32);
    --shadow-btn-green: 0 10px 26px rgba(32, 99, 89, .26);
}