/* Zygrix POS design tokens: Zygrix Solutions brand (zygrixsolutions.com). Use these; never hard-code colours. */

@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/poppins-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/poppins-700.woff2") format("woff2"); }

:root {
  /* Brand */
  --z-primary: #055a87;
  --z-primary-600: #04496e;
  --z-primary-400: #0674ad;
  --z-primary-50: #e3f6fe;
  --z-primary-rgb: 5, 90, 135;
  --z-navy: #061e41;
  --z-navy-2: #012664;
  --z-dark: #0a1633;
  --z-glow: #7afcff;
  --z-gradient: linear-gradient(120deg, #00284f 0%, #055a87 50%, #0674ad 78%, #7afcff 100%);
  --z-btn-gradient: linear-gradient(120deg, #012664, #055a87 70%);
  --z-sidebar-bg: linear-gradient(180deg, #061e41 0%, #0a1633 100%);

  /* Charts: brand-led categorical palette */
  --z-chart-1: #055a87; --z-chart-2: #3aa0d8; --z-chart-3: #f2a33a; --z-chart-4: #1f9d74;
  --z-chart-5: #7c5cc4; --z-chart-6: #d9534f; --z-chart-7: #8a9bb0; --z-chart-8: #0b8fa8;

  /* Shell (light) */
  --z-side-bg: #ffffff; --z-side-text: #31415c; --z-side-muted: #8796ad; --z-side-hover: #f1f5f9;
  --z-side-active-bg: #e8f2f8; --z-side-active: #055a87; --z-side-border: #e5eaf0;

  /* Semantic */
  --z-success: #16a34a; --z-success-50: #dcfce7;
  --z-warning: #d97706; --z-warning-50: #fef3c7;
  --z-danger: #dc2626;  --z-danger-50: #fee2e2;
  --z-info: #0674ad;    --z-info-50: #e3f6fe;

  /* Neutrals */
  --z-bg: #f4f6f9;
  --z-surface: #ffffff;
  --z-surface-2: #f8fbfe;
  --z-border: rgba(6, 30, 65, 0.1);
  --z-border-strong: rgba(5, 90, 135, 0.28);
  --z-text: #061e41;
  --z-muted: #3d5273;
  --z-subtle: #6b7f99;

  /* Typography */
  --z-font: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --z-font-ur: "Noto Nastaliq Urdu", serif;
  --z-fs-xs: 0.75rem; --z-fs-sm: 0.875rem; --z-fs-md: 1rem; --z-fs-lg: 1.25rem; --z-fs-xl: 1.75rem;

  /* Shape & depth */
  --z-radius-sm: 6px;
  --z-radius: 10px;
  --z-radius-pill: 999px;
  --z-shadow-sm: 0 1px 2px rgba(1, 38, 100, 0.06);
  --z-shadow: 0 8px 24px rgba(1, 38, 100, 0.08);
  --z-shadow-btn: none;

  /* Spacing */
  --z-space-1: 4px; --z-space-2: 8px; --z-space-3: 12px; --z-space-4: 16px; --z-space-5: 24px; --z-space-6: 32px;

  /* Layout */
  --z-sidebar-w: 232px;
  --z-sidebar-w-collapsed: 64px;
  --z-topbar-h: 54px;
  --z-bottomnav-h: 58px;

  /* Motion */
  --z-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --z-dur: 160ms;

  /* Bootstrap 5.3 mapping */
  --bs-primary: var(--z-primary);
  --bs-primary-rgb: var(--z-primary-rgb);
  --bs-body-font-family: var(--z-font);
  --bs-body-color: var(--z-text);
  --bs-body-bg: var(--z-bg);
  --bs-border-color: var(--z-border);
  --bs-border-radius: var(--z-radius-sm);
  --bs-link-color: var(--z-primary);
  --bs-link-color-rgb: var(--z-primary-rgb);
  --bs-link-hover-color: var(--z-primary-400);
  --bs-focus-ring-color: rgba(5, 90, 135, 0.25);
}

[data-theme="dark"] {
  --z-bg: #08122a;
  --z-surface: #0e1d3d;
  --z-surface-2: #122449;
  --z-border: rgba(255, 255, 255, 0.09);
  --z-border-strong: rgba(122, 200, 255, 0.28);
  --z-text: #e6eef8;
  --z-muted: #a3b5cc;
  --z-subtle: #7f94b0;
  --z-primary-50: rgba(6, 116, 173, 0.18);
  --z-success-50: rgba(22, 163, 74, 0.16);
  --z-warning-50: rgba(217, 119, 6, 0.16);
  --z-danger-50: rgba(220, 38, 38, 0.16);
  --z-info-50: rgba(6, 116, 173, 0.18);
  --z-shadow-sm: none;
  --z-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  --bs-body-color: var(--z-text);
  --bs-body-bg: var(--z-bg);
  --bs-border-color: var(--z-border);
  --bs-secondary-color: var(--z-muted);
  --bs-tertiary-bg: var(--z-surface-2);
  --z-chart-1: #4fa8d8; --z-chart-2: #8fd0f2; --z-chart-3: #f2b25a; --z-chart-4: #3cc39a;
  --z-chart-5: #a58be0; --z-chart-6: #ef7672; --z-chart-7: #9fb0c6; --z-chart-8: #33b6cc;
  --z-side-bg: #0b1730; --z-side-text: #c8d6e8; --z-side-muted: #7085a3; --z-side-hover: rgba(255,255,255,.05);
  --z-side-active-bg: rgba(79,168,216,.16); --z-side-active: #8fd0f2; --z-side-border: rgba(255,255,255,.07);
  --bs-link-color: #6cc4f5;
  --bs-link-color-rgb: 108, 196, 245;
  --bs-link-hover-color-rgb: 154, 216, 250;
  --bs-link-hover-color: #9ad8fa;
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root { --z-dur: 0ms; }
}