/* =================================================================================
   SGraph Vault — Design Tokens
   v0.1.0 — Aurora dark theme (navy + teal accents)

   Copied from Send UI v0.2.0 design-tokens.css.
   CSS custom properties on :root cross Shadow DOM boundaries automatically.
   ================================================================================= */

:root {
    /* -- Colour: Aurora palette -- */
    --color-bg:               #1A1A2E;
    --color-surface:          #1E2A4A;
    --color-primary:          #4ECDC4;
    --color-primary-hover:    #3DBDB4;
    --color-text:             #E0E0E0;
    --color-text-secondary:   #8892A0;
    --color-border:           rgba(78, 205, 196, 0.15);
    --color-success:          #4ECDC4;
    --color-error:            #E94560;
    --color-warning:          #E07C4F;
    --color-drop-zone-bg:     #16213E;
    --color-drop-zone-border: rgba(78, 205, 196, 0.25);
    --color-drop-zone-active: #4ECDC4;

    /* -- Extended palette -- */
    --bg-primary:       #1A1A2E;
    --bg-secondary:     #16213E;
    --bg-surface:       #1E2A4A;
    --accent:           #4ECDC4;
    --accent-hover:     #3DBDB4;
    --accent-subtle:    rgba(78, 205, 196, 0.12);
    --danger:           #E94560;
    --success:          #4ECDC4;

    /* -- Typography -- */
    --font-family:     'DM Sans', system-ui, -apple-system, sans-serif;
    --font-display:    'DM Sans', system-ui, sans-serif;
    --font-body:       'DM Sans', system-ui, sans-serif;
    --font-mono:       'JetBrains Mono', 'SF Mono', 'Cascadia Code', monospace;

    --text-display:    2.5rem;
    --text-h1:         2rem;
    --text-h2:         1.6rem;
    --text-h3:         1.25rem;
    --text-body:       1rem;
    --text-sm:         0.875rem;
    --text-small:      0.8rem;
    --text-micro:      0.625rem;

    --weight-regular:  400;
    --weight-medium:   500;
    --weight-semibold: 600;
    --weight-bold:     700;

    /* -- Spacing (4px base) -- */
    --space-1:   4px;
    --space-2:   8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-6:  24px;
    --space-8:  32px;
    --space-12: 48px;
    --space-16: 64px;

    /* -- Geometry -- */
    --radius:         8px;
    --radius-sm:      6px;
    --radius-md:     12px;
    --radius-lg:     20px;
    --shadow:         0 4px 24px rgba(0, 0, 0, 0.3);
    --shadow-lg:      0 8px 32px rgba(0, 0, 0, 0.4);
    --transition:     150ms ease;
}

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

body {
    margin: 0;
    padding: 0;
    background-color: var(--bg-primary);
    color: var(--color-text);
    font-family: var(--font-family);
    font-size: var(--text-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: var(--accent); }
a:hover { color: var(--accent-hover); }

::selection {
    background: rgba(78, 205, 196, 0.3);
    color: var(--color-text);
}

::-webkit-scrollbar       { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-text-secondary); }