/* ------------------------------------------------------------------
   bordalink.css — GENERADO por generar-tokens.py · NO EDITAR A MANO
   Fuente: 01-MARCA/ficha-marca-bordalink.json  (v0.2, 2026-08-06 06:20:32 CST jueves)
   Marca:  BordaLink · MARCA-BDL-0001

   Si un color esta mal, se corrige en la ficha y se regenera.
   Un valor escrito aqui a mano rompe M-05 (CDM-BDL-001) y con el la
   promesa de que el segundo taller no cuesta lo mismo que el primero.
   ------------------------------------------------------------------ */

:root {
  /* --- primarios (proporcion declarada 50 % / 30 % / 20 %) --- */
  --violeta:   #7B2CBF;   /* Violeta Enlace — El color de la marca. Superficies, bloques, el peso de la identidad */
  --cian:      #22C1E8;   /* Cian Puntada */
  --magenta:   #F72585;   /* Magenta Pulso */

  /* --- secundarios --- */
  --indigo:    #4436C8;
  --agua:      #3BE0C8;
  --orquidea:  #F17EED;
  --oro:       #D3F236;

  /* --- neutros: nunca negro puro ni blanco puro sin tintar --- */
  --tinta:     #0B0B12;
  --lino:      #FFFFFF;

  /* --- semantica de interfaz --- */
  --brand:          var(--violeta);
  --brand-contrast: var(--lino);
  --accion:         var(--cian);     /* lo que se toca y lo que informa */
  --acento:         var(--magenta);  /* el que enciende, en dosis cortas */

  --fondo:      var(--tinta);
  --superficie: color-mix(in oklab, var(--indigo) 9%,  var(--tinta));
  --superficie-2: color-mix(in oklab, var(--indigo) 15%, var(--tinta));
  --borde:      color-mix(in oklab, var(--orquidea) 18%, transparent);
  --borde-fuerte: color-mix(in oklab, var(--orquidea) 34%, transparent);

  --texto:      var(--lino);
  --texto-suave: color-mix(in oklab, var(--lino) 72%, var(--indigo));
  --texto-tenue: color-mix(in oklab, var(--lino) 52%, var(--indigo));

  /* --- estados (terciarios: el color acompana, NUNCA informa solo) ---
     Verde Remate y Lima Tensor comparten familia: la ficha lo declara como
     hueco y por eso cada estado lleva icono y palabra, no solo color. */
  --ok:     #27AD66;
  --atento: #D38819;
  --alto:   #ED736C;
  --info:   #7A92F4;
  --curso:  #4DAD1E;
  --pausa:  #8F99AC;

  /* --- degradados de la ficha (con su uso declarado) --- */
  --grad-enlace:   linear-gradient(135deg, #7B2CBF, #22C1E8);    /* la pieza principal */
  --grad-pulso:    linear-gradient(135deg, #7B2CBF, #F72585);     /* campana, lo que llama */
  --grad-puntada:  linear-gradient(90deg, #22C1E8, #F72585);   /* progreso, lineas finas */
  --grad-bastidor: linear-gradient(160deg, #0B0B12, #2A1247);  /* fondos amplios */
  --grad-taller:   linear-gradient(135deg, #3BE0C8, #4436C8);    /* lo operativo, maquinas */

  /* --- veladuras: tinen, no mezclan. Maximo DOS por pieza --- */
  --velo-pulso:   radial-gradient(circle at 20% 15%, #F725856B 0%, transparent 58%);
  --velo-puntada: radial-gradient(circle at 82% 78%, #22C1E860 0%, transparent 62%);
  --velo-oro:     radial-gradient(circle at 50% 108%, #D3F23638 0%, transparent 52%);

  /* --- tipografia declarada en la ficha --- */
  --f-titulo: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --f-cuerpo: "Inter", "Segoe UI", system-ui, sans-serif;
  --f-datos:  "JetBrains Mono", "Cascadia Mono", ui-monospace, monospace;

  /* --- escala fluida: sin breakpoints fijos --- */
  --t--1: clamp(.82rem, .78rem + .2vw, .9rem);
  --t-0:  clamp(1rem, .96rem + .2vw, 1.06rem);
  --t-1:  clamp(1.18rem, 1.1rem + .4vw, 1.4rem);
  --t-2:  clamp(1.5rem, 1.3rem + .9vw, 2.1rem);
  --t-3:  clamp(2rem, 1.6rem + 1.8vw, 3.1rem);

  --sp-1: .35rem;  --sp-2: .6rem;  --sp-3: 1rem;
  --sp-4: clamp(1.1rem, .9rem + .8vw, 1.8rem);
  --sp-5: clamp(1.8rem, 1.4rem + 1.6vw, 3rem);

  --r-1: 10px;  --r-2: 14px;  --r-3: 20px;  --r-full: 999px;
  --sombra: 0 10px 30px color-mix(in oklab, var(--tinta) 70%, transparent);

  /* grano: se nota si se busca, no se ve si se lee */
  --grano-op: 0.16;
}

/* El grano de la ficha, como textura reutilizable sobre cualquier degradado */
.grano::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: var(--grano-op); mix-blend-mode: overlay; border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}