/* ══════════════════════════════════════════════════════════════
   MUTHU MEDICALS POS — REDESIGNED DESIGN SYSTEM
   Stack: HTML/CSS  |  Style: Soft UI Evolution  |  Density: Dense
   Palette: Healthcare Teal  |  Font: Figtree / Noto Sans
   ══════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand Colors (SaaS Navy/Green) ── */
  --primary:        #1E3A5F;
  --primary-hover:  #152C4A;
  --primary-light:  #F0F5FA;
  --primary-glow:   rgba(30, 58, 95, 0.15);
  --primary-border: #D1E0F0;
  --secondary:      #2563EB;
  --accent:         #059669;
  --accent-light:   #ECFDF5;
  --accent-border:  #A7F3D0;

  /* ── Backgrounds & Surfaces (Glassmorphism) ── */
  --bg-app:         #F8FAFC;
  --bg-surface:     rgba(255, 255, 255, 0.85); /* Glass base */
  --bg-elevated:    #FFFFFF;
  --bg-muted:       #F1F3F5;

  /* ── Text ── */
  --text-main:      #0F172A;
  --text-body:      #334155;
  --text-muted:     #64748B;
  --text-light:     #94A3B8;

  /* ── Borders ── */
  --border-subtle:  rgba(255, 255, 255, 0.4); /* Glass border */
  --border-focus:   #1E3A5F;
  --border-strong:  #E4E7EB;

  /* ── Semantic Colors ── */
  --danger:         #DC2626;
  --danger-light:   #FEF2F2;
  --danger-border:  #FECACA;
  --success:        #059669;
  --success-light:  #ECFDF5;
  --warning:        #D97706;
  --warning-light:  #FFFBEB;
  --warning-border: #FDE68A;

  /* ── Dark Sidebar/Counter ── */
  --dark-slate:     #0F172A;
  --dark-surface:   #1E293B;
  --dark-border:    rgba(255,255,255,0.1);

  /* ── Spacing Scale (Increased for breathing room) ── */
  --space-1:  6px;
  --space-2:  10px;
  --space-3:  14px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;

  /* ── Border Radius ── */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 20px;

  /* ── Shadows (Softer, deeper glassmorphism) ── */
  --shadow-xs: 0 1px 3px rgba(30,58,95,0.03);
  --shadow-sm: 0 4px 12px rgba(30,58,95,0.05), 0 2px 4px rgba(30,58,95,0.03);
  --shadow-md: 0 12px 24px rgba(30,58,95,0.06), 0 4px 8px rgba(30,58,95,0.04);
  --shadow-lg: 0 24px 48px rgba(30,58,95,0.08), 0 12px 16px rgba(30,58,95,0.05);
  --shadow-xl: 0 32px 64px rgba(30,58,95,0.12);
  --shadow-glow: 0 6px 20px rgba(5,150,105,0.25);

  /* ── Transitions ── */
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out:    cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --t-fast:   0.15s;
  --t-normal: 0.22s;
  --t-slow:   0.35s;

  /* ── Topbar height token (used for offset calc) ── */
  --topbar-h: 56px;
  --toolbar-h: 44px;
  --bottomnav-h: 60px; /* mobile only */
}