/* ==========================================================================
   Demon Witch Arts — Design tokens
   Fuente única de verdad para color, tipografía, espaciado y movimiento.
   Documentación: docs/design-system.md
   ========================================================================== */

/* ---------- Fuentes ---------- */
@font-face {
  font-family: "Caviar Dreams";
  src: url("../fonts/CaviarDreams-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Caviar Dreams";
  src: url("../fonts/CaviarDreams-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Caviar Dreams";
  src: url("../fonts/CaviarDreams-Italic.ttf") format("truetype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Caviar Dreams";
  src: url("../fonts/CaviarDreams-BoldItalic.ttf") format("truetype");
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Sulphur Point";
  src: url("../fonts/SulphurPoint-Light.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Sulphur Point";
  src: url("../fonts/SulphurPoint-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Sulphur Point";
  src: url("../fonts/SulphurPoint-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* ---------- Paleta base (extraída de la bruja pixel-art + logo) ---------- */
  --c-night-950: #05041a;   /* cielo más profundo */
  --c-night-900: #0b0a2a;   /* fondo base */
  --c-night-800: #15123d;   /* superficies */
  --c-night-700: #221a55;   /* superficies elevadas */
  --c-ink:       #261d2e;   /* oscuro del sombrero (logo) */

  --c-violet-600: #6e36a5;  /* morado del logo */
  --c-violet-500: #8a4fd0;
  --c-violet-300: #c9a7ff;  /* lavanda */

  --c-magenta-500: #e0559f; /* nubes rosas del horizonte */
  --c-magenta-300: #ff9ad0;

  --c-cyan-600: #2a6596;    /* azul profundo del logo */
  --c-cyan-500: #42a7c3;    /* cian del logo */
  --c-cyan-300: #6acfe4;    /* brillo cian del logo */
  --c-crystal:  #7ff3ff;    /* cristales del sombrero */

  --c-toxic-400: #3dff8a;   /* chispas verdes (acento puntual) */
  --c-ember-400: #ff3b6b;   /* chispas rojas (acento puntual) */
  --c-gold-300:  #ffd98a;   /* luz cálida del suelo */

  /* ---------- Roles semánticos ---------- */
  --bg:            var(--c-night-900);
  --bg-deep:       var(--c-night-950);
  --surface:       color-mix(in srgb, var(--c-night-800) 72%, transparent);
  --surface-strong:color-mix(in srgb, var(--c-night-700) 85%, transparent);
  --border:        color-mix(in srgb, var(--c-violet-300) 22%, transparent);
  --border-strong: color-mix(in srgb, var(--c-cyan-300) 55%, transparent);

  --text:          #f1ecff;
  --text-muted:    #b9b1d9;
  --text-dim:      #8a82ad;

  --accent:        var(--c-cyan-300);
  --accent-2:      var(--c-magenta-500);
  --accent-3:      var(--c-violet-500);

  /* Colores por sección / poción */
  --potion-games:  var(--c-magenta-500);
  --potion-apps:   var(--c-cyan-300);
  --potion-addons: var(--c-toxic-400);

  /* ---------- Gradientes ---------- */
  /* Cielo fijo al viewport: solo tonos nocturnos */
  --sky-gradient: linear-gradient(
    180deg,
    var(--c-night-950) 0%,
    var(--c-night-900) 45%,
    #1d1450 100%
  );
  /* Resplandor del horizonte: anclado al final de la página (footer), no al viewport */
  --horizon-glow:
    radial-gradient(60% 55% at 28% 100%, color-mix(in srgb, var(--c-magenta-500) 60%, transparent), transparent 75%),
    radial-gradient(50% 50% at 76% 100%, color-mix(in srgb, var(--c-violet-500) 55%, transparent), transparent 75%),
    linear-gradient(180deg, transparent 0%, color-mix(in srgb, #3a1a5e 60%, transparent) 55%, #6a2470 100%);
  --brand-gradient: linear-gradient(90deg, var(--c-cyan-300), var(--c-violet-300) 50%, var(--c-magenta-300));

  /* ---------- Tipografía ----------
     REGLA: --font-display (Caviar Dreams) = SOLO títulos: h1–h3, wordmark, "ARTS",
            labels de planetas, títulos destacados, firma.
            --font-body (Sulphur Point) = TODO el texto: párrafos, nav, botones,
            eyebrows, etiquetas, fechas, formularios. */
  --font-display: "Caviar Dreams", "Sulphur Point", system-ui, sans-serif;
  --font-body:    "Sulphur Point", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-xs:   0.8125rem;
  --fs-sm:   0.9375rem;
  --fs-md:   1.0625rem;
  --fs-lg:   1.25rem;
  --fs-xl:   clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --fs-2xl:  clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  --fs-hero: clamp(2.75rem, 1.5rem + 6vw, 6.5rem);

  --tracking-wide:  0.18em;
  --tracking-wider: 0.32em;
  /* Sulphur Point en MAYÚSCULAS queda ~0.09em alto dentro de su caja (ascendente 0.79, descendente 0.21,
     altura de mayúscula 0.672). Sumar --cap-fix al padding superior de cápsulas y botones lo centra. */
  --cap-fix: 0.092em;

  /* ---------- Espaciado / layout ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 7rem;

  --container: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
  --nav-h: 72px;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* ---------- Ornamentos de línea (assets/img/ui/*.svg, aplicados con mask) ---------- */
  --line-ui:        color-mix(in srgb, var(--c-violet-300) 45%, transparent);
  --line-ui-strong: color-mix(in srgb, var(--c-cyan-300) 85%, transparent);

  /* ---------- Sombras / brillos ---------- */
  --glow-cyan:    0 0 24px color-mix(in srgb, var(--c-cyan-300) 55%, transparent);
  --glow-magenta: 0 0 28px color-mix(in srgb, var(--c-magenta-500) 55%, transparent);
  --glow-violet:  0 0 32px color-mix(in srgb, var(--c-violet-500) 50%, transparent);
  --shadow-card:  0 18px 40px -18px rgba(0, 0, 0, 0.7);

  /* ---------- Movimiento ---------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-magic:  cubic-bezier(0.5, -0.3, 0.3, 1.4);
  --dur-fast:    160ms;
  --dur-base:    320ms;
  --dur-slow:    700ms;

  color-scheme: dark;
}