@font-face {
    font-family: 'Caviar Dreams';
    src: url('../fonts/CaviarDreams.woff2') format('woff2'),
    url('../fonts/CaviarDreams.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Caviar Dreams';
    src: url('../fonts/CaviarDreams-Bold.woff2') format('woff2'),
    url('../fonts/CaviarDreams-Bold.woff') format('woff');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* ============================================================
   DESIGN TOKENS
============================================================ */
:root {
    /* Core palette */
    --teal-dark:   rgba(7, 125, 142);
    --teal-light:  rgba(69, 168, 189);
    --teal-light-root:  69, 168, 189;
    --teal-ghost:  rgba(7, 125, 142, 0.08);
    --teal-ghost-light: rgba(69, 168, 189, 0.08);
    --teal-ghost-light-light: rgba(69, 168, 189, 0.06);
    --red-dark:    rgba(81, 0, 11);
    --red-mid:     rgba(162, 43, 39);
    --red-light: rgb(171 71 67);
    --red-ghost:   rgba(162, 43, 39, 0.08);

    /* Neutral surface system */
    --white:       #ffffff;
    --surface:     #f5f8f8;   /* near-white with the tiniest teal tint */
    --ink:         #181c1c;   /* almost-black, slightly warm */
    --ink-soft:    #3d4545;
    --ink-muted:   #7a8888;
    --border:      #dde7e9;
    --border-soft: #eef3f4;

    /* Typography */
    --font-display: 'Caviar Dreams', 'Nunito', 'Trebuchet MS', sans-serif;
    --font-body:    'Source Sans 3', 'Helvetica Neue', Arial, sans-serif;

    /* Space scale (base 8px) */
    --sp-1: 0.5rem;   /*  8px */
    --sp-2: 1rem;     /* 16px */
    --sp-3: 1.5rem;   /* 24px */
    --sp-4: 2rem;     /* 32px */
    --sp-6: 3rem;     /* 48px */
    --sp-8: 4rem;     /* 64px */
    --sp-12: 6rem;    /* 96px */
    --sp-16: 8rem;    /* 128px */
    --sp-20: 10rem;   /* 160px */

    /* Radius */
    --r-sm:   8px;
    --r-md:   16px;
    --r-lg:   24px;
    --r-xl:   32px;
    --r-pill: 999px;

    /* Shadows */
    --shadow-sm:  0 2px 8px rgba(7, 125, 142, 0.08);
    --shadow-md:  0 8px 32px rgba(7, 125, 142, 0.12);
    --shadow-lg:  0 20px 60px rgba(7, 125, 142, 0.18);

    /* Transitions */
    --t-fast: 150ms ease;
    --t-base: 240ms ease;

    /* Blob background token (overridden per section) */
    --blob-bg: var(--surface);
}

/* ============================================================
   RESET & BASE
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--white);
    line-height: 1.7;
    overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

::selection {
    background: var(--teal-light);
    color: white;
}

/* ============================================================
   TYPOGRAPHY
============================================================ */
h1, h2, h3, h4 {
    font-family: var(--font-display);
    line-height: 1.15;
    font-weight: 700;
}

h1 { font-size: clamp(2.8rem, 7vw, 5.2rem); }
h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); }
h3 { font-size: clamp(1.1rem, 2.5vw, 1.4rem); }