/* ==========================================================
   TOKENS DE DISEÑO · ASKWTH
   Fuente única de color, tipografía, espaciado, radios, sombras
   y movimiento. Los componentes usan estas variables en lugar de
   valores sueltos.
   Breakpoints de referencia: 480 · 768 · 960 · 1280 · 1800 px.
   ========================================================== */

:root {
    color-scheme: dark;

    /* ---------- Color: superficies ---------- */
    --color-bg: #030812;
    --color-surface: #070d18;
    --color-surface-2: #0d1524;
    --color-surface-3: #121d31;
    --color-border: #1c2738;
    --color-border-strong: #2a3a52;

    /* ---------- Color: texto ---------- */
    --color-text: #f4f7fb;          /* 18,7:1 sobre el fondo */
    --color-text-muted: #9aa5b5;    /* 8,0:1 */
    --color-text-subtle: #7e8898;   /* 5,6:1 · solo ≥12px */

    /* ---------- Color: marca y estados ---------- */
    --color-primary: #2f7cff;        /* acentos y enlaces sobre fondo oscuro (5,2:1) */
    --color-primary-hover: #4b8eff;
    --color-primary-strong: #1f6fef; /* fondo de botón: texto blanco 4,6:1 */
    --color-primary-deep: #1265f2;   /* final del degradado del botón: 5,0:1 */
    --color-primary-soft: rgba(47, 124, 255, .1);
    --color-primary-line: rgba(47, 124, 255, .32);
    --color-success: #20d67b;
    --color-success-soft: rgba(32, 214, 123, .1);
    --color-danger: #ff6876;
    --color-danger-soft: rgba(255, 104, 118, .1);
    --color-warning: #f3c728;
    --color-violet: #a95cff;
    --color-cyan: #26d7e8;
    --color-on-primary: #ffffff;
    --focus-ring: #6daaff;

    /* ---------- Tipografía ---------- */
    --font-sans: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-display: "Chakra Petch", "Onest", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;

    --text-xs: .75rem;       /* 12px · mínimo absoluto */
    --text-sm: .8125rem;     /* 13px */
    --text-base: .875rem;    /* 14px · texto de interfaz */
    --text-md: 1rem;         /* 16px · lectura */
    --text-lg: 1.125rem;     /* 18px */
    --text-xl: 1.375rem;     /* 22px */
    --text-2xl: 1.5rem;      /* 24px */
    --text-3xl: clamp(2rem, 1.4rem + 2vw, 2.75rem);
    --text-hero: clamp(2.5rem, 1.6rem + 3.6vw, 4rem);

    --leading-tight: 1.1;
    --leading-snug: 1.3;
    --leading-normal: 1.5;
    --leading-relaxed: 1.6;

    --weight-regular: 400;
    --weight-semibold: 600;
    --weight-bold: 800;
    --weight-black: 900;

    --tracking-label: .08em;

    /* ---------- Espaciado (base 4px) ---------- */
    --space-1: .25rem;   /* 4 */
    --space-2: .5rem;    /* 8 */
    --space-3: .75rem;   /* 12 */
    --space-4: 1rem;     /* 16 */
    --space-5: 1.25rem;  /* 20 */
    --space-6: 1.5rem;   /* 24 */
    --space-8: 2rem;     /* 32 */
    --space-10: 2.5rem;  /* 40 */
    --space-12: 3rem;    /* 48 */
    --space-16: 4rem;    /* 64 */

    --tap-target: 44px;

    /* ---------- Radios ---------- */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-pill: 999px;

    /* ---------- Sombras ---------- */
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 8px rgba(0, 0, 0, .18);
    --shadow-2: 0 8px 24px rgba(0, 0, 0, .32), 0 2px 6px rgba(0, 0, 0, .2);
    --shadow-3: 0 24px 64px rgba(0, 0, 0, .55), 0 6px 18px rgba(0, 0, 0, .3);
    --glow-primary: 0 8px 24px rgba(24, 103, 242, .32);
    --glow-primary-strong: 0 12px 32px rgba(24, 103, 242, .44);

    /* ---------- Movimiento ---------- */
    --duration-fast: 150ms;
    --duration: 220ms;
    --duration-slow: 400ms;
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);

    /* ---------- Capas ---------- */
    --z-header: 26;
    --z-drawer: 30;
    --z-modal: 1200;
    --z-toast: 1300;
}