:root {
    /* Marble-white backgrounds — OKLCH for perceptual uniformity */
    --bg:       oklch(97% 0.008 80);
    --bg-warm:  oklch(94% 0.014 75);
    --bg-navy:  oklch(22% 0.06 252);
    --bg-navy-2:oklch(17% 0.055 252);

    /* Text — neutral Tailwind grays (match live site) */
    --text:     #2D3748;   /* headings (slate)  rgb(45,55,72) */
    --text-2:   #4B5563;   /* body / lead       gray-600      */
    --muted:    #6B7280;   /* muted labels      gray-500      */

    /* Text on dark backgrounds */
    --text-inv:   oklch(94% 0.012 80);
    --text-inv-2: oklch(78% 0.030 252);
    --muted-inv:  oklch(62% 0.040 252);

    /* Accent — Mediterranean deep blue */
    --accent:       oklch(40% 0.140 252);
    --accent-hover: oklch(34% 0.140 252);
    --accent-light: oklch(55% 0.140 252);
    --accent-faint: oklch(92% 0.040 252);

    /* Gold — warm Mediterranean sun */
    --gold:       oklch(66% 0.125 72);
    --gold-light: oklch(80% 0.090 72);
    --gold-faint: oklch(94% 0.040 75);

    /* Borders */
    --border:   oklch(88% 0.018 80);
    --border-2: oklch(82% 0.024 80);
    --border-inv: oklch(32% 0.060 252);

    /* Semantic */
    --success:  oklch(55% 0.16 145);
    --danger:   oklch(52% 0.20 25);

    /* Spacing (4pt scale) */
    --space-1:  0.25rem;   /* 4px  */
    --space-2:  0.5rem;    /* 8px  */
    --space-3:  0.75rem;   /* 12px */
    --space-4:  1rem;      /* 16px */
    --space-6:  1.5rem;    /* 24px */
    --space-8:  2rem;      /* 32px */
    --space-12: 3rem;      /* 48px */
    --space-16: 4rem;      /* 64px */
    --space-20: 5rem;      /* 80px */
    --space-24: 6rem;      /* 96px */

    /* Typography */
    --font-display: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-body:    ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

    /* Type scale — fluid for headings, fixed for UI */
    --text-xs:   0.72rem;
    --text-sm:   0.85rem;
    --text-base: 1rem;
    --text-lg:   1.125rem;
    --text-xl:   clamp(1.3rem, 2.2vw, 1.5rem);
    --text-2xl:  clamp(1.6rem, 2.8vw, 2rem);
    --text-3xl:  clamp(2rem, 3.5vw, 2.75rem);
    --text-4xl:  clamp(2.8rem, 5vw, 4rem);
    --text-5xl:  clamp(3.5rem, 6.5vw, 5.5rem);

    /* Misc */
    --radius:    4px;
    --radius-md: 8px;
    --nav-height: 72px;
    --max-w:     1280px;
    --max-w-narrow: 720px;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 400;
    line-height: 1.65;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: var(--accent);
    text-decoration: none;
}

button {
    font-family: var(--font-body);
    cursor: pointer;
}

p + p {
    margin-top: var(--space-4);
}