/* ══ Mesio Design Tokens ═════════════════════════════════════════════
   Single source of truth. Every page imports this file.
   Mesio operates in TWO visual modes:
   1. LIGHT/OPERATIONAL — dashboard, back-of-house, forms. Warm off-white bg.
   2. DARK/MARKETING    — landing page, hero. Near-black with green glow.
   ═══════════════════════════════════════════════════════════════════ */
:root {
  /* ── Brand ── */
  --brand:          #1D9E75;
  --brand-dark:     #0F6E56;
  --brand-light:    #E1F5EE;
  --brand-bg:       #f0faf5;
  --brand-glow:     rgba(16,185,129,.35);
  --accent-violet:  #A78BFA;

  /* ── Operational surfaces (dashboard / light) ── */
  --bg:             #f5f5f0;
  --surface:        #ffffff;
  --surface-hover:  #fafaf8;
  --border:         #e0e0d8;
  --border-strong:  #c8c8c0;

  /* ── Marketing surfaces (landing / dark) ── */
  --bg-dark:        #0A0B0F;
  --surface-dark:   #12141A;
  --surface-dark-2: #171A22;
  --border-dark:    #1F2230;
  --border-dark-strong: #2A2F40;

  /* ── Text (light mode) ── */
  --text:    #111827;
  --text-2:  #4B5563;
  --text-3:  #6B7280;
  --text-4:  #9CA3AF;

  /* ── Text (dark mode) ── */
  --text-on-dark:      #F5F6F8;
  /* Contrast audit 2026-05-05:
     --text-on-dark-dim  was #9CA3AF (3.1:1 on #0a0c10 — FAIL) → #B5BEC9 (5.5:1)
     --text-on-dark-mute was #6B7280 (2.2:1 on #14171f — FAIL) → #A8B0BD (5.2:1)
     --text-on-dark-hint was #4B5563 (1.6:1 — FAIL severe)  → #8E97A6 (3.1:1 — de-emphasised non-essential text, meets 3:1 threshold) */
  --text-on-dark-dim:  #B5BEC9;
  --text-on-dark-mute: #A8B0BD;
  --text-on-dark-hint: #8E97A6;

  /* ── Operational role surfaces (topbar, KDS) ── */
  --op-dark:    #111827;
  --op-dark-2:  #1F2937;
  --op-dark-3:  #374151;
  /* legacy aliases */
  --dark: #111827;
  --dark-2: #1F2937;
  --dark-3: #374151;

  /* ── Semantic ── */
  --success:        #059669;
  --success-light:  #ECFDF5;
  --warning:        #F59E0B;
  --warning-light:  #FAEEDA;
  --warning-text:   #854F0B;
  --danger:         #EF4444;
  --danger-light:   #FEE2E2;
  --danger-text:    #991B1B;
  --info:           #3B82F6;
  --info-light:     #E6F1FB;
  --info-text:      #185FA5;
  --purple:         #7B5EA7;
  --purple-light:   #EEEDFE;
  --purple-text:    #534AB7;

  /* ── Floor plan status ── */
  --fp-libre:     #86EFAC;  --fp-libre-bg:     #F0FDF4;  --fp-libre-text:     #166534;
  --fp-sentados:  #FCD34D;  --fp-sentados-bg:  #FEF3C7;  --fp-sentados-text:  #92400E;
  --fp-ocupada:   #FCA5A5;  --fp-ocupada-bg:   #FEE2E2;  --fp-ocupada-text:   #991B1B;
  --fp-factura:   #C4B5FD;  --fp-factura-bg:   #EDE9FE;  --fp-factura-text:   #5B21B6;
  --fp-reservada: #93C5FD;  --fp-reservada-bg: #DBEAFE;  --fp-reservada-text: #1E40AF;

  /* ── Spacing (8pt grid) ── */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;  --s-9: 96px;

  /* ── Radii ── */
  --radius-sm:   8px;
  --radius:     12px;
  --radius-lg:  16px;
  --radius-xl:  20px;
  --radius-pill: 9999px;

  /* ── Shadows (light mode) ── */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.04);
  --shadow:    0 4px 12px rgba(0,0,0,0.06);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.10);
  --shadow-xl: 0 24px 64px rgba(0,0,0,0.18);

  /* ── Shadows (dark / marketing) ── */
  --shadow-hero: 0 32px 80px rgba(0,0,0,.5), 0 0 0 1px var(--border-dark);

  /* ── Transitions ── */
  --ease:      0.2s ease;
  --ease-fast: 0.15s ease;
  --ease-slow: 0.25s ease;

  /* ── Type — Families ── */
  /* Fraunces: display serif for hero H1/H2, stat numerals, big prices */
  /* Inter: body + UI throughout */
  /* System stack: dashboard chrome (sidebar, topbar, tables) */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-ui:      -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ── Type — Marketing sizes (fluid) ── */
  --h1-size:      clamp(2rem, 5vw + 0.5rem, 4rem);
  --h2-size:      clamp(1.6rem, 3vw + 0.5rem, 2.6rem);
  --h3-size:      1.15rem;
  --eyebrow-size: 0.8rem;

  /* ── Type — UI / Dashboard sizes (fixed px) ── */
  --page-title:         20px;  --page-title-weight: 600;
  --card-title:         13px;  --card-title-weight: 500; --card-title-color: var(--text-3);
  --metric-value:       26px;  --metric-value-weight: 600;
  --metric-label:       12px;  --metric-label-color: var(--text-3);
  --body:               14px;
  --body-sm:            13px;
  --caption:            12px;
  --micro:              11px;

  /* ── Line heights ── */
  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.6;
}

/* ── Accessibility: Focus ring ── */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* ── Accessibility: Screen reader only ── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── Unified button system ── */
.m-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-2); padding: 8px 16px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 600; line-height: 1.2;
  border: none; cursor: pointer;
  font-family: inherit;
  min-height: 44px; /* WCAG touch target */
  transition: background var(--ease), color var(--ease), box-shadow var(--ease);
}
.m-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.m-btn--primary { background: var(--brand); color: #fff; }
.m-btn--primary:hover:not(:disabled) { background: var(--brand-dark); }
.m-btn--secondary { background: var(--brand-light); color: var(--brand-dark); }
.m-btn--secondary:hover:not(:disabled) { background: #c8ede0; }
.m-btn--danger { background: var(--danger); color: #fff; }
.m-btn--danger:hover:not(:disabled) { background: #DC2626; }
.m-btn--ghost { background: transparent; color: var(--text-2); border: 1px solid var(--border); }
.m-btn--ghost:hover:not(:disabled) { background: var(--surface-hover); border-color: var(--border-strong); }
.m-btn--sm { padding: 6px 12px; font-size: 12px; min-height: 36px; }
.m-btn--lg { padding: 12px 24px; font-size: 15px; min-height: 48px; }

/* ── Unified modal overlay ── */
.m-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 2000;
  display: none; align-items: center; justify-content: center;
  padding: var(--s-4);
}
.m-modal-overlay.open { display: flex; }
.m-modal-box {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: 560px; width: 100%;
  max-height: 90vh; overflow-y: auto;
  padding: var(--s-5);
}
.m-modal-box h3 { font-size: 16px; font-weight: 600; margin-bottom: var(--s-4); }

/* ── Unified confirm dialog (replaces window.confirm) ── */
.m-confirm-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: var(--s-4);
}
.m-confirm-box {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  max-width: 400px; width: 100%;
  padding: var(--s-5);
  text-align: center;
}
.m-confirm-box p { color: var(--text); font-size: 14px; margin-bottom: var(--s-5); }
.m-confirm-actions { display: flex; gap: var(--s-3); justify-content: center; }

/* ── Toast notification ── */
.m-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  padding: 12px 24px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 500;
  z-index: 10000;
  animation: m-toast-in 0.3s ease;
  max-width: 90vw;
}
.m-toast--success { background: var(--brand-dark); color: #fff; }
.m-toast--error   { background: var(--danger); color: #fff; }
.m-toast--warning { background: var(--warning); color: #000; }
@keyframes m-toast-in { from { opacity: 0; transform: translateX(-50%) translateY(12px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }

/* ── Connection status badge ── */
.m-live-status { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; }
.m-live-status.online  { color: var(--brand); }
.m-live-status.offline { color: var(--warning); }
.m-live-status .dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.m-live-status.online .dot  { background: var(--brand); animation: m-pulse 2s infinite; }
.m-live-status.offline .dot { background: var(--warning); animation: m-pulse-warn 1.2s infinite; }
@keyframes m-pulse      { 0%,100%{opacity:1} 50%{opacity:.3} }
@keyframes m-pulse-warn { 0%,100%{opacity:1} 50%{opacity:.5} }

/* ── Skeleton loader ── */
.m-skeleton {
  background: linear-gradient(90deg, #e8e8e4 25%, #f0f0ec 50%, #e8e8e4 75%);
  background-size: 200% 100%;
  animation: m-shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}
@keyframes m-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ══ Semantic type classes ════════════════════════════════════════════
   Use directly on elements. Prefer CSS vars above when composing.
   ═══════════════════════════════════════════════════════════════════ */

.t-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--h1-size);
  line-height: var(--lh-tight);
}
.t-h1 em { font-style: italic; color: var(--brand); }

.t-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--h2-size);
  line-height: var(--lh-tight);
}

.t-h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--h3-size);
  line-height: var(--lh-snug);
}

.t-eyebrow {
  font-family: var(--font-body);
  font-size: var(--eyebrow-size);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--brand);
}

.t-body    { font-family: var(--font-body); font-size: var(--body);    line-height: var(--lh-normal); color: var(--text-2); }
.t-body-sm { font-family: var(--font-body); font-size: var(--body-sm); line-height: var(--lh-normal); color: var(--text-2); }
.t-caption { font-family: var(--font-body); font-size: var(--caption); color: var(--text-3); }
.t-micro   { font-family: var(--font-body); font-size: var(--micro);   color: var(--text-3); }

/* Fraunces display numerals */
.t-stat {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--brand);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.t-price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.6rem;
}

/* Tabular numerals for clocks + currency in tables */
.t-nums { font-variant-numeric: tabular-nums; }

/* ── Accessibility: Reduced motion ──────────────────────────────────
   Respects the user's OS-level "Reduce Motion" preference.
   Stops perpetual animations (m-pulse, m-shimmer, m-toast-in, etc.)
   for users with vestibular disorders, photosensitivity, or migraine
   triggers. Blanket override is the WCAG-recommended pattern.
   ─────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}