/* =========================================================================
   Don Topo POS — v5 Design Tokens
   Don Topo · Productos Manabitas
   Una sola sans de trabajo (Segoe). El logo vive en el SVG.
   ========================================================================= */

:root {
  color-scheme: light;

  /* —— Un solo papel. Las tarjetas siguen blancas. —— */
  --bg: #F6F1E4;
  --bg-soft: #EFE6D4;
  --surface: #FFFFFF;
  --surface-2: #EFE6D4;
  --surface-3: #E6DCC8;

  /* —— Tinta —— */
  --ink: #1A100C;
  --ink-soft: #3F322C;
  --muted: #7A6E64;

  /* —— Líneas —— */
  --line: #EDE3CC;
  --line-strong: #D9CBA8;

  /* —— CTA / activo — marrón marca —— */
  --accent: #450e00;
  --accent-strong: #2e0900;
  --accent-soft: rgba(69, 14, 0, 0.08);
  --accent-ink: #FFFFFF;

  /* —— Marca Don Topo (manual jelf) —— */
  --brand-brown: #450e00;
  --brand-cream: #fff1c4;
  --brand-peach: #fdd7a2;
  --brand-green: #006428;
  --brand-green-bright: #27a739;
  --brand-red: #e30613;
  --brand-yellow: #ffce44;
  --brand-gold: #e6a520;

  /* —— Marca — oro (hairline / kickers) —— */
  --gold: var(--brand-gold);
  --gold-strong: #c48a12;
  --gold-soft: #F8F1DF;

  /* —— Semántica —— */
  --ok: #006428;
  --ok-soft: #E4F2EA;
  --warn: #A85F0A;
  --warn-soft: #FBEFDC;
  --danger: #e30613;
  --danger-soft: #FBE9E7;
  --info: #2F5F82;
  --info-soft: #EAF1F6;

  /* —— Radios afilados —— */
  --r-xs: 4px;
  --r-sm: 6px;
  --r: 8px;
  --r-lg: 12px;
  --r-pill: 999px;

  /* —— Sombras —— */
  --shadow: 0 1px 2px rgba(69, 14, 0, 0.06);
  --shadow-lift: 0 18px 44px -18px rgba(69, 14, 0, 0.28);

  /* —— Espaciado denso —— */
  --space-0: 4px;
  --space-1: 6px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* —— Layout —— */
  --touch: 44px;
  --rail-w: 0px;
  --topnav-h: 56px;
  --tabbar-h: 60px;
  --content-max: 1440px;

  /* —— Una sola familia. El título solo pesa más. —— */
  --font: "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", system-ui, sans-serif;
  --display: var(--font);

  /* —— Motion —— */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 140ms;
  --dur-slow: 220ms;
  --dur-enter: 180ms;

  /* —— Atmósfera: el mismo papel, sin degradado —— */
  --linen: var(--bg);

  --scrim: rgba(26, 16, 12, 0.46);
  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px rgba(69, 14, 0, 0.45);
  --focus-ring-gold: 0 0 0 2px var(--surface), 0 0 0 4px rgba(230, 165, 32, 0.4);

  --z-sticky: 30;
  --z-tabbar: 50;
  --z-fab: 45;
  --z-backdrop: 60;
  --z-drawer: 70;
  --z-modal: 85;
  --z-keypad: 95;
  --z-toast: 100;
  --z-busy: 200;
}