/*
 * RESOLVED — Design Tokens
 * Etapa 1: Prototipo HTML estático
 *
 * PALETA 60/30/10
 * Dominant  60% → fondos de página y secciones
 * Secondary 30% → nav, tarjetas, superficies elevadas
 * Accent    10% → CTAs, highlights, énfasis
 */

:root {

    /* ── Colores base ─────────────────────────────────────────── */
    --color-nav-bg:          #00000047;
    --color-bg:              #26262E;   /* dominant  — fondo página (oscuro) */
    --color-bg-alt:          #32323C;   /* superficie elevada — cards, secciones alternas */
    --color-surface:         #1E1E25;   /* secondary — nav, hover, recesos  */
    --color-surface-hover:   #29292F;   /* secondary hover                 */
    --color-bg-deep:         #14141A;   /* bandas más oscuras — footer, section--dark */
    --color-border:          rgba(255,255,255,0.08);   /* bordes y separadores */

    /* ── Acento (naranja RESOLVED, varios tonos) ────────────────── */
    --color-accent:          #FF6A1A;   /* naranja principal               */
    --color-accent-hover:    #FF8A44;   /* hover del acento                */
    --color-accent-alt:      #FFA25C;   /* tono claro — números, detalles  */
    --color-accent-deep:     #E8500A;   /* tono profundo — hover, bordes   */
    --color-accent-bg:       rgba(255,106,26,0.14);   /* fondo suave para chips/labels sobre oscuro */

    /* ── Tipografía ───────────────────────────────────────────── */
    --color-text-primary:    #ECECF1;   /* titulares y cuerpo principal (gris claro) */
    --color-text-secondary:  #A8A8B8;   /* subtítulos y texto de apoyo (gris)  */
    --color-text-muted:      #6E6E7E;   /* metadata, placeholders          */
    --color-text-inverse:    #FFFFFF;   /* texto sobre fondos de acento    */

    /* ── Espaciado ────────────────────────────────────────────── */
    --space-xs:   4px;
    --space-sm:   8px;
    --space-md:  16px;
    --space-lg:  24px;
    --space-xl:  40px;
    --space-2xl: 64px;
    --space-3xl: 96px;
    --space-4xl: 128px;

    /* ── Tipografía: tamaños ──────────────────────────────────── */
    --text-xs:   0.75rem;    /*  12px */
    --text-sm:   0.875rem;   /*  14px */
    --text-base: 1rem;       /*  16px */
    --text-lg:   1.125rem;   /*  18px */
    --text-xl:   1.25rem;    /*  20px */
    --text-2xl:  1.5rem;     /*  24px */
    --text-3xl:  1.875rem;   /*  30px */
    --text-4xl:  2.25rem;    /*  36px */
    --text-5xl:  3rem;       /*  48px */
    --text-6xl:  3.75rem;    /*  60px */

    /* ── Tipografía: pesos ────────────────────────────────────── */
    --font-regular: 400;
    --font-medium:  500;
    --font-semibold: 600;
    --font-bold:    700;

    /* ── Radio de borde ───────────────────────────────────────── */
    --radius-sm:  4px;
    --radius-md:  8px;
    --radius-lg: 12px;
    --radius-xl: 20px;

    /* ── Sombras ──────────────────────────────────────────────── */
    --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.25);
    --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.35);
    --shadow-lg:  0 8px 32px rgba(0, 0, 0, 0.45);

    /* ── Layout ───────────────────────────────────────────────── */
    --container-max: 1200px;
    --container-md:  800px;
    --nav-height:    72px;

    /* ── Transiciones ─────────────────────────────────────────── */
    --transition-fast:   150ms ease;
    --transition-base:   250ms ease;
    --transition-slow:   400ms ease;
}