/* taso-inv — tokens de diseño (Soft Glass (rediseno 2026-10-24)). Fuente: docs/DISENO.md §1.
   Formato fijo "--nombre: valor;" una por línea: tests/web/test_contrast.py lo lee. */

@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/space_grotesk.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains_mono.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --bg: #14130F;
  --surface: #1A1814;
  --card: #211F1A;
  --card-high: #2A2721;
  --accent: #F0C94A;       /* texto, bordes y foco: en oscuro el amarillo sirve tambien de tinta */
  --brand: #F0C94A;        /* relleno de marca (boton, barra destacada); el texto encima es --on-accent */
  --on-accent: #1F1A06;
  --text: #F1EEE4;
  --text2: #B1AB9C;
  --outline: #7A7566;
  --ok: #34D399;
  --bad: #F2555F;
  --warn: #F59E42;         /* atencion: naranja, nunca el amarillo de marca; siempre con icono y texto */
  --accent-soft: rgba(240, 201, 74, 0.14);
  --border: rgba(255, 255, 255, 0.08);
  --border-accent: rgba(240, 201, 74, 0.35);

  --font-ui: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --radius-card: 20px;
  --radius-field: 12px;
  --tap: 44px;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #EDEBE6;
  --surface: #F3F1EC;
  --card: #FBF9F4;
  --card-high: #FFFEFB;
  --accent: #6B5000;       /* ambar oscuro: el amarillo de marca no llega a 4,5:1 como texto sobre marfil */
  --brand: #F2C94C;
  --on-accent: #1F1D18;
  --text: #1F1D18;
  --text2: #5E5A50;
  --outline: #857F70;
  --ok: #13724F;
  --bad: #B52A39;
  --warn: #9A4300;
  --accent-soft: rgba(242, 201, 76, 0.22);
  --border: rgba(31, 29, 24, 0.10);
  --border-accent: rgba(107, 80, 0, 0.32);
}


/* Paleta «Clasica» (Quiet Glass v3, el teal de antes): se elige con <html data-paleta="clasica"> (ver Mi cuenta, js/lib/apariencia.js y web/index.html).
   Cada bloque define TODOS los tokens de color, asi que no depende del orden con la paleta Soft Glass de arriba. */
:root[data-paleta="clasica"] {
  color-scheme: dark;
  --bg: #0E1621;
  --surface: #121C28;
  --card: #16212F;
  --card-high: #1C2937;
  --accent: #3DD6C0;
  --brand: #3DD6C0;
  --on-accent: #06201C;
  --text: #E8EEF5;
  --text2: #9FB0C3;
  --outline: #5F7389;
  --ok: #34D399;
  --bad: #F2555F;
  --warn: #F5B84B;
  --accent-soft: rgba(61, 214, 192, 0.14);
  --border: rgba(255, 255, 255, 0.08);
  --border-accent: rgba(61, 214, 192, 0.35);
}

:root[data-paleta="clasica"][data-theme="light"] {
  color-scheme: light;
  --bg: #E6EEF1;
  --surface: #DDE7EB;
  --card: #EEF4F6;
  --card-high: #F4F8FA;
  --accent: #09665B;
  --brand: #09665B;
  --on-accent: #FFFFFF;
  --text: #1B2A33;
  --text2: #4F6470;
  --outline: #6E818C;
  --ok: #13724F;
  --bad: #B52A39;
  --warn: #8A5A00;
  --accent-soft: rgba(9, 102, 91, 0.10);
  --border: rgba(30, 48, 64, 0.09);
  --border-accent: rgba(9, 102, 91, 0.28);
}

/* Paleta "Oceano": azules apagados de #06141B a #CCD0CF (pedido de Ernesto). Acento = el gris claro de la propia paleta, sin colores ajenos.
   Los semanticos (ok/bad/warn) son los de siempre. El claro se deriva: la paleta pasa a ser tinta y los fondos son grises azulados claros. */
:root[data-paleta="oceano"] {
  color-scheme: dark;
  --bg: #06141B;
  --surface: #0B1A23;
  --card: #11212D;
  --card-high: #253745;
  --accent: #CCD0CF;
  --brand: #CCD0CF;
  --on-accent: #06141B;
  --text: #CCD0CF;
  --text2: #9BA8AB;
  --outline: #6B7F8E;
  --ok: #34D399;
  --bad: #F2555F;
  --warn: #F5B84B;
  --accent-soft: rgba(204, 208, 207, 0.12);
  --border: rgba(204, 208, 207, 0.10);
  --border-accent: rgba(204, 208, 207, 0.30);
}

:root[data-paleta="oceano"][data-theme="light"] {
  color-scheme: light;
  --bg: #D9DDDC;
  --surface: #CFD4D3;
  --card: #E7EAE9;
  --card-high: #F1F3F2;
  --accent: #253745;
  --brand: #253745;
  --on-accent: #FFFFFF;
  --text: #06141B;
  --text2: #34454F;
  --outline: #4A5C6A;
  --ok: #0C5F40;
  --bad: #A82434;
  --warn: #7F5200;
  --accent-soft: rgba(37, 55, 69, 0.10);
  --border: rgba(6, 20, 27, 0.12);
  --border-accent: rgba(37, 55, 69, 0.30);
}


/* Paletas anadidas el 2026-10-25 (pedido de Ernesto): Amber Walnut Morning, Calcite, Sapphire Ash Morning, Opaline, Lemon Granite Morning y Arctic Reflection.
   Los colores que dio Ernesto estan tal cual donde pasan los umbrales de contraste (fondos, botones, acentos oscuros); cuando un color de texto o de acento
   no llegaba a 4,5:1 se acerco al negro o al blanco lo minimo necesario (el boton conserva el color original). Fondos y superficies se derivaron de su paleta.
   Los semanticos (--ok, --bad, --warn) conservan su significado y tambien se ajustaron por contraste; --warn nunca es el color de marca. */
:root[data-paleta="amber"] {
  color-scheme: dark;
  --bg: #272220;
  --surface: #2E2825;
  --card: #362F2B;
  --card-high: #433B35;
  --accent: #CE9C7D;
  --brand: #CE9C7D;
  --on-accent: #1E1510;
  --text: #EBEFEE;
  --text2: #CCB499;
  --outline: #867668;
  --ok: #34D399;
  --bad: #F46B74;
  --warn: #F5C84B;
  --accent-soft: rgba(206, 156, 125, 0.14);
  --border: rgba(235, 239, 238, 0.1);
  --border-accent: rgba(206, 156, 125, 0.35);
}

:root[data-paleta="amber"][data-theme="light"] {
  color-scheme: light;
  --bg: #EBEFEE;
  --surface: #E0E4E2;
  --card: #F4F6F5;
  --card-high: #FBFCFB;
  --accent: #945535;
  --brand: #BB6C43;
  --on-accent: #1A110C;
  --text: #4A413C;
  --text2: #6A5C52;
  --outline: #8D8883;
  --ok: #13724F;
  --bad: #B52A39;
  --warn: #8A5A00;
  --accent-soft: rgba(187, 108, 67, 0.12);
  --border: rgba(74, 65, 60, 0.12);
  --border-accent: rgba(148, 85, 53, 0.3);
}

:root[data-paleta="calcite"] {
  color-scheme: dark;
  --bg: #202326;
  --surface: #272B2F;
  --card: #2F3438;
  --card-high: #3C4044;
  --accent: #FD8C5A;
  --brand: #FD8C5A;
  --on-accent: #1E1008;
  --text: #DDDCDB;
  --text2: #EDBF9B;
  --outline: #917966;
  --ok: #34D399;
  --bad: #F4727A;
  --warn: #F5C84B;
  --accent-soft: rgba(253, 140, 90, 0.14);
  --border: rgba(221, 220, 219, 0.1);
  --border-accent: rgba(253, 140, 90, 0.35);
}

:root[data-paleta="calcite"][data-theme="light"] {
  color-scheme: light;
  --bg: #DDDCDB;
  --surface: #D2D1CF;
  --card: #E9E8E7;
  --card-high: #F4F3F2;
  --accent: #8E4524;
  --brand: #FD7B41;
  --on-accent: #1E1008;
  --text: #3C4044;
  --text2: #555A5F;
  --outline: #7B7C7F;
  --ok: #116747;
  --bad: #AA2736;
  --warn: #7C5100;
  --accent-soft: rgba(253, 123, 65, 0.12);
  --border: rgba(60, 64, 68, 0.12);
  --border-accent: rgba(142, 69, 36, 0.3);
}

:root[data-paleta="sapphire"] {
  color-scheme: dark;
  --bg: #0F1C23;
  --surface: #14252E;
  --card: #1A2F3A;
  --card-high: #223B48;
  --accent: #E5AEA9;
  --brand: #E5AEA9;
  --on-accent: #1A0F0E;
  --text: #F5F5F5;
  --text2: #A6A9D0;
  --outline: #6F768C;
  --ok: #34D399;
  --bad: #F3636C;
  --warn: #F5B84B;
  --accent-soft: rgba(229, 174, 169, 0.14);
  --border: rgba(245, 245, 245, 0.1);
  --border-accent: rgba(229, 174, 169, 0.35);
}

:root[data-paleta="sapphire"][data-theme="light"] {
  color-scheme: light;
  --bg: #EEF0F0;
  --surface: #E3E6E6;
  --card: #F7F8F8;
  --card-high: #FFFFFF;
  --accent: #35627A;
  --brand: #35627A;
  --on-accent: #FFFFFF;
  --text: #17303C;
  --text2: #475A63;
  --outline: #808B8F;
  --ok: #13724F;
  --bad: #B52A39;
  --warn: #8A5A00;
  --accent-soft: rgba(53, 98, 122, 0.12);
  --border: rgba(23, 48, 60, 0.12);
  --border-accent: rgba(53, 98, 122, 0.3);
}

:root[data-paleta="opaline"] {
  color-scheme: dark;
  --bg: #141416;
  --surface: #1B1B1E;
  --card: #232326;
  --card-high: #2D2D31;
  --accent: #FF634A;
  --brand: #FF634A;
  --on-accent: #1E0A06;
  --text: #F4F4F6;
  --text2: #B9B9BE;
  --outline: #6F6F72;
  --ok: #34D399;
  --bad: #F2555F;
  --warn: #F5C84B;
  --accent-soft: rgba(255, 99, 74, 0.14);
  --border: rgba(244, 244, 246, 0.1);
  --border-accent: rgba(255, 99, 74, 0.35);
}

:root[data-paleta="opaline"][data-theme="light"] {
  color-scheme: light;
  --bg: #ECECEE;
  --surface: #E2E2E4;
  --card: #F4F4F6;
  --card-high: #FFFFFF;
  --accent: #AB4232;
  --brand: #FF634A;
  --on-accent: #1E0A06;
  --text: #1F2023;
  --text2: #54555A;
  --outline: #87888C;
  --ok: #13724F;
  --bad: #B52A39;
  --warn: #8A5A00;
  --accent-soft: rgba(255, 99, 74, 0.12);
  --border: rgba(31, 32, 35, 0.12);
  --border-accent: rgba(171, 66, 50, 0.3);
}

:root[data-paleta="lemon"] {
  color-scheme: dark;
  --bg: #10202A;
  --surface: #162A36;
  --card: #1D3340;
  --card-high: #2C4C5C;
  --accent: #F3E308;
  --brand: #F3E308;
  --on-accent: #121E26;
  --text: #EEF1F2;
  --text2: #B8BFC1;
  --outline: #707B81;
  --ok: #34D399;
  --bad: #F46B74;
  --warn: #F6A44D;
  --accent-soft: rgba(243, 227, 8, 0.14);
  --border: rgba(238, 241, 242, 0.1);
  --border-accent: rgba(243, 227, 8, 0.35);
}

:root[data-paleta="lemon"][data-theme="light"] {
  color-scheme: light;
  --bg: #E8ECED;
  --surface: #DCE1E3;
  --card: #F1F4F5;
  --card-high: #FAFBFB;
  --accent: #2C4C5C;
  --brand: #F3E308;
  --on-accent: #1B2F3A;
  --text: #1B2F3A;
  --text2: #40596A;
  --outline: #7B8891;
  --ok: #13714E;
  --bad: #B52A39;
  --warn: #9A4300;
  --accent-soft: rgba(243, 227, 8, 0.12);
  --border: rgba(27, 47, 58, 0.12);
  --border-accent: rgba(44, 76, 92, 0.3);
}

:root[data-paleta="arctic"] {
  color-scheme: dark;
  --bg: #111D26;
  --surface: #172732;
  --card: #1D3140;
  --card-high: #243C4C;
  --accent: #7FA8C2;
  --brand: #7FA8C2;
  --on-accent: #0B1820;
  --text: #F4FCFB;
  --text2: #ACBCBF;
  --outline: #6C7A7F;
  --ok: #34D399;
  --bad: #F46972;
  --warn: #F5B84B;
  --accent-soft: rgba(127, 168, 194, 0.14);
  --border: rgba(244, 252, 251, 0.1);
  --border-accent: rgba(127, 168, 194, 0.35);
}

:root[data-paleta="arctic"][data-theme="light"] {
  color-scheme: light;
  --bg: #E6EFEF;
  --surface: #DAE5E6;
  --card: #F4FCFB;
  --card-high: #FFFFFF;
  --accent: #3F6985;
  --brand: #5289AD;
  --on-accent: #0E1B24;
  --text: #243C4C;
  --text2: #466070;
  --outline: #7C8B93;
  --ok: #13724F;
  --bad: #B52A39;
  --warn: #8A5A00;
  --accent-soft: rgba(82, 137, 173, 0.12);
  --border: rgba(36, 60, 76, 0.12);
  --border-accent: rgba(63, 105, 133, 0.3);
}