/* buclea · tokens de marca
 * ---------------------------------------------------------------------------
 * Un solo vocabulario, en catalán, como la marca. Antes había cuatro:
 * castellano en la app de textos (--tinta --marca), inglés en Digitalització
 * (--ink --accent), catalán en full de càlcul (--teal --pissarra) y crema/menta
 * en la cantera. Aquí se define una vez; los módulos que aún no han migrado
 * reciben su puente en ui/pont/.
 *
 * Valores medidos sobre docs/marca/logo-buclea.svg y simbolo-buclea.svg.
 * Referencia: docs/marca/identidad.md · plan: docs/UI-GLOBAL.md
 *
 * Los tres temas se definen AQUÍ y solo aquí: claro (el :root pelado), oscuro
 * y alto contraste. Ninguna regla de componente vuelve a hablar de tema.
 */
@layer ui.tokens {
  :root {
    /* --- color de marca ------------------------------------------------- */
    --profund: #02604A;   /* marca, títulos de marca, hover de acción       */
    --verd: #057C5E;      /* ACTUAR: botones, enlaces, foco; estado ✓       */
    --menta: #36DCAC;     /* DÓNDE ESTÁS: progreso, «ara», detalles vivos   */
    --menta-clar: #D6F7EC;/* fondo suave de resalte                          */

    /* --- tinta y papel --------------------------------------------------- */
    --tinta: #14211C;     /* texto                                           */
    --pissarra: #5C6B65;  /* texto secundario, metadatos                     */
    /* TRES PLANOS, y tienen que distinguirse a simple vista. La primera
     * versión los puso a #F1F7F4 / #F6F8F7 / #FFFFFF: diez puntos entre el
     * fondo y la tarjeta, invisible en una pantalla de aula, y la pantalla
     * entera se leía como una sola extensión blanca que marea. */
    --fons: #E2ECE7;      /* el más hondo: la mesa sobre la que se apoya todo */
    --paper: #F2F7F4;     /* plano intermedio: lo anidado dentro de una tarjeta */
    --blanc: #FFFFFF;     /* la página de trabajo, y solo ella               */
    --linia: #D3E1DA;     /* reglas y bordes, un punto más presentes          */

    /* --- estados ---------------------------------------------------------- */
    --ocre: #C8841A;      /* AVISO: marcas, bordes, iconos. NO para texto    */
    --ocre-text: #96610F; /* el mismo aviso, para TEXTO sobre --ocre-clar    */
    --ocre-clar: #FBF1DE;
    --error: #C63D2F;     /* ERROR, siempre acompañado de texto              */
    --error-clar: #FBE9E6;

    /* --- degradado -------------------------------------------------------- */
    /* Solo en: logotipo, botón primario, barras de progreso, banda de
     * cabecera y baldosas de módulo. NUNCA en fondos de lectura.
     * El tramo va de #02604A a #0C8460 y no hasta la menta: sobre menta el
     * texto blanco se queda en 1,9:1 (hallazgo 13 de critica-pantallas.md).
     * El extremo claro estuvo un tiempo en #0E8F66, que da 4,09:1 con blanco
     * —suficiente para texto grande y NO para el de 13px que lleva la banda—;
     * #0C8460 da 4,68:1. La menta se reserva a progreso y chips con texto
     * oscuro. */
    --grad: linear-gradient(135deg, #02604A, #0C8460);
    --grad-prog: linear-gradient(90deg, #02604A, #36DCAC);

    /* --- color de módulo -------------------------------------------------- */
    /* Pestaña discreta, nunca tiñe botones. Cada módulo lo pisa en su hoja. */
    --mod: var(--verd);
    --mod-clar: var(--menta-clar);

    /* --- tipografía ------------------------------------------------------- */
    --font: 'Lexend', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

    /* --- forma ------------------------------------------------------------ */
    --radi-gran: 20px;
    --radi: 14px;
    --radi-petit: 10px;
    --radi-rodo: 999px;

    /* Sombras teñidas de verde, no grises: es lo que da el «volumen»
     * aprobado el 23-08-2026 sin ensuciar el papel. */
    --ombra-suau: 0 6px 18px -12px rgba(2, 96, 74, .30);
    --ombra: 0 12px 28px -20px rgba(2, 96, 74, .50);
    --ombra-alta: 0 16px 36px -22px rgba(2, 96, 74, .60);

    /* --- espacio y movimiento ---------------------------------------------- */
    --esp-1: 4px;  --esp-2: 8px;  --esp-3: 12px;
    --esp-4: 16px; --esp-5: 24px; --esp-6: 32px; --esp-7: 48px;
    --mov: 180ms cubic-bezier(.2, .7, .3, 1);

    color-scheme: light;
  }

  /* --- tema oscuro ------------------------------------------------------- */
  /* Se aplica con data-theme="dark" y también por preferencia del sistema,
   * salvo que el usuario haya elegido claro explícitamente. */
  :root[data-theme='dark'],
  :root[data-theme='fosc'] { color-scheme: dark; }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']):not([data-theme='clar']):not([data-theme='contrast']) {
      color-scheme: dark;
    }
  }

  /* Los valores oscuros se escriben dos veces —una por atributo y otra por
   * preferencia del sistema— porque CSS no deja factorizar dos condiciones
   * de origen distinto en un solo bloque sin perder la que gana. Si cambias
   * uno, cambia el otro. */
  :root[data-theme='dark'],
  :root[data-theme='fosc'] {
    --profund: #7FEACB;
    --verd: #3FD1A2;
    --menta: #36DCAC;
    --menta-clar: #10362C;
    --tinta: #E8F2EE;
    --pissarra: #9BB0A8;
    --paper: #101A16;
    --blanc: #17241F;
    --linia: #2A3B34;
    --fons: #0C1512;
    --ocre: #E0A94B;
    --ocre-text: #F0C97E;
    --ocre-clar: #33280F;
    --error: #F08272;
    --error-clar: #3A1A15;
    --grad: linear-gradient(135deg, #0B7A5C, #17A87C);
    --ombra-suau: 0 6px 18px -12px rgba(0, 0, 0, .55);
    --ombra: 0 12px 28px -20px rgba(0, 0, 0, .75);
    --ombra-alta: 0 16px 36px -22px rgba(0, 0, 0, .85);
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']):not([data-theme='clar']):not([data-theme='contrast']) {
      --profund: #7FEACB;
      --verd: #3FD1A2;
      --menta: #36DCAC;
      --menta-clar: #10362C;
      --tinta: #E8F2EE;
      --pissarra: #9BB0A8;
      --paper: #101A16;
      --blanc: #17241F;
      --linia: #2A3B34;
      --fons: #0C1512;
      --ocre: #E0A94B;
      --ocre-text: #F0C97E;
      --ocre-clar: #33280F;
      --error: #F08272;
      --error-clar: #3A1A15;
      --grad: linear-gradient(135deg, #0B7A5C, #17A87C);
      --ombra-suau: 0 6px 18px -12px rgba(0, 0, 0, .55);
      --ombra: 0 12px 28px -20px rgba(0, 0, 0, .75);
      --ombra-alta: 0 16px 36px -22px rgba(0, 0, 0, .85);
    }
  }

  /* --- alto contraste ----------------------------------------------------- */
  /* Sin degradados, sin sombras, líneas de 2px y tinta pura. Para pizarras
   * digitales con reflejo y para quien lo necesita. */
  :root[data-theme='contrast'] {
    --profund: #00311F;
    --verd: #00543C;
    --menta: #007A57;
    --menta-clar: #E4F6EF;
    --tinta: #000000;
    --pissarra: #303C37;
    --paper: #FFFFFF;
    --blanc: #FFFFFF;
    --linia: #000000;
    --fons: #FFFFFF;
    --ocre: #7A4A00;
    --ocre-text: #7A4A00;
    --ocre-clar: #FFF3DF;
    --error: #8A1408;
    --error-clar: #FFEAE6;
    --grad: none;
    --grad-prog: none;
    --ombra-suau: none;
    --ombra: none;
    --ombra-alta: none;
    color-scheme: light;
  }
}