/* Karate Live - tokens de marca (MARCA-01). Solo variables; no se aplican aun a la app.
   Sin fuentes ni recursos remotos. Contrastes WCAG calculados en docs/MARCA.md seccion 3.
   Uso: <link rel="stylesheet" href="assets/marca/tokens.css">. El tema claro es el predeterminado;
   el oscuro se activa con prefers-color-scheme o con [data-tema="oscuro"] (y [data-tema="claro"] lo fuerza).
   Las superficies "escena" (.escena, hero, banda marcador) son oscuras en ambos temas. */

:root {
  color-scheme: light dark;

  /* ---- Identidad (no cambian con el tema) ---- */
  --marino-950: #070920;      /* sombra profunda del degradado de foto */
  --marino-900: #0B0E28;      /* AZUL MARINO DE MARCA: barra, hero, bandas, escena */
  --marino-800: #141A44;      /* superficie elevada sobre marino */
  --marino-700: #1F2A63;      /* borde/hover sobre marino */
  --marino-500: #4A5072;      /* texto secundario sobre claro */
  --pista:      #0B0E14;      /* fondo del marcador y la mesa (reglamentario, no se toca) */

  /* Lados de competicion (reglamentarios: AKA rojo, AO azul). Solo significan "lado" en mesa, marcador y llaves */
  --aka:        #A80F1C;      /* relleno y texto sobre claro */
  --aka-vivo:   #FF6B72;      /* sobre marino/oscuro */
  --ao:         #1148B0;
  --ao-vivo:    #6FA3FF;

  /* Cifras y tiempo (reloj, plazos, en directo). Nunca como texto sobre claro */
  --vivo:       #FFD200;      /* igual al reloj del marcador */
  --sobre-vivo: #0B0E28;      /* texto sobre relleno amarillo (13:1) */

  /* Accion (CTA comercial). No se usa dentro de mesa, marcador ni llaves */
  --accion:        #C81426;
  --accion-hover:  #A80F1C;
  --sobre-accion:  #FFFFFF;   /* 5.9:1 */

  /* Tatami: fondo de las ilustraciones existentes (PNG) */
  --tatami:        #7B9FD1;
  --tatami-suave:  #E9F0FA;

  /* ---- Tipografia (solo sistema) ---- */
  --fuente-marca: "Bahnschrift", "DIN Alternate", "DIN Condensed", "Avenir Next Condensed", "Roboto Condensed", "Arial Narrow", "Segoe UI", system-ui, sans-serif;
  --fuente-texto: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --fuente-numeros: var(--fuente-marca);
  --ancho-marca: 87.5%;       /* font-stretch para Bahnschrift variable */

  --t-hero:      clamp(2.75rem, 6.4vw + .5rem, 6rem);
  --t-h1:        clamp(2.25rem, 4.2vw + .5rem, 4rem);
  --t-h2:        clamp(1.75rem, 2.8vw + .5rem, 2.75rem);
  --t-h3:        clamp(1.25rem, 1.2vw + .9rem, 1.625rem);
  --t-lead:      clamp(1.125rem, 1vw + .8rem, 1.375rem);
  --t-cuerpo:    1.0625rem;
  --t-pequeno:   .875rem;
  --t-rotulo:    .75rem;
  --t-cifra:     clamp(2.5rem, 5vw, 4.5rem);

  /* ---- Espacio, forma, movimiento ---- */
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --e-6: 32px; --e-7: 48px; --e-8: 64px; --e-9: 96px; --e-10: 128px;
  --r-ficha: 8px; --r-bloque: 12px; --r-tarjeta: 20px; --r-pildora: 980px;
  --contenedor: 1200px;
  --corte: 6deg;              /* unico corte diagonal de marca */
  --ease-salida: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-mov: cubic-bezier(0.77, 0, 0.175, 1);
  --d-pulsar: 140ms; --d-menu: 200ms; --d-entrada: 320ms;

  /* ---- Degradados de foto (referencia: portada oscura con azul marino) ---- */
  --velo-hero: linear-gradient(to top, rgba(11,14,40,.9) 0%, rgba(11,14,40,0) 48%), linear-gradient(to right, rgba(11,14,40,.94) 0%, rgba(11,14,40,.84) 42%, rgba(11,14,40,.3) 78%, rgba(11,14,40,.08) 100%);
  --velo-hero-movil: linear-gradient(to top, rgba(11,14,40,.95) 0%, rgba(11,14,40,.75) 45%, rgba(11,14,40,.25) 100%);
  --velo-cartel: linear-gradient(to top, rgba(7,9,32,.92) 0%, rgba(7,9,32,.4) 55%, rgba(7,9,32,0) 100%);

  /* ---- Tema claro (por defecto) ---- */
  --fondo:        #F6F7FB;
  --superficie:   #FFFFFF;
  --superficie-2: #EDEFF6;
  --texto:        #0B0E28;    /* 17.7:1 */
  --texto-2:      #4A5072;    /* 7.3:1 */
  --linea:        #D9DCE8;
  --linea-fuerte: #767DA0;
  --enlace:       #1148B0;    /* 7.6:1 */
  --foco:         #1148B0;
  --lado-aka:     var(--aka);
  --lado-ao:      var(--ao);
  --ok:      #1B6B3F;  --ok-fondo:      #E3F3EA;
  --aviso:   #8A5A00;  --aviso-fondo:   #FFF1D1;
  --error:   #B3261E;  --error-fondo:   #FDE8E6;
  --info:    #0B3F9E;  --info-fondo:    #E5EDFB;
  --sombra-1: 0 1px 2px rgba(11,14,40,.06), 0 8px 24px rgba(11,14,40,.08);
  --sombra-2: 0 2px 4px rgba(11,14,40,.08), 0 18px 48px rgba(11,14,40,.16);

  /* ---- Escena: superficies siempre oscuras (barra, hero, banda en directo, marcador) ---- */
  --escena-fondo:   var(--marino-900);
  --escena-card:    var(--marino-800);
  --escena-linea:   rgba(255,255,255,.14);
  --escena-texto:   #F5F7FA;  /* 17.7:1 */
  --escena-texto-2: #A9B0CC;  /* 8.8:1 */
  --escena-foco:    #FFD200;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fondo:        #0B0E28;
    --superficie:   #141A44;
    --superficie-2: #1B2250;
    --texto:        #F5F7FA;  /* 17.7:1 */
    --texto-2:      #A9B0CC;  /* 8.8:1 */
    --linea:        #2A3158;
    --linea-fuerte: #6A7299;
    --enlace:       #6FA3FF;  /* 7.6:1 */
    --foco:         #FFD200;
    --lado-aka:     var(--aka-vivo);
    --lado-ao:      var(--ao-vivo);
    --ok:      #4ADE80;  --ok-fondo:      #0F2E22;
    --aviso:   #FFC83D;  --aviso-fondo:   #33280A;
    --error:   #FF7A80;  --error-fondo:   #3A1519;
    --info:    #8DB6FF;  --info-fondo:    #14264F;
    --tatami-suave: #16233A;
    --sombra-1: 0 1px 0 rgba(255,255,255,.04), 0 8px 24px rgba(0,0,0,.5);
    --sombra-2: 0 1px 0 rgba(255,255,255,.05), 0 18px 48px rgba(0,0,0,.6);
  }
}

:root[data-tema="oscuro"] {
  --fondo: #0B0E28; --superficie: #141A44; --superficie-2: #1B2250;
  --texto: #F5F7FA; --texto-2: #A9B0CC; --linea: #2A3158; --linea-fuerte: #6A7299;
  --enlace: #6FA3FF; --foco: #FFD200; --lado-aka: var(--aka-vivo); --lado-ao: var(--ao-vivo);
  --ok: #4ADE80; --ok-fondo: #0F2E22; --aviso: #FFC83D; --aviso-fondo: #33280A;
  --error: #FF7A80; --error-fondo: #3A1519; --info: #8DB6FF; --info-fondo: #14264F;
  --tatami-suave: #16233A;
  --sombra-1: 0 1px 0 rgba(255,255,255,.04), 0 8px 24px rgba(0,0,0,.5);
  --sombra-2: 0 1px 0 rgba(255,255,255,.05), 0 18px 48px rgba(0,0,0,.6);
}

/* ---- Utilidades de marca (opcionales, sin aplicar) ---- */
.k-titular { font-family: var(--fuente-marca); font-stretch: var(--ancho-marca); font-weight: 700; text-transform: uppercase; letter-spacing: .005em; line-height: .98; }
.k-cifra   { font-family: var(--fuente-numeros); font-stretch: var(--ancho-marca); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.k-rotulo  { font: 600 var(--t-rotulo)/1.2 var(--fuente-texto); letter-spacing: .1em; text-transform: uppercase; }
.k-escena  { background: var(--escena-fondo); color: var(--escena-texto); }
.k-tatami  { background-color: var(--marino-900); background-image: url("patron-tatami.svg"); background-size: 64px 64px; }
.k-franja  { display: block; height: 6px; background: linear-gradient(100deg, var(--aka) 0 50%, var(--ao) 50% 100%); }
.k-corte   { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3.5vw), 0 100%); } /* corte de 6 grados aprox. */
.k-boton-accion { background: var(--accion); color: var(--sobre-accion); }
.k-boton-accion:hover { background: var(--accion-hover); }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { :root { --d-pulsar: 1ms; --d-menu: 1ms; --d-entrada: 1ms; } }