/* ==================================================
   tokens.css
   Función: concentrar colores, espacios, radios y z-index.
   Toca este archivo cuando cambie la identidad visual global.
   ================================================== */
:root {
    /* Marca */
    --color-primary: #d35400;
    --color-secondary: #0089a7;
    --color-accent: #ff7300;

    /* Superficies */
    --color-bg: #0a0a0a;
    --color-bg-elevated: #111111;
    --color-bg-card: rgba(255, 255, 255, 0.04);
    --color-border: rgba(255, 255, 255, 0.08);
    --color-border-strong: rgba(255, 255, 255, 0.14);

    /* Texto */
    --color-text: #ffffff;
    --color-text-soft: #e0e0e0;
    --color-text-muted: #888888;

    /* Sombras */
    --shadow-soft: 0 8px 40px rgba(0, 0, 0, 0.35);
    --shadow-medium: 0 14px 40px rgba(0, 0, 0, 0.45);

    /* Gradientes */
    --gradient-brand: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    --gradient-brand-inverse: linear-gradient(135deg, var(--color-secondary), var(--color-primary));

    /* Layout */
    --container-max: 1200px;
    --header-height: 96px;
    --radius-sm: 12px;
    --radius-md: 20px;
    --radius-lg: 28px;
    --radius-pill: 999px;

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

    /* Z-index */
    --z-header: 1000;
    --z-menu: 1010;
    --z-overlay: 1005;
}