:root {
    --color-aqua-blue: #D5E6E0;
    --color-palm-leaf: #4D7D51;
    --color-light-sand: #EDEBDD;
    --color-cherry-blossom: #F1BDBF;
    --color-black: #000000;

    --color-primary: var(--color-palm-leaf);
    --color-primary-hover: #3D6440;
    --color-background: var(--color-aqua-blue);
    --color-surface: var(--color-light-sand);
    --color-accent: var(--color-cherry-blossom);
    --color-text: #1A1A1A;
    --color-text-on-primary: #FFFFFF;

    --color-text-muted: #5A6660;
    --color-border: #C9D8D1;

    --color-focus-ring: rgba(77, 125, 81, 0.30);

    --color-danger: #C0392B;

    --font-body: 'Poppins', 'Segoe UI', sans-serif;
    --font-display: 'MADE Mirage', 'Fraunces', Georgia, serif;
    --letter-spacing-subtitle: 0.02em;

    --radius-lg: 16px;
    --radius-md: 12px;
    --radius-sm: 10px;
}

body {
    font-family: var(--font-body);
    color: var(--color-text);
}

h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4 {
    font-family: var(--font-display);
}

.subtitle, .tagline {
    font-family: var(--font-body);
    font-weight: 500;
    letter-spacing: var(--letter-spacing-subtitle);
}

.brand-wordmark {
    font-family: var(--font-body);
    font-weight: 500;
    text-transform: lowercase;
    letter-spacing: 0.01em;
    color: var(--color-primary);
}