/* Tuukul · tokens de marca v2.1
   tuukul (maya yucateco): pensamiento, razonamiento, buen juicio. Slogan: Del ruido a la idea.
   Uso: <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500&display=swap">
        y después este archivo. Modo claro por defecto; oscuro con data-theme="dark" o preferencia del sistema. */

:root {
  /* Identidad: textos que usan los componentes compartidos */
  --brand-name: "tuukul";
  --brand-signature: "tuukul · Del ruido a la idea.";
  --brand-made: "Hecho con tuukul";

  /* Color · base. Solo de referencia: las apps usan las variables de rol de abajo, que existen igual en todas las marcas del sistema, para poder cambiar de marca sin tocar el código. */
  --brand-ink: #0F1A26;          /* Tinta: texto principal */
  --brand-blue: #1D5FA8;         /* Azul profundo: acción principal, enlaces, símbolo */
  --brand-maya: #74C3F0;         /* Azul maya: acento, el punto del símbolo. Nunca como texto sobre claro */
  --brand-mist: #D8ECFA;         /* Neblina: fondos suaves, selección, pistas de barras */
  --brand-paper: #F5F7FA;        /* Fondo de página */
  --brand-white: #FFFFFF;        /* Superficies (tarjetas, paneles) */

  /* Color · roles */
  --brand-bg: var(--brand-paper);
  --brand-surface: var(--brand-white);
  --brand-text: var(--brand-ink);
  --brand-text-muted: #52606F;
  --brand-line: #DCE3EB;
  --brand-primary: var(--brand-blue);
  --brand-primary-hover: #174E8C;
  --brand-on-primary: #FFFFFF;
  --brand-accent: var(--brand-maya);
  --brand-soft: var(--brand-mist);
  --brand-focus: #1D5FA8;

  /* Color · estados (separados del acento) */
  --brand-success: #1E7F4F;  --brand-success-bg: #DDF3E7;
  --brand-warning: #9A6200;  --brand-warning-bg: #FBEFD5;
  --brand-danger:  #B4232F;  --brand-danger-bg:  #FBE1E3;

  /* Color · gráficas (orden fijo de series, validado para daltonismo en pares adyacentes).
     Una sola serie: --brand-chart-1 sobre pista --brand-soft. Con 4 o más series, siempre leyenda + etiquetas o tabla. */
  --brand-chart-1: #1D5FA8;  /* azul */
  --brand-chart-2: #2A9D8F;  /* verde azulado */
  --brand-chart-3: #D08A1E;  /* ámbar */
  --brand-chart-4: #B5577E;  /* rosa */
  --brand-chart-5: #6F7FD0;  /* lavanda */
  --brand-chart-grid: #E6EBF1;

  /* Tipografía */
  --brand-font: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --brand-font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --brand-text-xs: 12px; --brand-text-sm: 14px; --brand-text-md: 16px; --brand-text-lg: 20px;
  --brand-text-xl: 24px; --brand-text-2xl: 32px; --brand-text-3xl: 44px; --brand-text-4xl: 60px;
  --brand-tracking-display: -0.03em;
  --brand-tracking-label: 0.08em;

  /* Forma y espacio */
  --brand-radius-sm: 6px; --brand-radius: 8px; --brand-radius-lg: 12px; --brand-radius-pill: 999px;
  --brand-space-1: 4px; --brand-space-2: 8px; --brand-space-3: 12px; --brand-space-4: 16px;
  --brand-space-6: 24px; --brand-space-8: 32px; --brand-space-12: 48px; --brand-space-16: 64px;
  --brand-shadow: 0 1px 2px rgba(15, 26, 38, .06), 0 4px 16px rgba(15, 26, 38, .06);

  /* Movimiento */
  --brand-ease: cubic-bezier(.2, .7, .2, 1);
  --brand-dur: 180ms;
}

/* Modo oscuro: el azul maya pasa a ser el color de acción */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand-bg: #0B121A; --brand-surface: #121B26; --brand-text: #E6EDF5; --brand-text-muted: #9AAABB; --brand-line: #243241;
    --brand-primary: #74C3F0; --brand-primary-hover: #9BD4F5; --brand-on-primary: #0F1A26; --brand-soft: #1A2B3D; --brand-focus: #74C3F0;
    --brand-success: #5CC48F; --brand-success-bg: #12301F; --brand-warning: #E8B45A; --brand-warning-bg: #33260C; --brand-danger: #F07A83; --brand-danger-bg: #3A1418;
    --brand-chart-1: #3B82D6; --brand-chart-2: #1F9E8C; --brand-chart-3: #B98018; --brand-chart-4: #C2628C; --brand-chart-5: #7F8FDC; --brand-chart-grid: #1E2A38;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --brand-bg: #0B121A; --brand-surface: #121B26; --brand-text: #E6EDF5; --brand-text-muted: #9AAABB; --brand-line: #243241;
  --brand-primary: #74C3F0; --brand-primary-hover: #9BD4F5; --brand-on-primary: #0F1A26; --brand-soft: #1A2B3D; --brand-focus: #74C3F0;
  --brand-success: #5CC48F; --brand-success-bg: #12301F; --brand-warning: #E8B45A; --brand-warning-bg: #33260C; --brand-danger: #F07A83; --brand-danger-bg: #3A1418;
  --brand-chart-1: #3B82D6; --brand-chart-2: #1F9E8C; --brand-chart-3: #B98018; --brand-chart-4: #C2628C; --brand-chart-5: #7F8FDC; --brand-chart-grid: #1E2A38;
  color-scheme: dark;
}

/* Base opcional */
body { background: var(--brand-bg); color: var(--brand-text); font-family: var(--brand-font); font-size: var(--brand-text-md); line-height: 1.55; }
:focus-visible { outline: 2px solid var(--brand-focus); outline-offset: 2px; }