/* ============================================================
   Onnix — Sistema de diseño: variables globales
   Ref. Especificaciones §9.1 (Paleta) y §9.3 (Bordes y superficies)

   NOTA (§34): Los colores de marca (--color-primary / --color-accent)
   son PROVISIONALES. Deben validarse contra el logotipo y el manual
   de marca oficial antes de la publicación. Los tonos oscuros de
   fondo/superficie sí provienen de la referencia de la especificación.
   ============================================================ */

:root {
    /* ---- Marca (PROVISIONAL — pendiente de manual de marca) ---- */
    --color-primary: #2f6bff;
    --color-primary-light: #5b8bff;
    --color-primary-dark: #1b4fd6;

    --color-accent: #22d3ee;
    --color-accent-soft: rgba(34, 211, 238, 0.14);

    /* ---- Fondos y superficies (referencia de la especificación) ---- */
    --color-background: #080b12;
    --color-background-soft: #101521;
    --color-surface: #151b28;
    --color-surface-hover: #1c2433;

    /* ---- Texto y bordes ---- */
    --color-text: #ffffff;
    --color-text-muted: #aeb7c6;
    --color-text-dim: #7f8aa0;
    --color-border: rgba(255, 255, 255, 0.10);
    --color-border-strong: rgba(255, 255, 255, 0.18);

    /* ---- Estados ---- */
    --color-success: #22c55e;
    --color-error: #ef4444;

    /* ---- Degradados de marca ---- */
    --gradient-brand: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
    --gradient-surface: linear-gradient(160deg, var(--color-background-soft) 0%, var(--color-background) 100%);
    --gradient-glow: radial-gradient(60% 60% at 50% 0%, rgba(47, 107, 255, 0.28) 0%, rgba(8, 11, 18, 0) 70%);

    /* ---- Tipografía (§9.2) ---- */
    --font-base: "Poppins", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    --font-heading: var(--font-base);
    --font-mono: ui-monospace, "Cascadia Code", Consolas, monospace;

    /* Escala fluida con clamp() (§9.2 / §19) */
    --fs-h1: clamp(2.4rem, 1.6rem + 3.6vw, 4.75rem);   /* 38 → 76 px */
    --fs-h2: clamp(1.9rem, 1.4rem + 2.2vw, 3.25rem);   /* 30 → 52 px */
    --fs-h3: clamp(1.35rem, 1.15rem + 0.9vw, 2rem);    /* 22 → 32 px */
    --fs-lead: clamp(1.05rem, 0.98rem + 0.4vw, 1.3125rem);
    --fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
    --fs-small: clamp(0.85rem, 0.82rem + 0.15vw, 0.9375rem);
    --fs-label: 0.8125rem;

    --lh-tight: 1.08;
    --lh-heading: 1.15;
    --lh-body: 1.65;

    /* ---- Radios (§9.3) ---- */
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 22px;
    --radius-pill: 999px;

    /* ---- Sombras ---- */
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 12px 30px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.45);
    --shadow-glow: 0 10px 40px rgba(47, 107, 255, 0.35);

    /* ---- Layout ---- */
    --container-max: 1200px;
    --container-wide: 1360px;
    --gutter: clamp(1.15rem, 0.8rem + 1.8vw, 2.5rem);
    --section-space: clamp(4rem, 3rem + 5vw, 7.5rem);

    /* ---- Movimiento (§9.3) ---- */
    --transition-fast: 180ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 350ms ease;

    /* ---- Alturas de encabezado (§10.6) ---- */
    --header-height: 84px;
    --header-height-scrolled: 66px;
    --z-header: 1000;
    --z-menu: 1100;
    --z-float: 900;
}