/* =============================================================================
   Taste of Europe Co., Ltd. — SISTEMA DE DISEÑO COMÚN · tokens.css · v1.1
   23-sep-2026 · encargo 038 (v1.1: cambios de la 1.ª revisión) · fuente única: ~/Empresa/DISENO/tokens.css
   -----------------------------------------------------------------------------
   Qué es: todos los colores, letras, tamaños, espacios, radios y sombras de
   TODAS nuestras apps, con un nombre estable. Las apps NO escriben un hex a
   mano: usan var(--color-...). Si falta un color, se añade AQUÍ, con un
   comentario que diga para qué es, y se vuelve a pasar el contraste:
       python3 herramientas/comprobar-contraste.py
   Guía completa: SISTEMA-DE-DISENO.md · Cómo aplicarlo a cada app: APLICAR.md

   Alineado con Restaurant OS (casa madre, de Javi, solo lectura):
   apps/frontend/tailwind.config.ts y src/components/charts.tsx (main 8d16650).
   Donde coincide, el hex es EXACTAMENTE el suyo (se indica "= ROS ...").

   Cómo se activa (atributos en <html>):
     data-theme   = "light" (por defecto) | "dark" | "auto" (sigue al aparato)
                    Staff: oscuro SOLO por interruptor (decisión POS 13-sep).
     data-context = (nada: sala)  | "kitchen" (cocina) | "office" (despacho)
     data-brand   = (nada: apps de la empresa) | "taste" | "smash" (webs de cliente)
     lang         = "en" | "th" | "my" | "es"
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1. BASE: tema claro, contexto sala, sin marca de cliente
   --------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* --- Neutros --- */
  --color-bg:            #F7F7F5;  /* fondo de página (= ROS paper) */
  --color-surface:       #FFFFFF;  /* tarjetas, hojas, campos */
  --color-surface-alt:   #F3EFE6;  /* crema "papel de carta": dock, barra lateral, cabecera de tabla (= POS --side) */
  --color-border:        #E4DFD3;  /* separadores y bordes de tarjeta (decorativos) */
  --color-border-strong: #8C877D;  /* borde de campos y casillas: se ve (>= 3:1) */
  --color-text:          #1C1C1C;  /* texto principal (= ROS ink) */
  --color-text-2:        #4A4F52;  /* texto secundario (= POS --ink2) */
  --color-text-muted:    #6B6B6B;  /* notas, fechas, etiquetas (= ROS charts muted). Nunca más claro */
  --color-overlay:       rgba(20, 22, 24, 0.48); /* velo detrás de hojas y menús */
  --color-focus:         #0F5257;  /* anillo de foco del teclado */

  /* --- Acento de producto: el petróleo de Restaurant OS --- */
  --color-primary:         #0F5257; /* botón principal, pestaña activa, dock activo (= ROS petrol) */
  --color-primary-hover:   #0D474B; /* solo con ratón */
  --color-primary-pressed: #0B3D40; /* al pulsar (= ROS petrol-dark) */
  --color-primary-soft:    #E4EEEE; /* fondo suave de lo seleccionado (= ROS petrol-light) */
  --color-on-primary:      #FFFFFF; /* texto sobre el botón principal */
  --color-primary-text:    #0F5257; /* enlaces y texto de acento */
  --color-accent:          #0F5257; /* en staff no hay segundo acento; las marcas lo cambian */
  --color-accent-text:     #0F5257;

  /* --- Estado: SOLO comunica estado, nunca decora (regla de ROS) ---
     -X        texto, iconos, bordes y relleno con texto blanco (AA)
     -X-soft   fondo tintado (aviso, pastilla)
     -X-bright el hex de ROS: gráficas, puntos y barras; nunca texto           */
  --color-ok:           #15803D;
  --color-ok-soft:      #DCFCE7;  /* = ROS status okLight */
  --color-ok-bright:    #16A34A;  /* = ROS status ok */
  --color-warn:         #8A5300;
  --color-warn-soft:    #FCEFDB;  /* = ROS status warnLight */
  --color-warn-bright:  #E8A33D;  /* = ROS status warn · SIEMPRE con texto negro encima o su palabra al lado */
  --color-on-warn-bright: #1C1C1C; /* el texto negro que va encima del ámbar (igual en claro y oscuro) */
  --color-error:        #B3261E;  /* = ROS danger */
  --color-error-soft:   #FEE2E2;  /* = ROS status urgentLight */
  --color-error-bright: #DC2626;  /* = ROS status urgent */
  --color-info:         #1D4ED8;
  --color-info-soft:    #DBEAFE;  /* = ROS status infoLight */
  --color-info-bright:  #2563EB;  /* = ROS status info */
  --color-danger:         var(--color-error);  /* acción destructiva (anular, borrar, cerrar caja) */
  --color-danger-pressed: #8E1E17;
  --color-on-status:    #FFFFFF;  /* texto sobre relleno ok/warn/error/info/danger */

  /* --- Marcas (no cambian con el tema: son los logos) --- */
  --color-brand-taste:     #035257; /* teal del logo de Taste (medido en logo-taste.png) */
  --color-brand-taste-red: #D82F32; /* rojo del logo de Taste: en texto, solo grande (sobre crema 4,19) */
  --color-brand-taste-red-text: #B8262A; /* el mismo rojo, más oscuro, para texto pequeño sobre claro o crema */
  --color-brand-smash:     #E12C19; /* rojo Smash (brand bible 17-jul-2026) */
  --color-brand-smash-ink: #0D0D0D; /* negro Smash (brand bible) */
  --color-brand-cream:     #F3EFE6; /* crema común de la casa */

  /* --- Categorías: para distinguir tipos de cosa de un vistazo (cabeceras de
         tarjetas de LINE, mosaicos del portal). NO son estado. = ROS feature-*Icon --- */
  --color-cat-violet: #7C3AED;  --color-cat-violet-soft: #EDE9FE;
  --color-cat-blue:   #2563EB;  --color-cat-blue-soft:   #DBEAFE;
  --color-cat-indigo: #4F46E5;  --color-cat-indigo-soft: #E0E7FF;
  --color-cat-slate:  #4B5563;  --color-cat-slate-soft:  #F3F4F6;

  /* --- Gráficas (= ROS charts.tsx salvo "shared", que ROS no tiene) --- */
  --color-chart-taste:  #0E7A70;
  --color-chart-smash:  #D0524A;
  --color-chart-shared: #8C877D;  /* bebidas y salsas de las dos marcas */
  --color-chart-grid:   #E6E6E2;  /* = ROS charts line */

  /* --- Tipografía ---
     Decisión de Dirección (23-sep-2026): las apps de la empresa NO cargan letras de
     internet. La pila es la misma que Restaurant OS (declara Inter y no la carga), así
     que se ve la letra del sistema: San Francisco en iPhone/iPad/Mac, Roboto en Android.
     Funciona sin internet. Solo las webs de marca cargan su letra de titulares (§4). */
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans Thai', 'Noto Sans Myanmar', sans-serif;
  --font-display: var(--font-body);   /* títulos de pantalla (las marcas lo cambian) */
  --font-label:   var(--font-body);   /* etiquetas en mayúsculas */
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;  /* nº de ticket, códigos */
  --font-thai:    'Noto Sans Thai', 'Thonburi', 'Leelawadee UI', system-ui, sans-serif;               /* las del sistema */
  --font-myanmar: 'Noto Sans Myanmar', 'Myanmar Sangam MN', 'Myanmar Text', 'Padauk', system-ui, sans-serif;

  --font-weight-regular:  400;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-black:    800;
  --font-weight-display:  800;

  --font-size-xs:  12px;   /* mínimo absoluto: etiquetas en mayúsculas */
  --font-size-sm:  14px;   /* notas, subtítulos, traducción MY/TH debajo */
  --font-size-md:  16px;   /* texto normal y casillas (iOS no hace zoom desde 16) */
  --font-size-lg:  18px;   /* texto de cocina, botones grandes */
  --font-size-xl:  22px;   /* título en móvil, subtítulos de sección */
  --font-size-2xl: 28px;   /* título de pantalla en tablet/ordenador */
  --font-size-3xl: 36px;   /* cifras grandes (KPI) */
  --font-size-4xl: 48px;   /* cantidades de cocina que se leen a 2 metros */

  --font-size-body:  var(--font-size-md);
  --font-size-label: var(--font-size-xs);
  --font-size-title: var(--font-size-2xl);
  --font-size-title-mobile: var(--font-size-xl);

  --line-height-tight:  1.15;
  --line-height-normal: 1.45;
  --line-height-loose:  1.75;  /* birmano y tailandés necesitan más aire */
  --letter-spacing-label:   0.08em;  /* = ROS tracking-[0.08em] */
  --letter-spacing-display: -0.01em;

  /* --- Espacios (base 4 px) --- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-gutter:     16px;    /* margen lateral de página en móvil */
  --space-page-max:   1180px;  /* ancho máximo de página (= POS .wrap) */
  --space-column-max: 448px;   /* columna estrecha de móvil/tablet (= ROS max-w-md) */

  /* --- Radios --- */
  --radius-xs:   4px;
  --radius-sm:   8px;    /* = ROS rounded-lg */
  --radius-md:   12px;   /* = ROS rounded-xl: chips, pestañas, menús */
  --radius-lg:   16px;   /* = ROS rounded-2xl: tarjetas, botones de 56 px */
  --radius-xl:   24px;   /* = ROS rounded-card: botones de 72 px, hojas */
  --radius-pill: 999px;  /* SOLO pastillas de estado (y botones de las webs) */
  --radius-button: var(--radius-lg);
  --radius-input:  var(--radius-lg);
  --radius-card:   var(--radius-lg);
  --radius-chip:   var(--radius-md);
  --radius-sheet:  var(--radius-xl);

  /* --- Sombras: casi ninguna (regla de ROS) --- */
  --shadow-0:    none;
  --shadow-1:    0 1px 2px rgba(28, 40, 37, 0.04);   /* tarjetas (= ROS) */
  --shadow-2:    0 4px 14px rgba(28, 40, 37, 0.10);  /* menús desplegables */
  --shadow-3:    0 16px 40px rgba(28, 40, 37, 0.18); /* hojas y avisos flotantes */
  --shadow-dock: 0 -6px 18px rgba(0, 0, 0, 0.06);    /* dock inferior (= POS) */

  /* --- Tamaños táctiles --- */
  --tap-min:     44px;  /* lo mínimo que se toca con el dedo */
  --tap-control: 56px;  /* botones de trabajo y campos (= POS --toque) */
  --tap-primary: 56px;  /* acción principal de la pantalla */
  --border-width: 1px;

  /* --- Capas y movimiento --- */
  --z-header: 50;
  --z-dock:   70;
  --z-menu:   80;
  --z-sheet:  90;
  --z-toast:  100;
  --duration-fast:   120ms;
  --duration-normal: 200ms;
  --easing: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ---------------------------------------------------------------------------
   2. TEMA OSCURO (por interruptor: data-theme="dark")
      Mismos valores que el oscuro del POS, ajustados a AA.
      El bloque 2b repite estos valores para data-theme="auto": si cambias uno,
      cambia el otro (comprobar-contraste.py avisa si no coinciden).
   --------------------------------------------------------------------------- */
:root[data-theme="dark"],
[data-theme="dark"] {
  color-scheme: dark;
  --color-bg:            #15181A;
  --color-surface:       #1F2427;
  --color-surface-alt:   #1B1F22;
  --color-border:        #33393C;
  --color-border-strong: #747C80;
  --color-text:          #EBE8E1;
  --color-text-2:        #C7C3BA;
  --color-text-muted:    #9BA19C;
  --color-overlay:       rgba(0, 0, 0, 0.62);
  --color-focus:         #4FB8AD;
  --color-primary:         #4FB8AD;
  --color-primary-hover:   #5CC4B9;
  --color-primary-pressed: #3FA396;
  --color-primary-soft:    #153431;
  --color-on-primary:      #15181A;
  --color-primary-text:    #4FB8AD;
  --color-accent:          #4FB8AD;
  --color-accent-text:     #4FB8AD;
  --color-ok:           #7FCF9A;
  --color-ok-soft:      #173225;
  --color-ok-bright:    #4ADE80;
  --color-warn:         #E0A94A;
  --color-warn-soft:    #3A2D15;
  --color-warn-bright:  #E8A33D;
  --color-error:        #FF8A80;
  --color-error-soft:   #3D1F1C;
  --color-error-bright: #F87171;
  --color-info:         #93C5FD;
  --color-info-soft:    #16303F;
  --color-info-bright:  #60A5FA;
  --color-danger-pressed: #FF6B5E;
  --color-on-status:    #15181A;
  --color-chart-taste:  #3FBFAE;
  --color-chart-smash:  #FF6B5E;
  --color-chart-shared: #8A908B;
  --color-chart-grid:   #33393C;
  --shadow-1:    0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-2:    0 6px 18px rgba(0, 0, 0, 0.45);
  --shadow-3:    0 18px 44px rgba(0, 0, 0, 0.60);
  --shadow-dock: 0 -6px 18px rgba(0, 0, 0, 0.35);
}

/* 2b. data-theme="auto": sigue al aparato. Solo para webs de cliente y paneles
       de Sergio; las pantallas del personal NO lo usan (el Sunmi va en claro). */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    color-scheme: dark;
    --color-bg:            #15181A;
    --color-surface:       #1F2427;
    --color-surface-alt:   #1B1F22;
    --color-border:        #33393C;
    --color-border-strong: #747C80;
    --color-text:          #EBE8E1;
    --color-text-2:        #C7C3BA;
    --color-text-muted:    #9BA19C;
    --color-overlay:       rgba(0, 0, 0, 0.62);
    --color-focus:         #4FB8AD;
    --color-primary:         #4FB8AD;
    --color-primary-hover:   #5CC4B9;
    --color-primary-pressed: #3FA396;
    --color-primary-soft:    #153431;
    --color-on-primary:      #15181A;
    --color-primary-text:    #4FB8AD;
    --color-accent:          #4FB8AD;
    --color-accent-text:     #4FB8AD;
    --color-ok:           #7FCF9A;
    --color-ok-soft:      #173225;
    --color-ok-bright:    #4ADE80;
    --color-warn:         #E0A94A;
    --color-warn-soft:    #3A2D15;
    --color-warn-bright:  #E8A33D;
    --color-error:        #FF8A80;
    --color-error-soft:   #3D1F1C;
    --color-error-bright: #F87171;
    --color-info:         #93C5FD;
    --color-info-soft:    #16303F;
    --color-info-bright:  #60A5FA;
    --color-danger-pressed: #FF6B5E;
    --color-on-status:    #15181A;
    --color-chart-taste:  #3FBFAE;
    --color-chart-smash:  #FF6B5E;
    --color-chart-shared: #8A908B;
    --color-chart-grid:   #33393C;
    --shadow-1:    0 1px 2px rgba(0, 0, 0, 0.30);
    --shadow-2:    0 6px 18px rgba(0, 0, 0, 0.45);
    --shadow-3:    0 18px 44px rgba(0, 0, 0, 0.60);
    --shadow-dock: 0 -6px 18px rgba(0, 0, 0, 0.35);
  }
}

/* ---------------------------------------------------------------------------
   3. CONTEXTOS (se suman al tema)
   --------------------------------------------------------------------------- */

/* Los selectores de contexto llevan también la forma :root[data-theme][…] para que
   ganen al tema oscuro por especificidad aunque vayan en el mismo <html>
   (<html data-theme="dark" data-context="kitchen">), sin depender del orden. */

/* COCINA: dedo grande, guantes, prisa, a 1-2 metros. Sin grises claros. */
:root[data-theme][data-context="kitchen"],
:root[data-context="kitchen"],
[data-context="kitchen"] {
  --font-size-body:  var(--font-size-lg);   /* 18 px */
  --font-size-label: 13px;
  --tap-min:     56px;                      /* en cocina nada que se toque mide menos de 56 */
  --tap-control: 56px;
  --tap-primary: 72px;                      /* = ROS min-h-tap (4.5rem) */
  --radius-button: var(--radius-xl);        /* = ROS rounded-card en lo táctil */
  --border-width: 2px;                      /* = ROS border-2 en lo táctil */
  --color-text-muted: var(--color-text-2);  /* en cocina nada de gris claro */
}

/* DESPACHO: paneles de Sergio en ordenador (reviews, Grab, panel del chef). Más denso. */
:root[data-theme][data-context="office"],
:root[data-context="office"],
[data-context="office"] {
  --tap-control: 44px;
  --tap-primary: 48px;
  --radius-button: var(--radius-md);
  --font-size-title: var(--font-size-xl);
}

/* ---------------------------------------------------------------------------
   4. MARCAS DE CLIENTE (webs, carta). Misma estructura; cambia la piel.
   --------------------------------------------------------------------------- */

/* Las webs de marca NO cambian con el tema claro/oscuro: la marca manda.
   Por eso cada bloque fija TODOS los colores (comprobar-contraste.py lo vigila)
   y su selector lleva :root para ganar al tema aunque vayan en el mismo <html>. */

/* TASTE OF EUROPE: europeo, editorial, cálido. Playfair en títulos. Siempre claro. */
:root[data-brand="taste"],
[data-brand="taste"] {
  color-scheme: light;
  --color-bg:            #F7F5F1;  /* papel de la web actual */
  --color-surface:       #FFFFFF;
  --color-surface-alt:   #EFECE6;
  --color-border:        #E3DDD2;
  --color-border-strong: #8C877D;
  --color-text:          #2A2A28;  /* tinta de la web actual */
  --color-text-2:        #4F4E49;
  --color-text-muted:    #6B6A64;
  --color-overlay:       rgba(20, 22, 24, 0.48);
  --color-focus:         #035257;
  --color-primary:         #035257;  /* = logo. A 1,3 ΔE del petróleo: a la vista, el mismo */
  --color-primary-hover:   #024A4E;
  --color-primary-pressed: #023E42;
  --color-primary-soft:    #E1ECEC;
  --color-on-primary:      #FFFFFF;
  --color-primary-text:    #035257;
  --color-accent:          #D82F32;  /* rojo del logo: botón "Order now", palabra destacada */
  --color-accent-text:     var(--color-brand-taste-red-text);  /* rojo para texto pequeño (el del logo no llega a AA) */
  --color-ok:           #15803D;  --color-ok-soft:    #DCFCE7;  --color-ok-bright:    #16A34A;
  --color-warn:         #8A5300;  --color-warn-soft:  #FCEFDB;  --color-warn-bright:  #E8A33D;
  --color-error:        #B3261E;  --color-error-soft: #FEE2E2;  --color-error-bright: #DC2626;
  --color-info:         #1D4ED8;  --color-info-soft:  #DBEAFE;  --color-info-bright:  #2563EB;
  --color-danger-pressed: #8E1E17;
  --color-on-status:    #FFFFFF;
  --color-chart-taste:  #0E7A70;  --color-chart-smash: #D0524A;
  --color-chart-shared: #8C877D;  --color-chart-grid:  #E6E6E2;
  --shadow-1:    0 1px 2px rgba(28, 40, 37, 0.04);
  --shadow-2:    0 4px 14px rgba(28, 40, 37, 0.10);
  --shadow-3:    0 16px 40px rgba(28, 40, 37, 0.18);
  --shadow-dock: 0 -6px 18px rgba(0, 0, 0, 0.06);
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-weight-display: 700;
  --letter-spacing-display: 0.02em;
  --radius-button: var(--radius-pill);
}

/* SMASH BASTARDS: actitud, rojo y negro, Anton/Oswald. Siempre fondo negro. */
:root[data-brand="smash"],
[data-brand="smash"] {
  color-scheme: dark;
  --color-bg:            #0D0D0D;
  --color-surface:       #1A1A1A;
  --color-surface-alt:   #262626;
  --color-border:        #333333;
  --color-border-strong: #7A7A7A;
  --color-text:          #FFFFFF;
  --color-text-2:        #D9D9D9;
  --color-text-muted:    #B3B3B3;
  --color-overlay:       rgba(0, 0, 0, 0.7);
  --color-focus:         #FFFFFF;
  --color-primary:         #E12C19;  /* rojo Smash: blanco encima pasa AA (4,59) */
  --color-primary-hover:   #EC3A27;
  --color-primary-pressed: #B8200F;
  --color-primary-soft:    #3A1410;
  --color-on-primary:      #FFFFFF;
  --color-primary-text:    #FF5A45;  /* rojo para texto pequeño sobre negro (el de marca solo en grande) */
  --color-accent:          #E12C19;
  --color-accent-text:     #FF5A45;
  --color-ok:           #7FCF9A;  --color-ok-soft:    #173225;  --color-ok-bright:    #4ADE80;
  --color-warn:         #E0A94A;  --color-warn-soft:  #3A2D15;  --color-warn-bright:  #E8A33D;
  --color-error:        #FF8A80;  --color-error-soft: #3D1F1C;  --color-error-bright: #F87171;
  --color-info:         #93C5FD;  --color-info-soft:  #16303F;  --color-info-bright:  #60A5FA;
  --color-danger-pressed: #FF6B5E;
  --color-on-status:    #0D0D0D;
  --color-chart-taste:  #3FBFAE;  --color-chart-smash: #FF6B5E;
  --color-chart-shared: #8A908B;  --color-chart-grid:  #333333;
  --font-display: 'Anton', 'Oswald', Impact, 'Arial Narrow', sans-serif;
  --font-label:   'Oswald', 'Arial Narrow', 'Inter', sans-serif;
  --font-weight-display: 400;  /* Anton solo tiene un grosor */
  --letter-spacing-display: 0.02em;
  --radius-button: var(--radius-pill);
  --shadow-1:    0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2:    0 6px 18px rgba(0, 0, 0, 0.5);
  --shadow-3:    0 18px 44px rgba(0, 0, 0, 0.7);
  --shadow-dock: 0 -6px 18px rgba(0, 0, 0, 0.5);
}

/* Reduce el movimiento si el aparato lo pide */
@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: 0ms; --duration-normal: 0ms; }
}