/*
  Marca de Jean Foulquier sobre Twenty v2.57.1 (capa B, docs/diseno-marca.md §3.2.2).

  SOLO variables --t-* de Twenty: ningún selector de componente (las clases de
  Twenty son hashes de build y cambian en cada versión). Twenty declara sus
  tokens en `@layer twenty-ui` sobre .light y .dark; esta hoja no tiene capa,
  así que gana sin subir la especificidad. Twenty lee los valores con
  getComputedStyle al montar: por eso nginx la inyecta como <link> bloqueante
  en el <head>, nunca con JS. Si esta hoja no carga, Twenty se ve como siempre.

  Paleta: web/src/estilos/tokens.css (niebla, hueso, hollín, ceniza, musgo).
  Acento musgo y no óxido: en el panel de Jean el óxido es el error.
  No se tocan espaciados, tamaños, radios ni el rojo de peligro.

  Contrastes AA: los comprueba scripts/marca-contraste.test.ts (pnpm test).
  Nombres de variables: los comprueba scripts/verificar-marca.ts en cada subida
  de versión de Twenty.
*/

/* El estilo inline de index.html pinta html/body con estas dos antes de React */
:root {
  --theme-light-background-secondary: #eae6dc;
  --theme-dark-background-secondary: #1c1a14;
}

.light {
  --t-font-family: 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;

  /* Fondos: hueso claro (donde se trabaja), hueso, y niebla para lo hundido */
  --t-background-primary: #f3f0e8;
  --t-background-secondary: #eae6dc;
  --t-background-tertiary: #e1ddd3;
  --t-background-quaternary: #d8d5ce;
  --t-background-transparent-primary: rgb(243 240 232 / 0.5);
  --t-background-transparent-secondary: rgb(243 240 232 / 0.4);
  --t-background-transparent-blue: rgb(70 80 63 / 0.1);
  --t-background-primary-inverted: #17150f;
  --t-background-primary-inverted-hover: #26231c;
  --t-background-inverted-primary: #17150f;

  /* Tinta: hollín y ceniza (nada de negro puro) */
  --t-font-color-primary: #17150f;
  --t-font-color-secondary: #3d3a33;
  --t-font-color-tertiary: #5f5c54;
  --t-font-color-light: #64615a;
  --t-font-color-extra-light: #b5b2aa;
  --t-font-color-inverted: #f3f0e8;
  --t-font-color-on-accent: #f3f0e8;

  --t-border-color-strong: #c8c4ba;
  --t-border-color-medium: #dad6cc;
  --t-border-color-light: #e3dfd5;
  --t-border-color-inverted: #17150f;
  --t-border-color-blue: #46503f;

  /* Acento: musgo #46503f y su escala sobre hueso claro (4 % a 62 %) */
  --t-accent-primary: #c3c3b9;
  --t-accent-secondary: #c3c3b9;
  --t-accent-tertiary: #dbdad0;
  --t-accent-quaternary: #e5e3da;
  --t-accent-accent3570: #888d7f;
  --t-accent-accent4060: #888d7f;
  --t-accent-accent1: #eceae1;
  --t-accent-accent2: #e5e3da;
  --t-accent-accent3: #dbdad0;
  --t-accent-accent4: #d0d0c6;
  --t-accent-accent5: #c3c3b9;
  --t-accent-accent6: #b5b6ab;
  --t-accent-accent7: #a0a397;
  --t-accent-accent8: #888d7f;
  --t-accent-accent9: #46503f;
  --t-accent-accent10: #3e4536;
  --t-accent-accent11: #46503f;
  --t-accent-accent12: #2f3227;

  /* El botón principal de Twenty usa --t-color-blue (Button.module.scss).
     Las etiquetas de SELECT «blue» usan --t-tag-*, así que no cambian */
  --t-color-blue: #46503f;
  --t-color-blue1: #eceae1;
  --t-color-blue2: #e5e3da;
  --t-color-blue3: #dbdad0;
  --t-color-blue4: #d0d0c6;
  --t-color-blue5: #c3c3b9;
  --t-color-blue6: #b5b6ab;
  --t-color-blue7: #a0a397;
  --t-color-blue8: #888d7f;
  --t-color-blue9: #46503f;
  --t-color-blue10: #3e4536;
  --t-color-blue11: #46503f;
  --t-color-blue12: #2f3227;

  /* Etiquetas del pipeline que en Twenty no llegan a 4,5:1 sobre su fondo
     (amber 4,33, grass 4,48, orange 3,99, jade 4,38, green 4,37): el mismo
     color con un 6-13 % de hollín */
  --t-tag-text-amber: #986001;
  --t-tag-text-grass: #40763f;
  --t-tag-text-orange: #ac4e02;
  --t-tag-text-jade: #257859;
  --t-tag-text-green: #2f784d;

  /* Grises cálidos: Twenty pinta el armazón de la app (menú, fondo) con la escala
     de grises (--t-gray-scale-*), no con los fondos. Misma escala, de hueso a hollín */
  --t-gray-scale-gray1: #f3f0e8;
  --t-gray-scale-gray2: #eeebe2;
  --t-gray-scale-gray3: #eae6dc;
  --t-gray-scale-gray4: #e1ddd3;
  --t-gray-scale-gray5: #dad6cc;
  --t-gray-scale-gray6: #c8c4ba;
  --t-gray-scale-gray7: #b5b2aa;
  --t-gray-scale-gray8: #a19d94;
  --t-gray-scale-gray9: #8a867d;
  --t-gray-scale-gray10: #75716a;
  --t-gray-scale-gray11: #5f5c54;
  --t-gray-scale-gray12: #26231c;
  --t-color-gray1: #f3f0e8;
  --t-color-gray2: #eeebe2;
  --t-color-gray3: #eae6dc;
  --t-color-gray4: #e1ddd3;
  --t-color-gray5: #dad6cc;
  --t-color-gray6: #c8c4ba;
  --t-color-gray7: #b5b2aa;
  --t-color-gray8: #a19d94;
  --t-color-gray9: #8a867d;
  --t-color-gray10: #75716a;
  --t-color-gray11: #5f5c54;
  --t-color-gray12: #26231c;
  --t-color-gray: #8a867d;
}

.dark {
  --t-font-family: 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;

  --t-background-primary: #17150f;
  --t-background-secondary: #1c1a14;
  --t-background-tertiary: #26231c;
  --t-background-quaternary: #302c24;
  --t-background-transparent-primary: rgb(23 21 15 / 0.5);
  --t-background-transparent-secondary: rgb(23 21 15 / 0.4);
  --t-background-transparent-blue: rgb(163 173 151 / 0.12);
  --t-background-primary-inverted: #eae6dc;
  --t-background-primary-inverted-hover: #d8d5ce;
  --t-background-inverted-primary: #eae6dc;

  --t-font-color-primary: #eae6dc;
  --t-font-color-secondary: #cfcbc1;
  --t-font-color-tertiary: #b5b2aa;
  --t-font-color-light: #8f8b82;
  --t-font-color-extra-light: #5f5c54;
  --t-font-color-inverted: #17150f;
  --t-font-color-on-accent: #ffffff;

  --t-border-color-strong: #3d3930;
  --t-border-color-medium: #302c24;
  --t-border-color-light: #26231c;
  --t-border-color-inverted: #eae6dc;
  --t-border-color-blue: #a3ad97;

  /* Acento. El botón sólido de Twenty lleva el texto en blanco fijo
     (Button.module.scss, variant solid), y --t-color-blue es a la vez su fondo
     y el color del texto de los botones de acento sin relleno. #6e7865 es el
     musgo que da ≥ 4,5:1 con el blanco y ≥ 3:1 sobre hollín; para leer como
     texto (enlaces, accent11) va el musgo claro #a3ad97 */
  --t-accent-primary: #34352c;
  --t-accent-secondary: #34352c;
  --t-accent-tertiary: #25241d;
  --t-accent-quaternary: #1f1e17;
  --t-accent-accent3570: #606456;
  --t-accent-accent4060: #606456;
  --t-accent-accent1: #1b1a13;
  --t-accent-accent2: #1f1e17;
  --t-accent-accent3: #25241d;
  --t-accent-accent4: #2c2c23;
  --t-accent-accent5: #34352c;
  --t-accent-accent6: #3e4035;
  --t-accent-accent7: #4c4f43;
  --t-accent-accent8: #606456;
  --t-accent-accent9: #6e7865;
  --t-accent-accent10: #646c5b;
  --t-accent-accent11: #a3ad97;
  --t-accent-accent12: #cecfc0;

  --t-color-blue: #6e7865;
  --t-color-blue1: #1b1a13;
  --t-color-blue2: #1f1e17;
  --t-color-blue3: #25241d;
  --t-color-blue4: #2c2c23;
  --t-color-blue5: #34352c;
  --t-color-blue6: #3e4035;
  --t-color-blue7: #4c4f43;
  --t-color-blue8: #606456;
  --t-color-blue9: #6e7865;
  --t-color-blue10: #646c5b;
  --t-color-blue11: #a3ad97;
  --t-color-blue12: #585f50;

  /* Grises cálidos, de hollín a hueso */
  --t-gray-scale-gray1: #17150f;
  --t-gray-scale-gray2: #1f1d17;
  --t-gray-scale-gray3: #1c1a14;
  --t-gray-scale-gray4: #22201a;
  --t-gray-scale-gray5: #26231c;
  --t-gray-scale-gray6: #45413a;
  --t-gray-scale-gray7: #4b473f;
  --t-gray-scale-gray8: #66625a;
  --t-gray-scale-gray9: #817d74;
  --t-gray-scale-gray10: #7b776e;
  --t-gray-scale-gray11: #b5b2aa;
  --t-gray-scale-gray12: #eae6dc;
  --t-color-gray1: #17150f;
  --t-color-gray2: #1f1d17;
  --t-color-gray3: #1c1a14;
  --t-color-gray4: #22201a;
  --t-color-gray5: #26231c;
  --t-color-gray6: #45413a;
  --t-color-gray7: #4b473f;
  --t-color-gray8: #66625a;
  --t-color-gray9: #817d74;
  --t-color-gray10: #7b776e;
  --t-color-gray11: #b5b2aa;
  --t-color-gray12: #eae6dc;
  --t-color-gray: #817d74;
}