/* ============================================================
   QHRM V3 — SSB Portal Design Tokens
   Modern fintech • Deep Navy primary • Blazor-friendly
   ============================================================ */

:root {
  /* ---------- COLOR: Neutral scale ---------- */
  --n-0:   #ffffff;
  --n-25:  #fcfcfd;
  --n-50:  #f9fafb;
  --n-75:  #f4f5f7;
  --n-100: #eef0f3;
  --n-150: #e5e8ed;
  --n-200: #d9dde4;
  --n-300: #bac1cc;
  --n-400: #8d95a3;
  --n-500: #666e7d;
  --n-600: #4a5161;
  --n-700: #343a47;
  --n-800: #1f2430;
  --n-900: #0f1320;
  --n-950: #070a13;

  /* ---------- COLOR: Primary (Deep Navy) ---------- */
  --p-50:  #eef2ff;
  --p-100: #dae3ff;
  --p-200: #b8c7ff;
  --p-300: #8ba3f7;
  --p-400: #5b78e8;
  --p-500: #3955d1;
  --p-600: #2a3fb0;
  --p-700: #1e3a8a;  /* Brand primary */
  --p-800: #182e6b;
  --p-900: #0f1f4d;
  --p-950: #0a1535;

  /* ---------- COLOR: Semantic ---------- */
  --success-50:  #ecfdf5;
  --success-100: #d1fae5;
  --success-500: #10b981;
  --success-600: #059669;
  --success-700: #047857;

  --warning-50:  #fffbeb;
  --warning-100: #fef3c7;
  --warning-500: #f59e0b;
  --warning-600: #d97706;
  --warning-700: #b45309;

  --danger-50:  #fef2f2;
  --danger-100: #fee2e2;
  --danger-500: #ef4444;
  --danger-600: #dc2626;
  --danger-700: #b91c1c;

  --info-50:  #eff6ff;
  --info-100: #dbeafe;
  --info-500: #3b82f6;
  --info-600: #2563eb;
  --info-700: #1d4ed8;

  /* ---------- Surfaces ---------- */
  --surface-page:    var(--n-50);
  --surface-raised:  var(--n-0);
  --surface-sunken:  var(--n-75);
  --surface-hover:   var(--n-75);
  --surface-active:  var(--n-100);
  --surface-overlay: rgba(15, 19, 32, 0.48);

  /* ---------- Borders ---------- */
  --border-subtle:  var(--n-100);
  --border-default: var(--n-150);
  --border-strong:  var(--n-200);
  --border-focus:   var(--p-500);

  /* ---------- Text ---------- */
  --text-primary:   var(--n-900);
  --text-secondary: var(--n-600);
  --text-tertiary:  var(--n-500);
  --text-disabled:  var(--n-400);
  --text-inverse:   var(--n-0);
  --text-brand:     var(--p-700);

  /* ---------- Typography ---------- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Inter Display', 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
  --font-myanmar: 'Noto Sans Myanmar', 'Padauk', var(--font-sans);

  --fs-2xs: 10.5px;
  --fs-xs:  11.5px;
  --fs-sm:  12.5px;
  --fs-md:  13.5px;
  --fs-base: 14px;
  --fs-lg:  15px;
  --fs-xl:  17px;
  --fs-2xl: 20px;
  --fs-3xl: 24px;
  --fs-4xl: 30px;
  --fs-5xl: 38px;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-tight: 1.2;
  --lh-snug: 1.35;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

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

  /* ---------- Radii ---------- */
  --r-xs: 3px;
  --r-sm: 5px;
  --r-md: 7px;
  --r-lg: 10px;
  --r-xl: 14px;
  --r-2xl: 20px;
  --r-full: 9999px;

  /* ---------- Shadows ---------- */
  --shadow-xs:  0 1px 2px rgba(15, 19, 32, 0.04);
  --shadow-sm:  0 1px 2px rgba(15, 19, 32, 0.06), 0 1px 3px rgba(15, 19, 32, 0.04);
  --shadow-md:  0 4px 8px -2px rgba(15, 19, 32, 0.06), 0 2px 4px -1px rgba(15, 19, 32, 0.04);
  --shadow-lg:  0 12px 24px -6px rgba(15, 19, 32, 0.08), 0 4px 8px -2px rgba(15, 19, 32, 0.04);
  --shadow-xl:  0 24px 48px -12px rgba(15, 19, 32, 0.12), 0 8px 16px -4px rgba(15, 19, 32, 0.06);
  --shadow-focus: 0 0 0 3px rgba(30, 58, 138, 0.16);

  /* ---------- Heights (form controls) ---------- */
  --h-xs: 24px;
  --h-sm: 28px;
  --h-md: 32px;
  --h-lg: 36px;   /* Default row / input height */
  --h-xl: 40px;
  --h-2xl: 44px;

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-mid: 220ms;
  --dur-slow: 360ms;

  /* ---------- Z ---------- */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-drawer: 900;
  --z-modal: 1000;
  --z-toast: 1100;
}