/* ─── DESIGN TOKENS ───────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,600;0,700;1,600&family=Source+Sans+3:wght@400;500;600;650&display=swap');

:root {
    /* Palette */
    --c-blue:       #2563eb;
    --c-blue-dark:  #1d4ed8;
    --c-purple:     #7c3aed;
    --c-cyan:       #06b6d4;
    --c-cyan-light: #cffafe;

    /* Surfaces */
    --bg-dark:      #0b0f14;
    --surface:      #f5f6fa;
    --surface-soft: #eeeef4;

    /* Text */
    --text-light:   rgba(255,255,255,.92);
    --text-dark:    #0f1923;
    --muted-light:  rgba(255,255,255,.68);
    --muted-dark:   #5f6370;

    /* Borders */
    --border-light: rgba(255,255,255,.14);
    --border-dark:  rgba(15,25,35,.10);

    /* Legacy purple accents (nav uses these) */
    --p1: #2563eb;
    --p2: #06b6d4;

    /* Misc */
    --shadow:  0 16px 40px rgba(0,0,0,.10);
    --radius:  10px;
    --max:     1120px;

    /* Typography */
    --font-display: 'Lora', Georgia, serif;
    --font-body:    'Source Sans 3', ui-sans-serif, system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }

html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 64px; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--text-dark);
    background: #fff;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a.col { text-decoration: underline dotted; }

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

h1, h2, h3, p { margin-top: 0; }