/**
 * KioskTrx Design System — Figma redesign tokens
 */

:root {
  --kiosk-font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Brand — lime palette (sampled from Figma) */
  --kiosk-bg: #dbff93;
  --kiosk-bg-soft: #e8ffb8;
  --kiosk-bg-accent: #c8f06e;
  --kiosk-brand: #111827;
  --kiosk-brand-hover: #374151;
  --kiosk-accent: #dbff93;

  /* Surfaces */
  --kiosk-card-bg: #ffffff;
  --kiosk-card-radius: 24px;
  --kiosk-card-shadow: 0 20px 40px rgba(17, 24, 39, 0.1);

  /* Text */
  --kiosk-text-primary: #111827;
  --kiosk-text-secondary: #6b7280;
  --kiosk-text-muted: #9ca3af;

  /* Form */
  --kiosk-input-bg: #ffffff;
  --kiosk-input-border: #e5e7eb;
  --kiosk-input-border-hover: #d1d5db;
  --kiosk-input-focus: #111827;
  --kiosk-input-radius: 12px;
  --kiosk-input-height: 48px;

  /* States */
  --kiosk-error: #ef4444;
  --kiosk-error-bg: rgba(239, 68, 68, 0.06);

  /* Admin shell (Figma dashboard) */
  --admin-sidebar-bg: #111827;
  --admin-sidebar-bg-subtle: #1f2937;
  --admin-sidebar-text: #f9fafb;
  --admin-sidebar-text-inactive-icon: #9ca3af;
  --admin-sidebar-text-active: #111827;
  --admin-sidebar-hover: rgba(219, 255, 147, 0.12);
  --admin-sidebar-active-bg: #dbff93;
  --admin-sidebar-accent: #dbff93;
  --admin-sidebar-accent-soft: rgba(219, 255, 147, 0.2);
  --admin-sidebar-hover-sub: rgba(219, 255, 147, 0.08);
  --admin-sidebar-sub-bg: rgba(0, 0, 0, 0.2);
  --admin-sidebar-sub-text: #d1d5db;
  --admin-topbar-bg: #ffffff;
  --admin-topbar-border: #e5e7eb;
  --admin-body-bg: #f3f4f6;
  --admin-card-bg: #ffffff;
  --admin-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  --admin-card-radius: 16px;
  --admin-primary: #111827;
  --admin-primary-hover: #374151;
  --admin-primary-soft: rgba(219, 255, 147, 0.35);
  --admin-font: var(--kiosk-font);
  --admin-sidebar-width: 260px;
  --admin-topbar-height: 64px;

  /* Responsive */
  --kiosk-touch-min: 44px;
  --kiosk-page-padding: 1.25rem;
  --kiosk-page-padding-mobile: 1rem;
}

/* Shared responsive helpers for all KioskTrx pages */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  font-family: var(--kiosk-font);
}

button,
input,
select,
textarea,
.btn,
.form-control,
.dropdown-menu,
.table,
.dataTables_wrapper,
.tooltip,
.popover,
.modal,
.toastr {
  font-family: inherit;
}

img,
svg {
  max-width: 100%;
  height: auto;
}

@media (max-width: 767px) {
  :root {
    --kiosk-input-height: 52px;
  }
}

@media (max-width: 480px) {
  :root {
    --kiosk-page-padding: var(--kiosk-page-padding-mobile);
    --kiosk-input-height: 48px;
  }
}