/* Kroovify specific - Visual style */

/* Manrope autoalojada: la CSP (font-src 'self', style-src 'self') no admite
   Google Fonts, y sería un tercero en la primera carga. Un único archivo
   variable (400–800), subconjunto latino, licencia OFL (assets/fonts/OFL.txt).
   El archivo no se versiona con ?v=: una fuente nueva estrena nombre, igual
   que las fotos. */
@font-face {
    font-family: "Manrope";
    src: url("../assets/fonts/manrope-var-latin.woff2") format("woff2");
    font-weight: 400 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Reserva con la anchura de Manrope: mientras llega la fuente (font-display:
   swap) el texto ocupa casi lo mismo y el cambio no desplaza el contenido. */
@font-face {
    font-family: "Manrope Fallback";
    src: local("Arial"), local("Liberation Sans"), local("Helvetica Neue");
    size-adjust: 104%;
}

:root {
    --font-family-base: "Manrope", "Manrope Fallback", var(--font-family-system);

    /* Violeta + azul (landing v3, 2026-10). Contraste medido con #fff:
       #9647e8 4.81:1 · #7c2fd6 6.49:1. El azul #009af4 es decorativo (3.03:1):
       nunca lleva texto encima. */
    --primary-color: #9647e8;
    --primary-dark: #7c2fd6;
    --primary-light: #c4a1ff;
    --secondary-color: #009af4;
    --accent-color: #009af4;
    /* Texto y bordes sobre la superficie: 6.49:1 sobre #fff, 6.21:1 sobre
       --bg-light y 5.63:1 sobre el tinte violeta de las tarjetas. */
    --primary-on-surface: #7c2fd6;
    --gradient: linear-gradient(135deg, #009af4 0%, #9647e8 100%);
    /* Relleno con texto blanco (badge del hero, núcleo del diagrama, botón del
       vídeo): #1668c9 da 5.44:1 y #8437dc 5.90:1 con #fff. */
    --gradient-fill: linear-gradient(135deg, #1668c9 0%, #8437dc 100%);

    /* Pie y banda de descarga. */
    --surface-inverse: #02132e;

    /* ── Tonos: tarjetas, insignias de icono e iconos del FAQ ─────────────
       Cada tono es un trío: fondo sólido, tinta sobre ese fondo y un tinte
       suave para superficies con texto normal encima.

       Fondo/tinta, contraste ≥ 4.5:1 medido en cada tema:
                  claro    oscuro
         blue     4.71     6.70
         coral    4.81     6.47
         violet   5.51     7.10
         pink     5.02     7.07
         green    4.87     6.74
         orange   4.91     5.67
         teal     5.08     6.23
         amber    8.39     7.68
         yellow  11.06     8.88
         cyan     7.44     5.97
       En oscuro los fondos se oscurecen: los tonos del modo claro deslumbraban
       sobre #0f172a.

       Tintes (`-soft`): el tono al 10% sobre blanco en claro y al 30% sobre
       #0f172a en oscuro. Con --text-medium encima dan entre 6.50 y 6.67:1 en
       claro y entre 9.32 y 10.22:1 en oscuro. Sólo los tienen los tonos que
       usan las tarjetas; el resto cae a --bg-light. */
    --tone-blue: #2f6fdf;    --tone-blue-ink: #ffffff;    --tone-blue-soft: #eaf1fc;
    --tone-coral: #cf3d33;   --tone-coral-ink: #ffffff;   --tone-coral-soft: #faeceb;
    --tone-violet: #8b3fd9;  --tone-violet-ink: #ffffff;  --tone-violet-soft: #f3ecfb;
    --tone-pink: #c7249f;    --tone-pink-ink: #ffffff;    --tone-pink-soft: #f9e9f5;
    --tone-green: #11824a;   --tone-green-ink: #ffffff;   --tone-green-soft: #e7f2ed;
    --tone-orange: #c24a0c;  --tone-orange-ink: #ffffff;  --tone-orange-soft: #f9ede7;
    --tone-teal: #0e7a83;    --tone-teal-ink: #ffffff;    --tone-teal-soft: #e7f2f3;
    --tone-amber: #fdb96a;   --tone-amber-ink: #4a1d05;
    --tone-yellow: #fde047;  --tone-yellow-ink: #422006;
    --tone-cyan: #9eeef7;    --tone-cyan-ink: #0b4a5e;
}

[data-theme="dark"] {
    --primary-on-surface: #c4a1ff;   /* 8.41:1 sobre #0f172a, 6.89:1 sobre #1e293b */
    --surface-inverse: #020617;

    --tone-blue: #1d4ed8;    --tone-blue-soft: #13285e;
    --tone-coral: #b91c1c;   --tone-coral-soft: #421826;
    --tone-violet: #6d28d9;  --tone-violet-soft: #2b1c5e;
    --tone-pink: #a3157f;    --tone-pink-soft: #3b1644;
    --tone-green: #15693b;   --tone-green-soft: #11302f;
    --tone-orange: #b4410b;  --tone-orange-soft: #402421;
    --tone-teal: #0f6b73;    --tone-teal-soft: #0f3040;
    --tone-amber: #f59e0b;   --tone-amber-ink: #3b1203;
    --tone-yellow: #eab308;  --tone-yellow-ink: #2e1604;
    --tone-cyan: #22b8cf;    --tone-cyan-ink: #062f3b;
}

/* Una clase de tono sirve a cualquier componente que lea --tone-bg/--tone-ink
   (.icon-badge) o --tone-soft (.media-card--tinted, .pillar-card): los tonos
   no se repiten por componente. */
.tone-blue   { --tone-bg: var(--tone-blue);   --tone-ink: var(--tone-blue-ink);   --tone-soft: var(--tone-blue-soft); }
.tone-coral  { --tone-bg: var(--tone-coral);  --tone-ink: var(--tone-coral-ink);  --tone-soft: var(--tone-coral-soft); }
.tone-violet { --tone-bg: var(--tone-violet); --tone-ink: var(--tone-violet-ink); --tone-soft: var(--tone-violet-soft); }
.tone-pink   { --tone-bg: var(--tone-pink);   --tone-ink: var(--tone-pink-ink);   --tone-soft: var(--tone-pink-soft); }
.tone-green  { --tone-bg: var(--tone-green);  --tone-ink: var(--tone-green-ink);  --tone-soft: var(--tone-green-soft); }
.tone-orange { --tone-bg: var(--tone-orange); --tone-ink: var(--tone-orange-ink); --tone-soft: var(--tone-orange-soft); }
.tone-teal   { --tone-bg: var(--tone-teal);   --tone-ink: var(--tone-teal-ink);   --tone-soft: var(--tone-teal-soft); }
.tone-amber  { --tone-bg: var(--tone-amber);  --tone-ink: var(--tone-amber-ink); }
.tone-yellow { --tone-bg: var(--tone-yellow); --tone-ink: var(--tone-yellow-ink); }
.tone-cyan   { --tone-bg: var(--tone-cyan);   --tone-ink: var(--tone-cyan-ink); }