/* ── Design Tokens — Light Theme ─────────────────────────────────── */
:root {
    /* Brand */
    --primary:        #6d28d9;
    --primary-light:  #7c3aed;
    --primary-soft:   rgba(109, 40, 217, 0.07);
    --primary-border: rgba(109, 40, 217, 0.18);
    --accent:         #0891b2;

    /* Surfaces */
    --bg:             #f4f3fb;
    --surface:        #ffffff;
    --surface-2:      #faf9fe;
    --surface-3:      #f0eef9;
    --surface-4:      #e5e2f4;

    /* Borders */
    --border:         rgba(109, 40, 217, 0.08);
    --border-light:   rgba(0, 0, 0, 0.05);
    --border-med:     rgba(0, 0, 0, 0.09);

    /* Text */
    --text-1:         #18163a;
    --text-2:         #52508a;
    --text-3:         #a09ec0;

    /* Radius */
    --radius-sm:      6px;
    --radius-md:      10px;
    --radius-lg:      14px;
    --radius-xl:      20px;

    /* Shadows */
    --shadow-sm:   0 1px 3px rgba(109,40,217,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md:   0 4px 16px rgba(109,40,217,0.08), 0 2px 6px rgba(0,0,0,0.05);
    --shadow-lg:   0 12px 40px rgba(109,40,217,0.12), 0 4px 12px rgba(0,0,0,0.06);
    --shadow-card: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(109,40,217,0.07);

    /* Fonts */
    --font:       'DM Sans', system-ui, sans-serif;
    --font-head:  'Bricolage Grotesque', system-ui, sans-serif;
}

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

body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text-1);
    -webkit-font-smoothing: antialiased;
}

/* ── Selection ────────────────────────────────────────────────────── */
::selection { background: var(--primary-soft); color: var(--primary); }

/* ── Scrollbar ────────────────────────────────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: var(--surface-4) transparent; }
*::-webkit-scrollbar       { width: 5px; height: 5px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--surface-4); border-radius: 9999px; }
*::-webkit-scrollbar-thumb:hover { background: var(--text-3); }