:root {
    --color-sage: #9da7a3;
    --color-sage-deep: #56625e;
    --color-sage-dark: #5f6b67;
    --color-blush: #f2d8cf;
    --color-blush-light: #faefea;
    --color-sand: #dfdbd2;
    --color-sand-light: #f3f1ec;
    --color-sand-mid: #e8e4dc;
    --color-white: #ffffff;
    --color-ink: #3a3936;
    --color-ink-soft: #55534e;
    --color-ink-faint: #6b6861;

    --surface-page: var(--color-sand-light);
    --surface-header: var(--color-blush);
    --surface-nav: var(--color-sage-deep);
    --surface-card: var(--color-white);
    --surface-card-alt: var(--color-blush-light);
    --surface-badge: var(--color-sand-mid);

    --text-heading: var(--color-ink);
    --text-body: var(--color-ink-soft);
    --text-muted: var(--color-ink-faint);
    --text-label: var(--color-sage-dark);
    --text-on-nav: var(--color-sand-light);
    --text-on-nav-soft: var(--color-sand);

    --accent-primary: var(--color-sage-deep);
    --accent-primary-hover: var(--color-sage-dark);
    --accent-sage: var(--color-sage);

    --border-subtle: var(--color-sand);
    --border-strong: var(--color-sage);

    --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-sans: 'Jost', 'Helvetica Neue', Arial, sans-serif;

    --tracking-wide: 0.14em;
    --tracking-mid: 0.08em;
    --tracking-normal: 0.01em;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;

    /* Nieuwe opmaak (#182): ronde kaarten met een zachte schaduw, pilvormige knoppen.
       Alles in componenten verwijst naar deze variabelen, zodat een eigen huisstijl (#139)
       of het palet van een bruidspaar alleen de variabelen hoeft te vervangen. */
    --color-danger: #9b3f33;
    --color-danger-border: #b5574a;
    --color-danger-soft: #f6e1dc;
    --color-success: #3f5a3c;
    --color-success-soft: #e4ebe2;

    --text-on-accent: var(--color-white);
    --decor-line: var(--color-sage);
    --decor-soft: #e3bfb2;
    --surface-disabled: var(--color-sand);
    --text-disabled: var(--color-ink-faint);

    --radius-card: 20px;
    --radius-panel: 24px;
    --radius-field: 12px;
    --radius-input: 8px;
    --radius-pill: 999px;
    --shadow-card: 0 4px 18px rgba(58, 57, 54, 0.06);
    --shadow-button: 0 6px 16px rgba(58, 57, 54, 0.18);

    --heading-1-size: clamp(30px, 3.4vw, 42px);
    --heading-2-size: clamp(22px, 2.4vw, 28px);

    --tap-min: 44px;
    --button-height: 48px;
}