/* ============================================================
   VIDREA — Sistema de tokens de diseño
   Todos los valores del sitio salen de aquí. No pongas colores
   ni tamaños "a mano" en otros archivos: usa estas variables.
   ============================================================ */

:root {
  /* ---------- Tipografía ---------- */
  --font-display: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system,
    "Helvetica Neue", Arial, sans-serif;
  --font-body: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Cascadia Code", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  /* Escala tipográfica fluida (min 360px -> max 1440px) */
  --fs-overline: clamp(0.688rem, 0.66rem + 0.14vw, 0.75rem);
  --fs-sm: clamp(0.813rem, 0.79rem + 0.11vw, 0.875rem);
  --fs-base: clamp(0.938rem, 0.9rem + 0.19vw, 1.063rem);
  --fs-lg: clamp(1.063rem, 0.99rem + 0.33vw, 1.25rem);
  --fs-xl: clamp(1.25rem, 1.1rem + 0.65vw, 1.625rem);
  --fs-2xl: clamp(1.5rem, 1.24rem + 1.14vw, 2.25rem);
  --fs-3xl: clamp(1.875rem, 1.4rem + 2.1vw, 3.25rem);
  --fs-hero: clamp(2.5rem, 1.42rem + 4.8vw, 5.5rem);

  --lh-tight: 1.04;
  --lh-snug: 1.22;
  --lh-normal: 1.55;
  --lh-loose: 1.7;

  --tracking-tight: -0.028em;
  --tracking-snug: -0.014em;
  --tracking-normal: 0em;
  --tracking-wide: 0.16em;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---------- Espaciado (base 4px) ---------- */
  --space-1: 0.25rem;   /*  4px */
  --space-2: 0.5rem;    /*  8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px */
  --space-6: 2rem;      /* 32px */
  --space-7: 2.5rem;    /* 40px */
  --space-8: 3rem;      /* 48px */
  --space-9: 4rem;      /* 64px */
  --space-10: 5rem;     /* 80px */
  --space-11: 6.5rem;   /* 104px */
  --space-12: 8rem;     /* 128px */

  /* Ritmo vertical de secciones y ancho de página */
  --section-y: clamp(3.5rem, 2rem + 6vw, 7.5rem);
  --gutter: clamp(1.125rem, 0.6rem + 2.4vw, 2.5rem);
  --maxw: 1200px;
  --maxw-prose: 62ch;

  /* ---------- Radios ---------- */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --radius-xl: 34px;
  --radius-pill: 999px;

  /* ---------- Desenfoque del cristal ---------- */
  --blur-sm: 10px;
  --blur-md: 18px;
  --blur-lg: 30px;
  --glass-saturate: 165%;

  /* ---------- Movimiento ---------- */
  --dur-fast: 140ms;
  --dur-base: 260ms;
  --dur-slow: 520ms;
  --dur-ambient: 18s;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ---------- Capas ---------- */
  --z-bg: 0;
  --z-content: 1;
  --z-header: 50;
  --z-overlay: 80;
  --z-skip: 100;
}

/* ============================================================
   TEMA CLARO  (por defecto, y con data-theme="claro")
   ============================================================ */
:root,
[data-theme="claro"] {
  color-scheme: light;

  /* Lienzo */
  --bg-canvas: #e9ecf8;
  --bg-deep: #dfe4f5;
  --mesh-1: rgba(122, 92, 255, 0.42);   /* violeta */
  --mesh-2: rgba(38, 190, 214, 0.38);   /* aguamarina */
  --mesh-3: rgba(255, 138, 178, 0.34);  /* rosa */
  --mesh-4: rgba(255, 214, 140, 0.30);  /* ámbar */
  /* Cada mancha se apaga hacia SU PROPIO color con alfa 0. Si se usa
     "transparent", el navegador interpola hacia negro transparente y el
     degradado sale sucio (se nota muchísimo en el tema oscuro). */
  --mesh-1-fin: rgba(122, 92, 255, 0);
  --mesh-2-fin: rgba(38, 190, 214, 0);
  --mesh-3-fin: rgba(255, 138, 178, 0);
  --mesh-4-fin: rgba(255, 214, 140, 0);
  /* Velo sólido bajo el cristal. En claro no hace falta. */
  --glass-veil: rgba(255, 255, 255, 0);

  /* Cristal: respaldo SÓLIDO + versión translúcida */
  --glass-solid: #f6f8ff;               /* se ve si no hay backdrop-filter */
  --glass-solid-strong: #ffffff;
  --glass-bg: rgba(255, 255, 255, 0.52);
  --glass-bg-strong: rgba(255, 255, 255, 0.72);
  --glass-bg-soft: rgba(255, 255, 255, 0.34);
  --glass-border: rgba(255, 255, 255, 0.85);
  --glass-edge: rgba(19, 24, 48, 0.10); /* filo exterior para separar del fondo */
  --glass-sheen: rgba(255, 255, 255, 0.9);
  --glass-tint: rgba(122, 92, 255, 0.06);
  /* Borde con contraste garantizado: se usa cuando el elemento puede caer
     sobre un panel claro, donde el borde blanco desaparecería */
  --border-strong: rgba(15, 19, 39, 0.22);

  /* Texto */
  --text-1: #0f1327;
  --text-2: #3b4166;
  --text-3: #5c628a;
  --text-inverse: #ffffff;

  /* Acentos */
  --accent: #5a3fe0;
  --accent-strong: #4429c9;
  --accent-contrast: #ffffff;
  --accent-soft: rgba(90, 63, 224, 0.12);
  --accent-2: #0e8ea3;
  --focus-ring: #2a1bb5;

  /* Sombras dobles: difusa exterior + contacto + luz interior */
  --shadow-glass:
    0 1px 1px rgba(15, 19, 39, 0.05),
    0 18px 40px -18px rgba(15, 19, 39, 0.30);
  --shadow-lift:
    0 2px 4px rgba(15, 19, 39, 0.06),
    0 34px 60px -24px rgba(15, 19, 39, 0.38);
  --shadow-inset:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(15, 19, 39, 0.05);
  --shadow-ambient: 0 40px 90px -40px rgba(64, 40, 180, 0.45);
}

/* ============================================================
   TEMA OSCURO  (automático por preferencia, o data-theme="oscuro")
   ============================================================ */
[data-theme="oscuro"] {
  color-scheme: dark;

  --bg-canvas: #070917;
  --bg-deep: #04050e;
  --mesh-1: rgba(120, 88, 255, 0.50);
  --mesh-2: rgba(28, 200, 226, 0.34);
  --mesh-3: rgba(255, 92, 158, 0.30);
  --mesh-4: rgba(255, 186, 96, 0.20);
  --mesh-1-fin: rgba(120, 88, 255, 0);
  --mesh-2-fin: rgba(28, 200, 226, 0);
  --mesh-3-fin: rgba(255, 92, 158, 0);
  --mesh-4-fin: rgba(255, 186, 96, 0);
  /* En oscuro SÍ hace falta: sin este velo, cada panel toma el color
     del trozo de fondo que le toca detrás y las tarjetas salen
     desiguales (unas azuladas, otras marrones). El velo las iguala y
     da el respaldo sólido que exige el sistema de diseño. */
  --glass-veil: rgba(10, 13, 28, 0.52);

  --glass-solid: #151a2e;
  --glass-solid-strong: #1b2138;
  --glass-bg: rgba(255, 255, 255, 0.07);
  --glass-bg-strong: rgba(255, 255, 255, 0.12);
  --glass-bg-soft: rgba(255, 255, 255, 0.045);
  --glass-border: rgba(255, 255, 255, 0.18);
  --glass-edge: rgba(0, 0, 0, 0.45);
  --glass-sheen: rgba(255, 255, 255, 0.26);
  --glass-tint: rgba(140, 110, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.32);

  --text-1: #f4f6ff;
  --text-2: #bcc3e0;
  --text-3: #a8b0d4;
  --text-inverse: #0b0e1c;

  --accent: #a794ff;
  --accent-strong: #c0b3ff;
  --accent-contrast: #14092f;
  --accent-soft: rgba(167, 148, 255, 0.16);
  --accent-2: #5fe3f0;
  --focus-ring: #cfc4ff;

  --shadow-glass:
    0 1px 1px rgba(0, 0, 0, 0.40),
    0 20px 44px -18px rgba(0, 0, 0, 0.72);
  --shadow-lift:
    0 2px 6px rgba(0, 0, 0, 0.45),
    0 40px 70px -26px rgba(0, 0, 0, 0.80);
  --shadow-inset:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 rgba(0, 0, 0, 0.30);
  --shadow-ambient: 0 40px 110px -40px rgba(120, 88, 255, 0.55);
}

/* Si el usuario no ha elegido tema, seguimos al sistema */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="claro"]) {
    color-scheme: dark;

    --bg-canvas: #070917;
    --bg-deep: #04050e;
    --mesh-1: rgba(120, 88, 255, 0.50);
    --mesh-2: rgba(28, 200, 226, 0.34);
    --mesh-3: rgba(255, 92, 158, 0.30);
    --mesh-4: rgba(255, 186, 96, 0.20);
    --mesh-1-fin: rgba(120, 88, 255, 0);
    --mesh-2-fin: rgba(28, 200, 226, 0);
    --mesh-3-fin: rgba(255, 92, 158, 0);
    --mesh-4-fin: rgba(255, 186, 96, 0);
    /* En oscuro SÍ hace falta: sin este velo, cada panel toma el color
       del trozo de fondo que le toca detrás y las tarjetas salen
       desiguales (unas azuladas, otras marrones). El velo las iguala y
       da el respaldo sólido que exige el sistema de diseño. */
    --glass-veil: rgba(10, 13, 28, 0.52);
  --mesh-1-fin: rgba(120, 88, 255, 0);
  --mesh-2-fin: rgba(28, 200, 226, 0);
  --mesh-3-fin: rgba(255, 92, 158, 0);
  --mesh-4-fin: rgba(255, 186, 96, 0);
  /* En oscuro SÍ hace falta: sin este velo, cada panel toma el color
     del trozo de fondo que le toca detrás y las tarjetas salen
     desiguales (unas azuladas, otras marrones). El velo las iguala y
     da el respaldo sólido que exige el sistema de diseño. */
  --glass-veil: rgba(10, 13, 28, 0.52);

    --glass-solid: #151a2e;
    --glass-solid-strong: #1b2138;
    --glass-bg: rgba(255, 255, 255, 0.07);
    --glass-bg-strong: rgba(255, 255, 255, 0.12);
    --glass-bg-soft: rgba(255, 255, 255, 0.045);
    --glass-border: rgba(255, 255, 255, 0.18);
    --glass-edge: rgba(0, 0, 0, 0.45);
    --glass-sheen: rgba(255, 255, 255, 0.26);
    --glass-tint: rgba(140, 110, 255, 0.10);
    --border-strong: rgba(255, 255, 255, 0.32);

    --text-1: #f4f6ff;
    --text-2: #bcc3e0;
    --text-3: #a8b0d4;
    --text-inverse: #0b0e1c;

    --accent: #a794ff;
    --accent-strong: #c0b3ff;
    --accent-contrast: #14092f;
    --accent-soft: rgba(167, 148, 255, 0.16);
    --accent-2: #5fe3f0;
    --focus-ring: #cfc4ff;

    --shadow-glass:
      0 1px 1px rgba(0, 0, 0, 0.40),
      0 20px 44px -18px rgba(0, 0, 0, 0.72);
    --shadow-lift:
      0 2px 6px rgba(0, 0, 0, 0.45),
      0 40px 70px -26px rgba(0, 0, 0, 0.80);
    --shadow-inset:
      inset 0 1px 0 rgba(255, 255, 255, 0.28),
      inset 0 -1px 0 rgba(0, 0, 0, 0.30);
    --shadow-ambient: 0 40px 110px -40px rgba(120, 88, 255, 0.55);
  }
}