/* ============================================================
   Theme — Design Tokens
   Single source of truth for all visual values
   ============================================================ */

:root {
    /* ---- Color Palette ---- */
    --color-bg:         #0f0f1a;
    --color-surface:    #1a1a2e;
    --color-surface-2:  #252542;
    --color-surface-3:  #303060;
    --color-primary:    #00d4ff;
    --color-primary-dim:#0099bb;
    --color-secondary:  #e040fb;
    --color-gold:       #ffd700;
    --color-text:       #e0e0e0;
    --color-text-muted: #8888aa;
    --color-success:    #4caf50;
    --color-danger:     #f44336;
    --color-warning:    #ff9800;

    /* ---- Typography ---- */
    --font-body:  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                  'Helvetica Neue', Arial, sans-serif;
    --font-mono:  'SF Mono', 'Fira Code', 'Courier New', Courier, monospace;

    /* ---- Spacing Scale ---- */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;

    /* ---- Border Radii ---- */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-round: 50%;

    /* ---- Shadows ---- */
    --shadow-sm:   0 2px 8px rgba(0, 0, 0, 0.2);
    --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.3);
    --shadow-lg:   0 8px 32px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 16px rgba(0, 212, 255, 0.3);

    /* ---- Transitions ---- */
    --transition-fast:   120ms ease;
    --transition-normal: 250ms ease;
    --transition-slow:   400ms ease;

    /* ---- Z-Index Scale ---- */
    --z-dropdown: 100;
    --z-modal:    200;
    --z-toast:    300;
}

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

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-body);
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.5;
    min-height: 100dvh;
    overflow-x: hidden;
}

a {
    color: var(--color-primary);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

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

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
    color: inherit;
}

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