:root {
    /* Superficies */
    --bg-0: #08080b;
    --bg-1: #0e0e13;
    --bg-2: #15151c;
    --bg-3: #1c1c25;
    --surface-glass: rgba(255, 255, 255, 0.06);
    --surface-glass-strong: rgba(255, 255, 255, 0.1);
    --border-subtle: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.16);

    /* Texto */
    --text-primary: #f5f5f7;
    --text-secondary: rgba(245, 245, 247, 0.68);
    --text-tertiary: rgba(245, 245, 247, 0.44);
    --text-inverse: #0b0b10;

    /* Acento — gradiente de marca */
    --accent-a: #ff5fa2;
    --accent-b: #7c5cff;
    --accent-c: #40c9ff;
    --accent-grad: linear-gradient(120deg, var(--accent-a), var(--accent-b) 55%, var(--accent-c));
    --accent-grad-soft: linear-gradient(120deg, rgba(255, 95, 162, 0.25), rgba(124, 92, 255, 0.25) 55%, rgba(64, 201, 255, 0.25));
    --accent-solid: #8b6bff;

    /* Estados */
    --danger: #ff5c5c;
    --success: #35d08a;

    /* Radios */
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-pill: 999px;

    /* Sombras */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 40px rgba(139, 107, 255, 0.35);

    /* Tipografía */
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --fs-display: clamp(2.6rem, 6vw + 1rem, 5rem);
    --fs-h1: clamp(2rem, 4vw + 1rem, 3rem);
    --fs-h2: clamp(1.5rem, 2.4vw + 1rem, 2.1rem);
    --fs-h3: 1.25rem;
    --fs-body: 1rem;
    --fs-sm: 0.875rem;
    --fs-xs: 0.75rem;

    /* Espaciado */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;

    /* Transiciones */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-fast: 150ms;
    --dur-base: 250ms;
    --dur-slow: 450ms;

    /* Layout */
    --header-h: 72px;
    --mobile-nav-h: 72px;
    --container-w: 1280px;

    --z-header: 100;
    --z-mobile-nav: 100;
    --z-overlay: 500;
    --z-camera: 800;
    --z-toast: 900;
}