/* =========================================================================
   PALETA · el unico archivo que se toca para cambiar la identidad.

   Todo color y toda tipografia de las pantallas del restaurante sale de aqui
   (app.css y tableta.css solo leen estas variables). Cambiar de marca con el
   cliente es reescribir este archivo; nada mas.

   ⚠ SIN IDENTIDAD DE MARCA TODAVIA (Diego, 17 sep, noche): eso se decide con el
   cliente. Esto es una base sobria y medida, no una marca.

   Las reglas que la sostienen, medidas y no a ojo:

     1. EL ACENTO ORIENTA, NO DECORA. Cada seccion tiene el suyo; el fondo y
        el texto NO cambian entre secciones: el acento NUNCA pinta texto, solo
        marcas (la raya de la seccion, la barra lateral, las barras de una
        grafica). Por eso le basta 3:1 contra el fondo (WCAG 1.4.11, objetos
        graficos) y hay sitio para separar siete tonos. Seis tonos repartidos
        por la rueda (verde, verde azulado, azul, indigo, violeta, magenta) mas
        pizarra para el tablero, y ninguno en rojo ni en ambar: el ambar es de
        los HUECOS y el rojo no se usa para nadie por defecto.
        Separacion medida (scripts/medir_paleta.py, OKLab x100): minimo 13 en
        claro y 11 en oscuro. El piso de 15 del validador de graficas es para
        SERIES que solo se distinguen por color; aqui el nombre va siempre al
        lado, y la suite exige 10. La simulacion de daltonismo del validador no
        se corrio: en esta maquina no hay Node (anotado).
     2. UNA DESVIACION NO GRITA. Sale en tinta, con su signo y su palabra.
        Solo la que va CONTRA la meta que puso el dueño lleva el tono
        `--desvio-contra` (ladrillo apagado, no rojo de alarma), y siempre con
        flecha y palabra: nunca depende solo del color.
     3. POCA LUZ. Hay un tema oscuro de verdad (no negro puro, texto un poco
        mas claro que gris), elegible desde la barra lateral. Mismo acento por
        seccion, aclarado para que siga leyendose.

   Contrastes medidos (claro; `python -m scripts.medir_paleta` da todos, y
   del oscuro): tinta sobre superficie 17.8:1 · tinta-2 8.1:1 · tinta-3 5.7:1
   · boton 14.7:1 · hueco 9.3:1 · desvio contra 6.8:1 · borde 4.6:1.
   ========================================================================= */

:root {
  /* --- tipografia ------------------------------------------------------
     Titulos con serifa de caracter que ya viene en los aparatos: Charter en
     iPad y Mac, Sitka en Windows. Ninguna se descarga (una fuente propia se
     decide con la marca). El texto y las cifras en la sans del sistema, con
     digitos tabulares: las columnas de dinero se alinean solas. */
  --letra-titulo: "Charter", "Bitstream Charter", "Sitka Text", "Iowan Old Style", Cambria, Georgia, serif;
  --letra-texto: system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --letra-cifra: system-ui, -apple-system, "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* --- la escala de tamaños (Diego, 18 sep: «sin escala no hay jerarquía»)
     Diez pasos y dos especiales. Nada en app.css ni en tableta.css escribe
     un tamaño a mano: todo sale de aqui (lo comprueba probar_rediseno). Cada
     paso es ~1.1–1.25 veces el anterior, para que dos niveles vecinos se
     distingan y no se confundan. */
  --texto-3xs: 0.72rem;
  --texto-2xs: 0.8rem;
  --texto-xs: 0.88rem;
  --texto-sm: 0.95rem;
  --texto-base: 1.0625rem;
  --texto-md: 1.2rem;
  --texto-lg: 1.4rem;
  --texto-xl: 1.75rem;
  --texto-2xl: 2.15rem;
  --texto-3xl: 2.6rem;
  --texto-frase: clamp(1.55rem, 2.6vw, 2.15rem);   /* la frase de cada pantalla */
  --texto-cifra: clamp(2.75rem, 8vw, 4.25rem);     /* LA cifra de la frase: enorme */

  /* --- neutros --------------------------------------------------------- */
  --fondo: #F4F5F7;           /* detras de todo */
  --superficie: #FFFFFF;      /* paneles */
  --superficie-2: #F7F8FA;    /* filas alternas, zonas tenues */
  --lateral: #FFFFFF;         /* la barra lateral */
  --linea: #E2E5EA;           /* separadores decorativos */
  --borde: #6B7684;           /* bordes que tienen que verse (campos) */
  --tinta: #14181F;
  --tinta-2: #465160;         /* secundario, aun legible en cocina */
  --tinta-3: #5E6875;         /* etiquetas pequeñas */
  --accion: #1F2937;          /* botones: tinta, no color de seccion */
  --accion-2: #0B0F16;
  --sobre-accion: #FFFFFF;
  --foco: #FFB000;            /* el anillo de foco se ve en cualquier fondo */

  /* --- estados --------------------------------------------------------- */
  --hueco-fondo: #FFF3D6;
  --hueco-tinta: #5A3A00;
  --hueco-borde: #B36B00;
  --desvio-contra: #8C3A1E;   /* ladrillo apagado, NO rojo */
  --desvio-contra-fondo: #FBEFEA;
  --aviso-fondo: #E8F2EC;
  --aviso-tinta: #0B4A28;
  --aviso-borde: #2D7A50;
  --error-fondo: #FBE9E9;
  --error-tinta: #6E1212;
  --error-borde: #A61B1B;

  /* --- el acento de cada seccion --------------------------------------- */
  --acento-tablero: #56606D;      /* pizarra: la seccion de dirección */
  --acento-ventas: #3C9B90;       /* verde azulado */
  --acento-compras: #2298E9;      /* azul */
  --acento-piso: #5B7A1A;         /* oliva (18 sep, noche; medido: separa 14.4 del mas cercano) */
  --acento-costo: #25521A;   /* verde */
  --acento-labor: #7F4DB0;        /* violeta */
  --acento-presupuesto: #372B96;  /* indigo */
  --acento-revision: #6B305A;     /* magenta */
  /* El tinte del fondo de lo activo: el mismo acento, casi transparente. */
  --tinte: 9%;
  --tinte-activo: 16%;     /* la seccion seleccionada en la barra: se ve sin dudar */

  /* --- graficas -------------------------------------------------------- */
  --grafica-referencia: #14181F;  /* la linea del plan: tinta, no color */
  --grafica-rejilla: #E2E5EA;

  color-scheme: light;
}

/* Tema oscuro para poca luz. Se enciende desde la barra lateral y se guarda
   en el aparato; no sigue solo al sistema a proposito: una tableta que
   cambia de tema a media jornada desorienta. */
:root[data-tema="oscuro"] {
  --fondo: #0F1318;
  --superficie: #171C23;
  --superficie-2: #1C222A;
  --lateral: #141920;
  --linea: #2A313B;
  --borde: #8A94A3;
  --tinta: #E8ECF1;
  --tinta-2: #B4BDC9;
  --tinta-3: #9AA4B2;
  --accion: #E8ECF1;
  --accion-2: #FFFFFF;
  --sobre-accion: #0F1318;
  --foco: #FFC53D;

  --hueco-fondo: #3A2A0A;
  --hueco-tinta: #FFE1A3;
  --hueco-borde: #C98A1A;
  --desvio-contra: #F2A98C;
  --desvio-contra-fondo: #33201A;
  --aviso-fondo: #12301F;
  --aviso-tinta: #BFE8CF;
  --aviso-borde: #3F9A68;
  --error-fondo: #3A1515;
  --error-tinta: #F6C1C1;
  --error-borde: #D65252;

  --acento-tablero: #C7D1DF;
  --acento-ventas: #58BCB0;
  --acento-compras: #2A9FF1;
  --acento-piso: #D0C46E;
  --acento-costo: #76CD63;
  --acento-labor: #A085C1;
  --acento-presupuesto: #A4AAFB;
  --acento-revision: #DC96C4;
  --tinte: 16%;
  --tinte-activo: 26%;

  --grafica-referencia: #E8ECF1;
  --grafica-rejilla: #2A313B;

  color-scheme: dark;
}