/* css/theme.css — TOKENS GLOBALES (sin estilos de componentes)
   ÚNICA FUENTE DE VERDAD para colores, spacing, tipografía, radios,
   sombras, motion, layout, escalas responsive y utilidades de encaje.
   Mantiene compatibilidad con variables existentes. */

:root{
  /* ===== Paleta base (existente) ===== */
  --bg:     #0b0b0b;   /* fondo principal */
  --fg:     #ffffff;   /* texto principal */
  --accent: #d81e1e;   /* acento/brand */

  /* ===== Alias semánticos (no duplican concepto) ===== */
  --color-bg:       var(--bg);
  --color-fg:       var(--fg);
  --color-accent:   var(--accent);

  /* Neutros y estados comunes */
  --color-surface:        #111213;  /* superficies elevadas suaves */
  --color-surface-2:      #1b1c1d;  /* superficies más marcadas */
  --color-neutral:        #7a7a7a;  /* gris medio para barras neutras */
  --color-neutral-weak:   #a0a0a0;  /* texto secundario */
  --color-ok:             #17c964;  /* éxito / “win” */
  --color-warn:           #ffcc66;  /* warning suave */
  --color-error:          #ea384d;  /* error / “loss” */

  /* Género (audiencia) */
  --color-male:    #2da9ff;
  --color-female:  #ff5aa5;

  /* ===== Tipografía ===== */
  /* 2 familias globales + compat con --font ya usado en el repo */
  --font-heading: "Anton", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body:    "Sora",  ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font:         var(--font-body); /* compat: mapea el token antiguo a body */

  /* Easing común */
  --ease-curve: cubic-bezier(.22,.61,.36,1);
  --ease-standard: var(--ease-curve);

  /* Escalas globales */
  --scale-type:  1.0;  /* multiplicador global tipografía */
  --scale-space: 1.0;  /* multiplicador global spacing */

  /* ===== Spacing semántico (base 8px) ===== */
  --spacing-unit: 8px;
  --spacing-2xs: calc(var(--spacing-unit) * 0.5);  /* 4px  */
  --spacing-xs:  calc(var(--spacing-unit) * 0.75); /* 6px  */
  --spacing-sm:  calc(var(--spacing-unit) * 1);    /* 8px  */
  --spacing-md:  calc(var(--spacing-unit) * 2);    /* 16px */
  --spacing-lg:  calc(var(--spacing-unit) * 3);    /* 24px */
  --spacing-xl:  calc(var(--spacing-unit) * 4);    /* 32px */
  --spacing-2xl: calc(var(--spacing-unit) * 6);    /* 48px */
  --spacing-3xl: calc(var(--spacing-unit) * 8);    /* 64px */

  /* ===== Radios ===== */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;

  /* ===== Sombras ===== */
  --shadow-1: 0 10px 24px rgba(0,0,0,.35);
  --shadow-2: 0 20px 50px rgba(0,0,0,.45);

  /* ===== Motion ===== */
  --duration-quick: 160ms;
  --duration-normal: 300ms;
  --duration-slow: 600ms;
  --stagger-1: 120ms;
  --stagger-2: 180ms;

  /* ===== Layout / Contenedores ===== */
  --container-max: 1600px;   /* ancho máx del canvas 16:9 */
  --slide-radius: 18px;      /* radio por defecto para el canvas */
  --slide-shadow: var(--shadow-2);

  /* ===== Componentes genéricos (barras/anillos) ===== */
  --bar-height: 22px;     /* alto por defecto de barras */
  --bar-radius: 10px;     /* esquinas redondeadas coherentes */
  --ring-thickness: 10px; /* grosor de anillos métricos */

  /* ===== Breakpoints de referencia ===== */
  --bp-sm: 640px;
  --bp-md: 960px;
  --bp-lg: 1280px;
  --bp-xl: 1600px;

  /* ===== Encaje tipográfico para headings (desktop) ===== */
  /* Ajusta estos si el nombre de portada no cabe en una línea */
  --heading-tighten:        -0.5px; /* tracking más cerrado en desktop */
  --heading-desktop-scale:   0.92;  /* reduce levemente tamaño efectivo */
  --name-max-width-desktop: 44ch;   /* límite opcional para nombres largos */

  /* ===== Aliases de compatibilidad ===== */
  --color-primary: var(--color-accent); /* alias rápido */
  --color-text:    var(--color-fg);
  --color-bg-2:    var(--color-surface);
}

/* ============================================================ */
/* Escalado responsive global: ajusta SOLO multiplicadores      */
/* ============================================================ */
@media (max-width: 1279.98px){
  :root{
    --scale-type:  0.98;
    --scale-space: 0.96;
    --bar-height:  20px;
    --ring-thickness: 9px;
  }
}
@media (max-width: 959.98px){
  :root{
    --scale-type:  0.95;
    --scale-space: 0.92;
    --bar-height:  18px;
    --ring-thickness: 8px;
  }
}
@media (max-width: 639.98px){
  :root{
    --scale-type:  0.92;
    --scale-space: 0.88;
    --bar-height:  16px;
    --ring-thickness: 7px;
  }
}

/* ============================================================ */
/* Preferencias de usuario: reduce motion                       */
/* ============================================================ */
@media (prefers-reduced-motion: reduce){
  :root{
    --duration-quick: 0ms;
    --duration-normal: 0ms;
    --duration-slow: 0ms;
    --stagger-1: 0ms;
    --stagger-2: 0ms;
  }
}