/* =========================================================================
   Don Topo POS — v5 Design Tokens
   "Taller Blanco Premium"
   ========================================================================= */

:root {
  color-scheme: light;

  /* —— Superficies — papel cálido —— */
  --bg: #FAF9F6;
  --bg-soft: #F3F1EC;
  --surface: #FFFFFF;
  --surface-2: #F7F6F2;
  --surface-3: #EEECE6;

  /* —— Tinta — casi negra —— */
  --ink: #14130F;
  --ink-soft: #3F3C35;
  --muted: #7A766C;

  /* —— Líneas —— */
  --line: #E8E5DC;
  --line-strong: #D4D0C4;

  /* —— CTA / activo — tinta negra —— */
  --accent: #1A1915;
  --accent-strong: #000000;
  --accent-soft: rgba(20, 19, 15, 0.06);
  --accent-ink: #FFFFFF;

  /* —— Marca — ámbar (solo hairline / marca) —— */
  --gold: #B8860B;
  --gold-strong: #9A7209;
  --gold-soft: #F8F1DF;

  /* —— Semántica —— */
  --ok: #0B7A4B;
  --ok-soft: #E6F4EE;
  --warn: #A85F0A;
  --warn-soft: #FBEFDC;
  --danger: #C8322B;
  --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(20, 19, 15, 0.05);
  --shadow-lift: 0 18px 44px -18px rgba(20, 19, 15, 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;

  /* —— Tipografía —— */
  --font: "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", system-ui, -apple-system, Arial, sans-serif;
  --display: "Bahnschrift", "Segoe UI Variable Display", "Segoe UI Semibold", "Arial Narrow", 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 —— */
  --linen:
    radial-gradient(ellipse 68% 42% at 10% -6%, rgba(184, 134, 11, 0.045), transparent 55%),
    radial-gradient(ellipse 50% 35% at 96% 0%, rgba(20, 19, 15, 0.02), transparent 50%),
    linear-gradient(180deg, #FCFBFA 0%, var(--bg) 42%, #F5F3EE 100%);

  --scrim: rgba(20, 19, 15, 0.46);
  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px rgba(20, 19, 15, 0.55);
  --focus-ring-gold: 0 0 0 2px var(--surface), 0 0 0 4px rgba(184, 134, 11, 0.35);

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