/* Arishma POS — Design Tokens */
:root {
  /* Brand */
  --navy: #0f2040;
  --navy-light: #162e52;
  --navy-deep: #1e3a5f;
  --teal: #0f766e;
  --teal-hover: #0b5e57;
  --teal-soft: #e6f4f1;
  --teal-bright: #2dd4bf;
  --amber: #b45309;
  --purple: #7c3aed;

  /* Semantic */
  --success: #059669;
  --danger: #b91c1c;
  --info: #2563eb;
  --warning: #b45309;

  /* Surfaces */
  --bg: #f4f6f8;
  --surface: #fff;
  --surface-2: #f8fafc;
  --surface-3: #f1f5f9;
  --ink: #0f1e33;
  --muted: #64748b;
  --faint: #94a3b8;
  --border: #e2e8f0;
  --border-light: #f1f5f9;

  /* Chart */
  --chart-bar: #0f766e;

  /* Spacing (4px base) */
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* Radii */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 20px;
  --r-pill: 999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(15,32,64,.04);
  --shadow-sm: 0 1px 3px rgba(15,32,64,.06), 0 1px 2px rgba(15,32,64,.04);
  --shadow-md: 0 4px 6px -1px rgba(15,32,64,.07), 0 2px 4px -2px rgba(15,32,64,.05);
  --shadow-lg: 0 10px 15px -3px rgba(15,32,64,.08), 0 4px 6px -4px rgba(15,32,64,.04);
  --shadow-xl: 0 20px 25px -5px rgba(15,32,64,.08), 0 8px 10px -6px rgba(15,32,64,.04);
  --shadow-ring: 0 0 0 3px rgba(15,118,110,.12);
  --shadow-ring-danger: 0 0 0 3px rgba(185,28,28,.12);

  /* Typography */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
  --text-xs: 0.6875rem;   /* 11px */
  --text-sm: 0.8125rem;   /* 13px */
  --text-base: 0.875rem;  /* 14px */
  --text-md: 0.9375rem;   /* 15px */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.375rem;    /* 22px */
  --text-2xl: 1.75rem;    /* 28px */
  --text-3xl: 2rem;       /* 32px */
  --lh-tight: 1.2;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;

  /* Transitions */
  --ease-fast: 0.15s cubic-bezier(.4,0,.2,1);
  --ease-base: 0.2s cubic-bezier(.4,0,.2,1);
  --ease-slow: 0.3s cubic-bezier(.4,0,.2,1);
  --ease-spring: 0.4s cubic-bezier(.175,.885,.32,1.275);

  /* Layout */
  --sidebar-w: 260px;
  --sidebar-collapsed-w: 68px;
  --topbar-h: 56px;
  --content-max: 1200px;
  --page-gutter: 24px;
}

/* Dark mode */
:root[data-theme="dark"] {
  --navy: #0a1628;
  --navy-light: #0f1e33;
  --navy-deep: #162e52;
  --teal: #14b8a6;
  --teal-hover: #0d9488;
  --teal-soft: #042f2e;
  --teal-bright: #2dd4bf;
  --amber: #f59e0b;

  --success: #34d399;
  --danger: #f87171;
  --info: #60a5fa;
  --warning: #f59e0b;

  --bg: #0c1222;
  --surface: #1a2332;
  --surface-2: #1e293b;
  --surface-3: #243044;
  --ink: #e2e8f0;
  --muted: #94a3b8;
  --faint: #64748b;
  --border: #2d3b4e;
  --border-light: #243044;

  --chart-bar: #14b8a6;

  --shadow-xs: 0 1px 2px rgba(0,0,0,.2);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.25);
  --shadow-md: 0 4px 6px rgba(0,0,0,.3);
  --shadow-lg: 0 10px 15px rgba(0,0,0,.35);
  --shadow-xl: 0 20px 25px rgba(0,0,0,.4);
  --shadow-ring: 0 0 0 3px rgba(20,184,166,.2);
}