:root {
    --brand: #1abc9c;
    --brand-dark: #0e9e82;
    --brand-pale: #e8faf5;

    --bg: #ffffff;
    --bg2: #f7fbfa;
    --bg3: #eef6f0;
    --surface: #ffffff;
    --surface2: #f4f8f6;

    --text: #0f1f1a;
    --text2: #3d5a52;
    --text3: #7a9e94;

    --border: rgba(26, 188, 156, 0.15);
    --shadow: 0 20px 60px rgba(26, 188, 156, 0.12);
    --shadow-sm: 0 4px 20px rgba(26, 188, 156, 0.08);

    --blob1: #d4f5ec;
    --blob2: #b8eedd;
    --blob3: #e8faf5;
    --wave: #eef8f4;

    --nav-h: 76px;
    --radius: 20px;
    --radius-lg: 32px;
}

[data-theme="dark"] {
    --bg: #0a1410;
    --bg2: #0d1a16;
    --bg3: #111f1a;
    --surface: #142019;
    --surface2: #1a2d25;

    --text: #e8f5f1;
    --text2: #a3c4ba;
    --text3: #5e8a7e;

    --border: rgba(26, 188, 156, 0.2);
    --shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 4px 20px rgba(0, 0, 0, 0.3);

    --blob1: #0f2e24;
    --blob2: #0a2019;
    --blob3: #122b21;
    --wave: #0d1e18;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'DM Sans', sans-serif;
    background: var(--bg);
    color: var(--text);
    transition: background 0.35s ease, color 0.35s ease;
    overflow-x: hidden;
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: var(--bg2);
}

::-webkit-scrollbar-thumb {
    background: var(--brand);
    border-radius: 99px;
}