/* ============================================================
   CreateLab — tokens.css
   Variables CSS globales: paleta Xestio, sombras, radios, transiciones

   Fuente de la paleta: docs/marca/brand-manifest.json, el MISMO fichero que
   14_XESTIO y 03_CODELAB. De ahi lo saca scripts/marca/generar-tokens.py a
   css/xestio-tokens.css, que se carga ANTES que esta hoja. Aqui no hay ni un
   hex de marca escrito a mano: los primitivos son var(--xestio-*), y
   tests/test_marca_xestio.py falla si alguien los edita o los desvia del
   manifiesto. En la primera pasada si estaban copiados a mano, y copiar es
   como el acento de FocusLab acabo con cuatro valores distintos en cinco
   documentos.

   Hasta el 09/09/2026 esto era la paleta Gesttation: teal #0E4D57 y coral
   #ff5757. La aplicacion se mudo al VPS el 08/09 y paso a llamarse CreateLab,
   pero los colores se quedaron.

   El metodo es el mismo que usa xestio-intranet.css en 14_XESTIO: NO se
   inventa un vocabulario nuevo de variables. Los papeles ya estaban nombrados
   —--color-primary, --color-accent, --color-surface...— y lo unico que cambia
   es su contenido. Con eso cambian a la vez todos los componentes que los
   usan, sin tocar un solo selector.
   ============================================================ */

:root {
  /* ════════════════════════════════════════
     PALETA XESTIO — IDENTIDAD
     ════════════════════════════════════════ */

  /* Primitivas de marca. NO se retocan y NO se escriben aqui: son alias de
     los tokens generados en xestio-tokens.css desde el manifiesto. Los tonos
     hondo/claro/tenue si son literales, porque son derivaciones de esta
     aplicacion y el manifiesto no los define. */
  --x-petroleo:       var(--xestio-petroleum);
  --x-petroleo-hondo: #0A2C2D;
  --x-petroleo-claro: #16504F;
  --x-turquesa:       var(--xestio-turquoise);
  --x-turquesa-hondo: #0D9488;
  --x-turquesa-tenue: rgba(20, 184, 166, 0.14);
  --x-naranja:        var(--xestio-orange);
  --x-crema:          var(--xestio-cream);
  --x-menta:          var(--xestio-mint);

  /* El acento propio de CreateLab dentro de Xestio Labs. Es el color que
     identifica a ESTE laboratorio frente a CodeLab (--codelab-accent),
     FocusLab (--focuslab-accent) y BreakLab (--breaklab-accent). */
  --x-createlab:       var(--createlab-accent);
  --x-createlab-hondo: #BE123C;
  --x-createlab-tenue: rgba(225, 29, 72, 0.12);

  /* La tinta profunda del acento, la que cierra --gradient-brand-dark. Es el
     rosa a la sombra: sirve donde #E11D48 se queda corto de contraste, como el
     hover de un rotulo sobre blanco. */
  --x-createlab-tinta: #8E1236;

  /* El negro azulado del heroe. No es un gris: lleva el verde del petroleo
     dentro, que es lo que hace que los degradados de encima no se vean
     sucios. */
  --x-noche: #05100F;

  /* Los mismos colores en canales sueltos, para las transparencias.
     Existen porque rgba() no admite un hex dentro de una var(), y sin esto
     cada velo, cada sombra y cada foco vuelve a ser un numero escrito a mano:
     asi es como esta hoja cambio de paleta el 09/09/2026 y la aplicacion
     siguio pintando el teal de Gesttation en 68 sitios. */
  --x-petroleo-rgb:        15, 61, 62;
  --x-petroleo-hondo-rgb:  10, 44, 45;
  --x-turquesa-rgb:        20, 184, 166;
  --x-turquesa-hondo-rgb:  13, 148, 136;
  --x-createlab-rgb:       225, 29, 72;
  --color-danger-rgb:      192, 54, 43;

  /* Colores primarios */
  --color-primary: var(--x-petroleo);
  --color-primary-hover: var(--x-petroleo-hondo);
  --color-primary-300: #5FD3C4;

  /* Colores de accion.

     El CTA es TURQUESA, no el acento rosa de CreateLab, y es deliberado: en
     la norma de marca el color reservado deja de ser el boton por defecto
     justamente para que signifique algo cuando aparece. Si cada boton fuera
     rosa, el rosa no distinguiria nada. Ademas el turquesa es la accion en
     todo el ecosistema, asi que un boton se comporta igual aqui que en la
     intranet. */
  --color-accent: var(--x-turquesa);
  --color-accent-700: var(--x-turquesa-hondo);
  --color-accent-hover: var(--x-turquesa-hondo);

  /* El acento de laboratorio, para lo que identifica a CreateLab: el marcador
     de marca, los realces del editor, los iconos propios. Nunca como fondo de
     texto pequeno. */
  --color-createlab: var(--x-createlab);
  --color-createlab-hover: var(--x-createlab-hondo);

  /* Colores de superficie */
  --color-bg: #F4F7F6;             /* Fondo principal, el mismo de la intranet */
  --color-surface: #FFFFFF;        /* Superficies y tarjetas */
  --color-surface-alt: var(--x-menta);  /* Menta: fondos y divisores */
  --color-crema: var(--x-crema);   /* Papel calido, para zonas de lectura */

  /* Los dos blancos que no son blancos. Antes eran seis tintes distintos
     —#fcfeff, #fafcfe, #f8fbfd, #f7fbfd, #f8fafc, #f9f9f9— y todos tiraban a
     AZUL, que es lo que pedia el cian de Gesttation. Bajo una paleta verde un
     blanco azulado se ve frio y desemparejado, asi que llevan el verde del
     petroleo dentro, como --gradient-surface, que ya lo hacia bien. */
  --color-surface-2: #F6FAF9;   /* Superficie apenas levantada del blanco */
  --color-surface-3: #EAF4F1;   /* El fondo de un panel dentro de una tarjeta */

  /* Colores de texto.

     Petroleo sobre el fondo claro da 11,7:1, y el secundario #48606A da
     6,2:1. Los anteriores —#1e2d35 y #5a6e7a— venian de la paleta vieja y el
     secundario se quedaba justo. */
  --color-text: #12312F;
  --color-text-muted: #48606A;

  /* Colores funcionales (estados).

     Copiados de xestio-intranet.css para que un aviso sea del mismo color en
     las dos aplicaciones. El peligro es #C0362C y NO el rosa de CreateLab: si
     el error y la marca comparten color, un error deja de leerse como error. */
  --color-success: var(--x-turquesa-hondo);
  /* El verde de marca como TEXTO da 3,74:1 sobre blanco, que no llega al 4,5
     que pide la WCAG para cuerpo pequeno. Medido, no estimado. Este oscurecido
     da 6,38:1. Es el mismo recurso que la norma del kit aplica al amarillo de
     FocusLab con su --focuslab-text: el color de marca se queda para relleno,
     y para rotular va su version con contraste. */
  --color-success-text: #0A6B62;
  --color-success-hover: #0B7A70;
  --color-danger: #C0362C;
  --color-danger-hover: #9E2A22;
  --color-warning: var(--x-naranja);
  --color-warning-hover: #D93200;
  --color-info: var(--x-petroleo-claro);
  --color-info-hover: var(--x-petroleo);

  /* ════════════════════════════════════════
     TIPOGRAFÍA
     ════════════════════════════════════════
     Poppins, la del manifiesto, autoalojada en vendor/fonts/poppins.css. Antes
     eran Open Sans + Montserrat traidas de fonts.googleapis.com: dos peticiones
     a un tercero en la ruta critica y dos familias que no son las de la marca.
     La pila la construye el generador en --xestio-font; aqui solo se reparte,
     porque el kit usa UNA familia para texto y titulos y la jerarquia la hace
     el peso (400/500/600/700), no un cambio de tipo. */
  --font-body: var(--xestio-font);
  --font-heading: var(--xestio-font);

  /* ════════════════════════════════════════
     ESPACIADO
     ════════════════════════════════════════ */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 40px;

  /* ════════════════════════════════════════
     RADIOS
     ════════════════════════════════════════ */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* ════════════════════════════════════════
     SOMBRAS
     ════════════════════════════════════════
     Tintadas en petroleo (15, 61, 62), no en el teal viejo (14, 77, 87). Una
     sombra gris sobre una paleta calida se ve sucia. */
  --shadow-sm: 0 2px 4px rgba(15, 61, 62, 0.06);
  --shadow-md: 0 4px 12px rgba(15, 61, 62, 0.10);
  --shadow-lg: 0 10px 30px rgba(15, 61, 62, 0.12);
  --shadow-xl: 0 20px 40px rgba(15, 61, 62, 0.15);

  /* ════════════════════════════════════════
     TRANSICIONES
     ════════════════════════════════════════ */
  --transition-fast: 150ms ease;
  --transition-normal: 300ms ease;
  --transition-slow: 500ms ease;

  /* ════════════════════════════════════════
     DESIGN TOKENS v2 — Premium SaaS
     ════════════════════════════════════════ */

  /* Glassmorphism */
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-bg-subtle: rgba(255, 255, 255, 0.55);
  --glass-border: rgba(255, 255, 255, 0.58);

  /* Sombras extendidas */
  --shadow-xs: 0 1px 2px rgba(15, 61, 62, 0.05);
  --shadow-2xl: 0 24px 60px rgba(15, 61, 62, 0.18);
  /* El nombre se conserva —lo usan varios componentes— aunque ya no sea
     coral: ahora es el resplandor del acento de CreateLab. */
  --shadow-glow-coral: 0 4px 24px rgba(225, 29, 72, 0.32);
  --shadow-glow-createlab: 0 4px 24px rgba(225, 29, 72, 0.32);
  --shadow-glow-teal: 0 4px 24px rgba(15, 61, 62, 0.28);
  --shadow-glow-turquesa: 0 4px 24px rgba(20, 184, 166, 0.30);
  --shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.75);

  /* Gradientes de marca.

     El oscuro pasa de acabar en rojo ladrillo a acabar en el rosa de
     CreateLab, que es lo que ata el degradado a este laboratorio. */
  --gradient-brand-dark: linear-gradient(135deg, #05100F 0%, #0A2C2D 30%, #0F3D3E 65%, #8E1236 88%, #E11D48 100%);
  --gradient-teal: linear-gradient(135deg, #0F3D3E 0%, #14B8A6 100%);
  --gradient-coral: linear-gradient(135deg, #E11D48 0%, #BE123C 100%);
  --gradient-createlab: linear-gradient(135deg, #E11D48 0%, #BE123C 100%);
  --gradient-surface: linear-gradient(180deg, #FFFFFF 0%, #F6FAF9 100%);
  --gradient-toolbar: linear-gradient(180deg, #F4F8F7 0%, #E9F3F1 100%);

  /* Radio extendido */
  --radius-2xl: 28px;
  --radius-full: 9999px;

  /* Colores de borde */
  --color-border: rgba(15, 61, 62, 0.14);
  --color-border-light: rgba(15, 61, 62, 0.08);
  --color-heading: var(--color-text);
}