/* Orden de capas: se declara una sola vez, aquí. Gana la capa de más abajo; lo sin capa gana a todas. */
@layer legacy, tokens, base, components, modules;

@layer tokens {
/**
 * TúPOS · Design Tokens — fuente de verdad (sitio y producto)
 * Generado desde el documento "TúPOS · Design System (sitio y producto)" (2026-09-08).
 * Solo tokens (custom properties). Sin componentes ni reglas de layout.
 * Único dueño de cada token: ninguna otra hoja redefine uno de acá (guardia: tests/test_design_guard.py).
 * Valores de accesibilidad: docs/design-system/CUTOVER.md D1 (contraste WCAG 2.x calculado).
 * Ver también: tupos.tokens.json (versión máquina) y src/static/img/brand_tupos/ (logo).
 */

:root {
  /* ===== 1.1 Marca (tomada del logo) ===== */
  --ink: #05091A;
  --blue: #1E5EF5;
  --blue-deep: #0F3FBF;
  --green: #22D39A;
  --cyan: #12B9FF;

  --blue-soft: #E8EEFE;
  --green-soft: #DFF9F0;
  --cyan-soft: #E3F6FF;

  /* ===== 1.2 Neutros ===== */
  --white: #FFFFFF;
  --paper: #F5F7FB;
  --surface-2: #EEF1F7;
  --surface-3: #E4E8F1;
  --canvas: #E9ECF3;
  --line: #DDE2EE;
  --line-weak: #EBEEF5;
  --ph-a: #E3E7F2;
  --ph-b: #F2F4F9;
  --ink-2: #3E4459;
  --ink-3: #7C8299;

  /* ===== 1.3 Semánticos (light) ===== */
  --bg: var(--paper);
  --surface-1: #FFFFFF;
  /* --surface-2 / --surface-3 ya definidos arriba */
  --fg-1: var(--ink);
  --fg-2: var(--ink-2);
  --fg-3: #62687D; /* D1: 5,53:1 sobre blanco · 4,89 sobre surface-2 · 4,51 sobre surface-3 */
  --border: var(--line);
  --border-weak: var(--line-weak);
  --border-strong: var(--ink);
  --accent: var(--blue);
  --accent-dark: var(--blue-deep);
  --accent-alpha: color-mix(in srgb, var(--blue) 15%, transparent);
  --accent-tint: color-mix(in srgb, var(--accent) 28%, white);
  --accent-hover: var(--blue-deep);
  --accent-soft: var(--blue-soft);
  --accent-fg: #FFFFFF;
  --focus-ring: 0 0 0 3px var(--accent);
  --overlay: rgba(5, 9, 26, .55);
  --scrim: var(--overlay); /* velo de modal/hoja */
  --focus: var(--blue); /* anillo de foco = acento de marca */
  --border-control: var(--ink-3); /* D1 P4: borde de control, 3,81:1 sobre blanco */

  /* Tinta de texto sobre tintes semánticos: en claro se oscurece con negro,
     en oscuro se aclara con blanco. Una sola regla sirve para ambos temas. */
  --tint-ink: black;
  --tint-ink-amt: 78%;
  --tint-bg-amt: 18%;

  /* ===== 1.5 Estado — ya son la variante apta para texto y puntos (D1, sin alias -deep) ===== */
  --ok: #0D7D59; /* 5,13:1 sobre blanco · 4,63 sobre --ok-soft */
  --ok-soft: #DFF9F0;
  --ok-tint: color-mix(in srgb, var(--ok) 18%, white);
  --warn: #9A5E00; /* 5,28:1 sobre blanco · 4,81 sobre --warn-soft */
  --warn-soft: #FFF3DC;
  --warn-tint: color-mix(in srgb, var(--warn) 18%, white);
  --bad: #B2242A; /* 6,61:1 sobre blanco · 5,59 sobre --bad-soft */
  --bad-soft: #FDE7E8;
  --bad-tint: color-mix(in srgb, var(--bad) 18%, white);
  --bad-shade: color-mix(in srgb, var(--bad) 70%, black);
  --info: var(--blue);
  --info-deep: var(--blue-deep);
  --info-soft: var(--blue-soft);

  /* ===== 1.7 Degradés ===== */
  --grad: linear-gradient(90deg, #22D39A 0%, #12B9FF 50%, #1E5EF5 100%);
  --grad-v: linear-gradient(180deg, #22D39A 0%, #12B9FF 50%, #1E5EF5 100%);
  --overlay-photo: linear-gradient(90deg, rgba(5, 9, 26, .94) 0%, rgba(5, 9, 26, .8) 45%, rgba(5, 9, 26, .2) 100%);

  /* ===== 2. Tipografía ===== */
  --font-display: "Poppins", system-ui, -apple-system, sans-serif;
  --font-body: "Poppins", system-ui, -apple-system, sans-serif;
  --font-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-hero: 96px;
  --text-h1: 56px;
  --text-h2: 40px;
  --text-h3: 28px;
  --text-h4: 22px;

  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-md: 15px;
  --text-sm: 13px;
  --text-xs: 12px;

  --fw-body: 400;
  --fw-heading: 700;
  --fw-strong: 700;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --text-eyebrow: 12px;
  --text-code: 14px;

  /* ===== 3. Espaciado (escala base 4) ===== */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 56px;
  --sp-10: 80px;

  --gutter: 24px; /* 24 móvil · 32 tablet · 40–80 desktop, ver 3.5 */
  --content-max: 1280px; /* 1180 docs · 1100 landing texto */
  --sidebar-w: 240px;
  --bottom-nav-h: 76px;
  --navbar-h: 0px; /* navbar global eliminado: identidad y alertas viven en "Más" y la hoja de Perfil */
  --footer-h: 76px;

  --h-sm: 34px;
  --h-md: 44px;
  --h-lg: 56px;
  --h-xl: 68px;

  /* ===== 4. Forma y radios ===== */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-pill: 999px;

  --border-w: 1px;
  --border-w-strong: 2px;

  /* ===== 5. Elevación y efectos ===== */
  --shadow-card: 0 1px 2px rgba(5, 9, 26, .04), 0 8px 24px -12px rgba(5, 9, 26, .12);
  --shadow-float: 0 30px 60px rgba(5, 9, 26, .12);
  --shadow-receipt-sm: 0 20px 40px rgba(5, 9, 26, .12);
  --shadow-receipt-lg: 0 30px 50px rgba(5, 9, 26, .14);
  --shadow-accent: 0 10px 30px -10px rgba(30, 94, 245, .45);
  --shadow-grad: 0 30px 60px rgba(30, 94, 245, .3);
  --shadow-bubble: 0 1px 1px rgba(0, 0, 0, .08);

  --shadow-sm: 0 1px 3px rgba(5, 9, 26, 0.08);
  --shadow-md: 0 4px 12px rgba(5, 9, 26, 0.08);
  --shadow-lg: 0 8px 24px rgba(5, 9, 26, 0.12);
  --shadow-hover: 0 12px 28px rgba(5, 9, 26, 0.15);
  --shadow-modal: 0 20px 60px rgba(5, 9, 26, 0.3);

  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 320ms;

  /* ===== 6. Capas (z-index) ===== */
  --z-header: 100;
  --z-footer: 90;
  --z-drawer: 200;
  --z-success: 300;
  --z-modal-backdrop: 500;
  --z-modal: 999;

  /* ===== 7. Categorías de producto (POS): degradés por rubro ===== */
  --cat-frutas: linear-gradient(135deg, #10b981 0%, #059669 100%);
  --cat-carnes: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  --cat-lacteos: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  --cat-panaderia: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  --cat-despensa: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  --cat-bebidas: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
  --cat-snacks: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
  --cat-limpieza: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
}

/* ===== 1.4 Semánticos (dark) — el acento cambia de azul a verde ===== */
[data-theme="dark"] {
  --bg: #05091A;
  --surface-1: #0C1226;
  --surface-2: #141B33;
  --surface-3: #1D2542;
  --fg-1: #FFFFFF;
  --fg-2: rgba(255, 255, 255, .78);
  --fg-3: rgba(255, 255, 255, .55);
  --border: rgba(255, 255, 255, .14);
  --border-weak: rgba(255, 255, 255, .08);
  --border-strong: #FFFFFF;
  --accent: var(--green);
  --accent-hover: #5BE3B6;
  --accent-soft: rgba(34, 211, 154, .16);
  --accent-fg: #05091A;
  --focus-ring: 0 0 0 3px rgba(34, 211, 154, .35);
  --overlay: rgba(5, 9, 26, .75);

  --ok-soft: rgba(34, 211, 154, .16);
  --warn-soft: rgba(242, 162, 27, .18);
  --bad-soft: rgba(229, 72, 77, .18);
  --info-soft: rgba(30, 94, 245, .18);
}
}


/* ── v2.1: tokens que el sistema nuevo agrega (tamaños, alturas, capas, estados de control, primer toque).
   Los colores base ya los define F1 arriba; aquí solo lo que no existía. Fuente: tupos-design-lab/css/tokens/tupos.css */
@layer tokens {
  :root {
    --placeholder: #62687D;
    --ok-fg: #FFFFFF;
    --warn-fg: #FFFFFF;
    --bad-fg: #FFFFFF;
    --bad-hover: #8F1B20;
    --disabled-bg: #EEF1F7;
    --disabled-fg: #62687D;
    --disabled-border: #7C8299;
    --sell-bg: #1E5EF5;
    --sell-fg: #FFFFFF;
    --quick-accent: #1E5EF5;
    --quick-ink: #05091A;
    --quick-ink-2: #3E4459;
    --quick-ok: #0D7D59;
    --quick-warn: #9A5E00;
    --quick-bad: #B2242A;
    --quick-fg: #FFFFFF;
    --focus-w: 3px;
    --focus-offset: 2px;
    --shadow-overlay: 0 24px 48px -12px rgba(5,9,26,.28),0 2px 6px rgba(5,9,26,.08);
    --shadow-sell: 0 6px 16px -4px rgba(30,94,245,.45);
    --font-ui: "Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
    --text-13: .8125rem;
    --text-14: .875rem;
    --text-16: 1rem;
    --text-18: 1.125rem;
    --text-24: 1.5rem;
    --text-30: 1.875rem;
    --text-32: 2rem;
    --lh: 1.4;
    --lh-tight: 1.15;
    --w-400: 400;
    --w-500: 500;
    --w-600: 600;
    --w-700: 700;
    --tap: 2.75rem;
    --control: 3rem;
    --control-lg: 3.5rem;
    --nav-h: 5.25rem;
    --nav-max: 45rem;
    --side-w: 5.5rem;
    --side-w-open: 17rem;
    --actionbar-h: 4.5rem;
    --row-list: 4rem;
    --row-table: 3.5rem;
    --tag-h: 1.75rem;
    --dot: .625rem;
    --avatar: 2.5rem;
    --icon-sm: 1rem;
    --icon: 1.25rem;
    --icon-lg: 1.5rem;
    --icon-xl: 1.75rem;
    --page-max: 80rem;
    --page-narrow: 45rem;
    --page-wide: 100rem;
    --dur-toast: 6000ms;
    --dur-spin: 800ms;
    --z-sticky: 20;
    --z-nav: 30;
    --z-actionbar: 31;
    --z-popover: 40;
    --z-overlay: 50;
    --z-toast: 60;
    /* Soporte (chat de ayuda, docs/SOPORTE_MODULO.md): panel sobre .kx-nav (30) y .kx-actionbar (31), bajo popover (40) y overlay (50). */
    --z-panel: 35;
    --sch-panel-w: 26rem;
    --sch-panel-h: 42rem;
    --sch-dock-w: 26rem;
    --sch-bubble-max: 34rem;
    --sch-thumb: 6rem;
  }

  [data-theme="dark"] {
    --placeholder: #9AA1B7;
    --ok-fg: #05091A;
    --warn-fg: #05091A;
    --bad-fg: #05091A;
    --bad-hover: #FFB3B5;
    --disabled-bg: #141B33;
    --disabled-fg: #9AA1B7;
    --disabled-border: #6F7690;
    --quick-ink: #1D2542;
    --quick-ink-2: #2E3756;
    --shadow-overlay: 0 24px 48px -12px rgba(0,0,0,.6),0 0 0 1px #2A3352;
    --shadow-sell: 0 6px 16px -4px rgba(0,0,0,.6);
  }

  /* Escala móvil (≤640 px). Decisión del producto 2026-10-05: 18 px de base era demasiado grande en teléfono.
     Las alturas táctiles (--tap 44 · --control 48 · --control-lg 56) NO bajan. 16 px en inputs evita el zoom de iOS.
     M y L conservan la escala nominal. Para probar otra escala se cambian solo estas 5 líneas. */
  @media (max-width: 40em) {
    :root {
      --text-18: 1rem;
      --text-16: .9375rem;
      --text-24: 1.375rem;
      --text-30: 1.5rem;
      --text-32: 1.625rem;
    }
  }

  /* Navegación lateral (experimental, docs/NAV_LATERAL.md): desde M el nav deja el pie, así que todo lo que reserva
     --nav-h abajo (kx-page, POS, toasts, popover) recupera ese alto. js/v4/kx_nav.js fija html[data-nav]. */
  @media (min-width: 40.0625em) {
    [data-nav="side"] { --nav-h: 0px; }
  }
}