/**
 * 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.
 * 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;
  --label: #6B7188;

  /* ===== 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: var(--ink-3);
  --border: var(--line);
  --border-weak: var(--line-weak);
  --border-strong: var(--ink);
  --accent: var(--blue);
  --accent-hover: var(--blue-deep);
  --accent-soft: var(--blue-soft);
  --accent-fg: #FFFFFF;
  --focus-ring: 0 0 0 3px rgba(30, 94, 245, .28);
  --overlay: rgba(5, 9, 26, .55);

  /* ===== 1.5 Estado ===== */
  --ok: #22D39A;
  --ok-deep: #0F8F66;
  --ok-soft: #DFF9F0;
  --warn: #F2A21B;
  --warn-deep: #9A5E00;
  --warn-soft: #FFF3DC;
  --bad: #E5484D;
  --bad-deep: #B2242A;
  --bad-soft: #FDE7E8;
  --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-md: 15px;
  --text-sm: 13px;
  --text-xs: 12px;

  --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;

  --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);

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

/* ===== 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);
}