/* Tokens do design system DYNNE (Mesa PDV) — copiados do template 'DYNNE ERP - Azul'. Não editar à mão: ajustes de tema vão em app.css. */
/* ============================================================
   Mesa PDV — design tokens
   Import this file in any HTML artifact that uses the system.
   ============================================================ */

/* Fonte Sora carregada via <link> no layout. */

:root {
  /* ---------- color: navy base ---------- */
  --navy-950: #070C1A;
  --navy-900: #0C1428;
  --navy-800: #131F3D;
  --navy-700: #1C2C53;
  --navy-600: #243869;
  --navy-500: #34508F;

  /* ---------- color: azul (primary) — extraído da imagem ---------- */
  --cyan-300: #5FD8FF;
  --cyan-400: #16BEF2;
  --cyan-500: #0894C6;
  --cyan-600: #0A78A0;

  /* ---------- color: neon accents ---------- */
  --neon-green:   #39FF8B;
  --neon-green-2: #15C26E; /* lower-energy variant for fills */
  --neon-magenta: #FF4D3D;  /* vermelho da caneta */
  --neon-magenta-2:#E0352A;

  /* ---------- color: status ---------- */
  --amber-400: #FBBF24;
  --red-500:   #F43F5E;
  --violet-400:#A78BFA;

  /* ---------- color: foreground ---------- */
  --fg-1: #F1F5FF;  /* primary text */
  --fg-2: #9AA8C7;  /* secondary text */
  --fg-3: #586484;  /* tertiary / disabled */
  --fg-on-cyan: #07182A;
  --fg-on-neon: #051A0E;

  /* ---------- semantic ---------- */
  --bg:           var(--navy-950);
  --surface:      var(--navy-900);
  --surface-2:    var(--navy-800);
  --surface-3:    var(--navy-700);
  --border:       var(--navy-700);
  --border-soft:  var(--navy-800);
  --accent:       var(--cyan-400);
  --accent-hover: var(--cyan-300);
  --accent-press: var(--cyan-500);
  --ok:           var(--neon-green);
  --warn:         var(--amber-400);
  --danger:       var(--neon-magenta);
  --live:         var(--neon-magenta);

  /* ---------- table-status palette ---------- */
  --status-livre:    var(--neon-green);
  --status-ocupada:  var(--cyan-400);
  --status-conta:    var(--amber-400);
  --status-reserva:  var(--violet-400);
  --status-suja:     var(--fg-3);

  /* ---------- papéis de pessoa (mesma cor em todo o sistema) ---------- */
  --papel-cliente:        var(--accent);
  --papel-fornecedor:     var(--amber-400);
  --papel-transportadora: var(--violet-400);
  --status-atrasada: var(--neon-magenta);

  /* ---------- spacing scale (4px base) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ---------- radii ---------- */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* ---------- borders ---------- */
  --bw-1: 1px;
  --bw-2: 1.5px;
  --bw-3: 2px;

  /* ---------- shadows ---------- */
  --shadow-1: 0 1px 0 0 rgba(255,255,255,0.04) inset,
              0 8px 24px -12px rgba(0,0,0,0.55),
              0 2px 4px -2px rgba(0,0,0,0.4);
  --shadow-2: 0 1px 0 0 rgba(255,255,255,0.05) inset,
              0 18px 40px -16px rgba(0,0,0,0.65),
              0 4px 10px -4px rgba(0,0,0,0.5);
  --shadow-3: 0 1px 0 0 rgba(255,255,255,0.06) inset,
              0 32px 60px -20px rgba(0,0,0,0.75),
              0 8px 18px -8px rgba(0,0,0,0.55);

  /* ---------- glows ---------- */
  --glow-cyan:    0 0 24px 0 rgba(22, 190, 242, 0.35);
  --glow-cyan-sm: 0 0 12px 0 rgba(22, 190, 242, 0.45);
  --glow-green:   0 0 24px 0 rgba(57, 255, 139, 0.35);
  --glow-magenta: 0 0 24px 0 rgba(255, 77, 61, 0.45);
  --glow-amber:   0 0 18px 0 rgba(251, 191, 36, 0.35);

  /* ---------- rims (the 1px lit-from-above highlight) ---------- */

  /* ---------- motion ---------- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in:  cubic-bezier(0.6, 0, 0.8, 0.2);
  --dur-1: 120ms;
  --dur-2: 180ms;
  --dur-3: 240ms;

  /* ---------- typography ---------- */
  --font-sans: 'Sora', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Sora', ui-monospace, 'SF Mono', Menlo, monospace; /* Sora has tabular-nums */

  /* type scale */
  --fs-display:  48px;  --lh-display:  1.04; --tr-display:  -0.02em; --fw-display:  700;
  --fs-h1:       32px;  --lh-h1:       1.12; --tr-h1:       -0.015em;--fw-h1:       700;
  --fs-h2:       24px;  --lh-h2:       1.2;  --tr-h2:       -0.01em; --fw-h2:       600;
  --fs-h3:       18px;  --lh-h3:       1.3;  --tr-h3:       -0.005em;--fw-h3:       600;
  --fs-body:     14px;  --lh-body:     1.5;  --tr-body:     0;       --fw-body:     400;
  --fs-body-lg:  16px;  --lh-body-lg:  1.5;  --tr-body-lg:  0;       --fw-body-lg:  400;
  --fs-label:    12px;  --lh-label:    1.3;  --tr-label:    0.02em;  --fw-label:    500;
  --fs-overline: 11px;  --lh-overline: 1.2;  --tr-overline: 0.08em;  --fw-overline: 600;
  --fs-num-xl:   72px;  --lh-num-xl:   1.0;  --tr-num-xl:   -0.03em; --fw-num-xl:   800;
  --fs-num-lg:   40px;  --lh-num-lg:   1.05; --tr-num-lg:   -0.02em; --fw-num-lg:   700;

  /* ---------- focus ring ---------- */
  --ring: 0 0 0 3px rgba(22, 190, 242, 0.35);

  /* ---------- layout ---------- */
  --rail-collapsed: 72px;
  --rail-expanded: 224px;
  --topbar-h: 56px;
  --inspector-w: 360px;

  /* ---------- campos de formulário: UMA borda, fundo próprio e estados (repouso, hover, foco, desabilitado) ----------
     O foco troca a cor da borda e clareia o fundo; não há anel extra (evita a "borda dupla"). */
  --field-bg: var(--navy-950);
  --field-bg-hover: color-mix(in oklab, var(--navy-950) 92%, white);
  --field-bg-focus: color-mix(in oklab, var(--navy-950) 88%, var(--accent));
  --field-bg-error: color-mix(in oklab, var(--navy-950) 88%, var(--danger));
  --field-border: var(--border);
  --field-border-hover: color-mix(in oklab, var(--border) 55%, var(--fg-3));
  --field-bg-disabled: color-mix(in oklab, var(--navy-950) 70%, var(--surface-2));
  --field-fg-disabled: var(--fg-3);
}

[data-theme="light"] {
  --field-bg: #FFFFFF;
  --field-bg-hover: #FFFFFF;
  --field-bg-focus: #E9F5FB;
  --field-bg-error: #FDF0EF;
  --field-border: #D6DEEA;
  --field-border-hover: #B9C6D8;
  --field-bg-disabled: #E9EDF3;
  --field-fg-disabled: #8A97AB;
}

/* ============================================================
   LIGHT THEME — set data-theme="light" on <html> to activate.
   Dark stays the default; light is a calmer companion mode.
   ============================================================ */
[data-theme="light"] {
  /* surfaces — cinza-lavanda da imagem */
  --bg:          #ECEDF1;
  --surface:     #FFFFFF;
  --surface-2:   #F7F8FB;
  --surface-3:   #EBEDF3;
  --border:      #DCDFE8;
  --border-soft: #E9EBF1;

  /* foregrounds — azul-marinho profundo da imagem */
  --fg-1: #14274A;
  --fg-2: #51607C;
  --fg-3: #5F6C84;  /* ≥4.5:1 em branco, surface-2 e no fundo da página (auditoria 2026-10-14; era #93A0B5) */
  --fg-placeholder: #93A0B5; /* exemplo dentro do campo continua claro para não parecer valor digitado */
  --fg-on-cyan: #FFFFFF;
  --fg-on-neon: #FFFFFF;

  /* accent — azul vivo, legível sobre branco */
  --accent:       #0796C4;
  --accent-hover: #0884AD;
  --accent-press: #066E93;

  /* vermelho da caneta + verde/âmbar ajustados para o claro */
  --neon-green:    #15803D;
  --neon-green-2:  #16A34A;
  --neon-magenta:  #DC2F22;
  --neon-magenta-2:#B61D12;
  --amber-400:     #B45309;
  --violet-400:    #7C3AED;

  --ok:    var(--neon-green);
  --warn:  var(--amber-400);
  --danger:var(--neon-magenta);
  --live:  var(--neon-magenta);

  --status-livre:    var(--neon-green);
  --status-ocupada:  var(--accent);
  --status-conta:    var(--amber-400);
  --status-reserva:  var(--violet-400);
  --status-suja:     #B0BACE;
  --status-atrasada: var(--neon-magenta);

  /* shadows softer + lifted */
  --shadow-1: 0 1px 0 0 rgba(255,255,255,0.7) inset,
              0 4px 14px -6px rgba(13, 32, 71, 0.12),
              0 1px 3px -1px rgba(13, 32, 71, 0.08);
  --shadow-2: 0 1px 0 0 rgba(255,255,255,0.7) inset,
              0 14px 30px -12px rgba(13, 32, 71, 0.18),
              0 4px 10px -4px rgba(13, 32, 71, 0.1);
  --shadow-3: 0 1px 0 0 rgba(255,255,255,0.8) inset,
              0 28px 56px -18px rgba(13, 32, 71, 0.22),
              0 10px 22px -10px rgba(13, 32, 71, 0.14);

  --glow-cyan:    0 0 18px 0 rgba(7, 150, 196, 0.25);
  --glow-cyan-sm: 0 0 10px 0 rgba(7, 150, 196, 0.3);
  --glow-green:   0 0 18px 0 rgba(21, 128, 61, 0.22);
  --glow-magenta: 0 0 18px 0 rgba(220, 47, 34, 0.3);
  --glow-amber:   0 0 14px 0 rgba(180, 83, 9, 0.22);

  --ring: 0 0 0 3px rgba(7, 150, 196, 0.22);
}

/* ============================================================
   Element defaults — opt-in via class="ds" on a wrapper, OR
   apply these rules globally if you control the whole page.
   ============================================================ */
html, body {
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-feature-settings: 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--tr-h1);
  font-weight: var(--fw-h1);
  color: var(--fg-1);
  margin: 0;
}

h2, .h2 {
  font-size: var(--fs-h2); line-height: var(--lh-h2);
  letter-spacing: var(--tr-h2); font-weight: var(--fw-h2);
  color: var(--fg-1); margin: 0;
}

h3, .h3 {
  font-size: var(--fs-h3); line-height: var(--lh-h3);
  letter-spacing: var(--tr-h3); font-weight: var(--fw-h3);
  color: var(--fg-1); margin: 0;
}

p, .p {
  font-size: var(--fs-body); line-height: var(--lh-body);
  color: var(--fg-2); margin: 0;
}

.display {
  font-size: var(--fs-display); line-height: var(--lh-display);
  letter-spacing: var(--tr-display); font-weight: var(--fw-display);
  color: var(--fg-1);
}
.num-xl {
  font-size: var(--fs-num-xl); line-height: var(--lh-num-xl);
  letter-spacing: var(--tr-num-xl); font-weight: var(--fw-num-xl);
  font-variant-numeric: tabular-nums;
}
.num-lg {
  font-size: var(--fs-num-lg); line-height: var(--lh-num-lg);
  letter-spacing: var(--tr-num-lg); font-weight: var(--fw-num-lg);
  font-variant-numeric: tabular-nums;
}
.label {
  font-size: var(--fs-label); line-height: var(--lh-label);
  letter-spacing: var(--tr-label); font-weight: var(--fw-label);
  color: var(--fg-2);
}
.overline {
  font-size: var(--fs-overline); line-height: var(--lh-overline);
  letter-spacing: var(--tr-overline); font-weight: var(--fw-overline);
  color: var(--fg-3); text-transform: uppercase;
}

/* tabular numerics for any element containing money/counts */
.num, .tabular { font-variant-numeric: tabular-nums; }

/* ============================================================
   Utility classes used across previews and UI kits
   ============================================================ */
.card {
  background: var(--surface-2);
  border: var(--bw-1) solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
  position: relative;
}

.btn {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 600;
  letter-spacing: -0.005em;
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 10px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--fg-1);
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-out),
              color var(--dur-1) var(--ease-out),
              transform var(--dur-1) var(--ease-out),
              box-shadow var(--dur-1) var(--ease-out);
}
.btn:hover { background: color-mix(in oklab, var(--surface-2) 88%, white); }
.btn:active { transform: scale(0.97); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }

.btn-primary {
  background: var(--accent);
  color: var(--fg-on-cyan);
  border-color: transparent;
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:active { background: var(--accent-press); }

.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--fg-2);
}
.btn-ghost:hover { color: var(--fg-1); background: color-mix(in oklab, var(--surface) 80%, white); }

.btn-danger {
  background: var(--neon-magenta);
  color: white; border-color: transparent;
}

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-label);
  font-weight: 500;
  background: var(--surface-3);
  color: var(--fg-1);
  border: 1px solid transparent;
}
.chip-livre   { color: var(--status-livre);   background: color-mix(in oklab, var(--status-livre) 12%, var(--surface-2)); }
.chip-ocupada { color: var(--status-ocupada); background: color-mix(in oklab, var(--status-ocupada) 12%, var(--surface-2)); }
.chip-conta   { color: var(--status-conta);   background: color-mix(in oklab, var(--status-conta) 12%, var(--surface-2)); }
.chip-reserva { color: var(--status-reserva); background: color-mix(in oklab, var(--status-reserva) 12%, var(--surface-2)); }
.chip-atrasada{ color: var(--status-atrasada);background: color-mix(in oklab, var(--status-atrasada) 12%, var(--surface-2)); }

.input {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 20px;               /* altura de linha fixa: o texto fica centrado em qualquer fonte/navegador */
  color: var(--fg-1);
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: var(--radius-md);
  padding: 9px 12px;               /* 9 + 20 + 9 + 2×1 de borda = 40px */
  outline: none;
  -webkit-appearance: none; appearance: none; /* type=search/date não ganham o visual nativo do navegador */
  transition: border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
}
.input:hover { border-color: var(--field-border-hover); background-color: var(--field-bg-hover); }
/* Foco = borda de 2px desenhada por dentro (sombra interna): nada muda de tamanho nem de lugar, em qualquer zoom. */
.input:focus, .input:focus:hover { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background-color: var(--field-bg-focus); }
.input::placeholder { color: var(--fg-placeholder, var(--fg-3)); opacity: 1; }
.input:disabled {
  background-color: var(--field-bg-disabled); color: var(--field-fg-disabled); border-color: var(--field-border);
  border-style: dashed; cursor: not-allowed; -webkit-text-fill-color: var(--field-fg-disabled);
}
/* Formulário só de consulta (sem permissão de alterar): o dado tem de ser legível; a borda tracejada diz "não editável". */
fieldset:disabled .req { display: none; } /* consulta: "obrigatório" não diz nada a quem não pode editar */
fieldset:disabled .input {
  background-color: var(--surface-2); color: var(--fg-1); border-color: var(--field-border);
  border-style: dashed; cursor: default; -webkit-text-fill-color: var(--fg-1); opacity: 1;
}
.input[readonly]:not(:disabled) { background-color: transparent; color: var(--fg-2); border-style: dashed; cursor: default; }
.input[readonly]:focus { border-style: solid; }
.input::-webkit-search-cancel-button { cursor: pointer; }

/* pulse animation reserved for live state */
@keyframes mesa-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}
.live-dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--live);
  box-shadow: var(--glow-magenta);
  animation: mesa-pulse 1.2s ease-in-out infinite;
}