/*
 * Ontwerp-tokens. Bron van waarheid voor kleur, typografie, schaal en spacing.
 * Afgeleid uit het Claude Design-ontwerp "La Nueva Torre site".
 * Componenten gebruiken deze variabelen — geen losse hexwaarden.
 */
:root {
    /* Kleuren */
    --color-bg:          #efe5d8;
    --color-surface:     #faf3ea;
    --color-card:        #ffffff;
    --color-ink:         #33231a;
    --color-ink-70:      rgba(51, 35, 26, .70);
    --color-ink-60:      rgba(51, 35, 26, .60);
    --color-ink-55:      rgba(51, 35, 26, .55);
    --color-ink-45:      rgba(51, 35, 26, .45);
    --color-terra:       #b4532a;
    --color-terra-dark:  #8f3f1e;
    --color-terra-deep:  #9d4522;
    --color-gold:        #e2a13c;
    --color-blue:        #2f6f8f;
    --color-header-text: #faf3ea;
    --color-tile-a:      #f0e4d4;
    --color-tile-b:      #f6ecdf;
    --color-danger:      #a12b1e;

    /* Typografie */
    --font-body:    'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --font-display: 'Lora', Georgia, 'Times New Roman', serif;

    /* Typeschaal (px uit het ontwerp) */
    --text-xs:   11px;
    --text-sm:   12px;
    --text-base: 14px;
    --text-md:   16px;
    --text-lg:   18px;
    --text-xl:   21px;
    --text-2xl:  25px;
    --text-3xl:  29px;

    /* Radii */
    --radius-sm:   8px;
    --radius:      12px;
    --radius-pill: 99px;

    /* Spacing */
    --space-1: 6px;
    --space-2: 10px;
    --space-3: 14px;
    --space-4: 18px;
    --space-5: 20px;
    --space-6: 26px;
    --space-7: 34px;

    /* Schaduw */
    --shadow-card:    0 2px 10px rgba(51, 35, 26, .08);
    --shadow-card-sm: 0 1px 5px  rgba(51, 35, 26, .06);
    --shadow-frame:   0 0 40px    rgba(51, 35, 26, .12);

    /* Layout */
    --frame-max: 480px;
}

/* Kleine, gedeelde basis. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img { max-width: 100%; height: auto; }
a { color: var(--color-terra); }
a:hover { color: var(--color-terra-dark); }

:focus-visible {
    outline: 3px solid var(--color-blue);
    outline-offset: 2px;
    border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}