:root {
    --night: #16232c;
    --pine: #2d5a57;
    --orange: #eb9735;
    --aqua: #6cb0b1;
    --yellow: #f0c74f;
    --mist: #e4ecec;

    --ink: var(--night);
    --muted: rgba(22, 35, 44, 0.8);
    --line: rgba(22, 35, 44, 0.12);
    --tint: rgba(22, 35, 44, 0.06);
    --accent: var(--pine);
    --eyebrow: var(--pine);

    --font-hand: "Caveat", "Comic Sans MS", cursive;
    --font-serif: "Fraunces", Georgia, "Times New Roman", serif;
    --font-sans: "Nunito Sans", "Segoe UI", Helvetica, Arial, sans-serif;
    --font-read: "Source Serif 4", Georgia, "Times New Roman", serif;

    --content: 1320px;
    --gutter: clamp(16px, 4vw, 40px);
    --gap: clamp(28px, 5vw, 72px);
    --radius: 4px;
    --radius-sm: 3px;
    --sticky-top: 88px;
    --shadow-lift: 0 2px 4px rgba(22, 35, 44, 0.08), 0 18px 40px -12px rgba(22, 35, 44, 0.28);
    --ease: 150ms ease;

    --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0 24 C120 8 240 36 380 22 S640 6 780 20 S1060 38 1200 18 S1380 10 1440 22 V40 H0Z' fill='%2316232c'/%3E%3C/svg%3E");
    --wave-height: clamp(14px, 2.4vw, 32px);
}

.surface-dark {
    --muted: var(--mist);
    --accent: var(--yellow);
    --eyebrow: var(--yellow);
    color: #fff;
    background: var(--pine);
}