/* =========================================================
   KMS FRONTEND DESIGN TOKENS
   Purpose:
   Central source for spacing, colors, typography, radius,
   shadows, layout sizes and responsive breakpoints.
========================================================= */

:root {
  /* ================= Typography ================= */
  --kms-font-family-base: "Poppins", Arial, sans-serif;

  --kms-font-size-10: 10px;
  --kms-font-size-11: 11px;
  --kms-font-size-12: 12px;
  --kms-font-size-13: 13px;
  --kms-font-size-14: 14px;
  --kms-font-size-15: 15px;
  --kms-font-size-16: 16px;
  --kms-font-size-18: 18px;
  --kms-font-size-20: 20px;
  --kms-font-size-24: 24px;
  --kms-font-size-30: 30px;

  --kms-font-weight-regular: 400;
  --kms-font-weight-medium: 500;
  --kms-font-weight-semibold: 600;
  --kms-font-weight-bold: 700;
  --kms-font-weight-extrabold: 800;
  --kms-font-weight-black: 900;

  --kms-line-height-tight: 1.2;
  --kms-line-height-normal: 1.5;
  --kms-line-height-relaxed: 1.65;

  /* ================= Color Palette ================= */
  --kms-color-white: #ffffff;
  --kms-color-black: #000000;

  --kms-color-slate-50: #f8fafc;
  --kms-color-slate-100: #f1f5f9;
  --kms-color-slate-200: #e2e8f0;
  --kms-color-slate-300: #cbd5e1;
  --kms-color-slate-400: #94a3b8;
  --kms-color-slate-500: #64748b;
  --kms-color-slate-600: #475569;
  --kms-color-slate-700: #334155;
  --kms-color-slate-800: #1e293b;
  --kms-color-slate-900: #0f172a;
  --kms-color-slate-950: #020617;

  --kms-color-blue-50: #eff6ff;
  --kms-color-blue-100: #dbeafe;
  --kms-color-blue-300: #93c5fd;
  --kms-color-blue-600: #2563eb;
  --kms-color-blue-700: #1d4ed8;
  --kms-color-blue-800: #1e40af;
  --kms-color-blue-900: #1e3a8a;

  --kms-color-cyan-600: #0891b2;
  --kms-color-teal-700: #0f766e;

  --kms-color-green-50: #f0fdf4;
  --kms-color-green-100: #dcfce7;
  --kms-color-green-600: #16a34a;
  --kms-color-green-700: #15803d;
  --kms-color-green-800: #166534;

  --kms-color-amber-50: #fffbeb;
  --kms-color-amber-100: #fef3c7;
  --kms-color-amber-400: #fbbf24;
  --kms-color-amber-600: #d97706;
  --kms-color-amber-700: #b45309;

  --kms-color-red-50: #fef2f2;
  --kms-color-red-100: #fee2e2;
  --kms-color-red-600: #dc2626;
  --kms-color-red-700: #b91c1c;

  --kms-color-purple-50: #faf5ff;
  --kms-color-purple-100: #ede9fe;
  --kms-color-purple-700: #6d28d9;

  --kms-color-orange-50: #fff7ed;
  --kms-color-orange-100: #ffedd5;
  --kms-color-orange-700: #c2410c;

  /* ================= Semantic Colors ================= */
  --kms-color-primary: var(--kms-color-blue-800);
  --kms-color-primary-hover: var(--kms-color-blue-700);
  --kms-color-primary-soft: var(--kms-color-blue-50);
  --kms-color-primary-text: #172554;

  --kms-color-success: var(--kms-color-green-700);
  --kms-color-success-soft: var(--kms-color-green-100);

  --kms-color-warning: var(--kms-color-amber-600);
  --kms-color-warning-soft: var(--kms-color-amber-50);

  --kms-color-danger: var(--kms-color-red-600);
  --kms-color-danger-soft: var(--kms-color-red-50);

  --kms-color-info: var(--kms-color-blue-600);
  --kms-color-info-soft: var(--kms-color-blue-50);

  /* ================= App Surfaces ================= */
  --kms-bg-body: #eef3f8;
  --kms-bg-content: #f6f8fb;
  --kms-bg-card: var(--kms-color-white);
  --kms-bg-card-soft: var(--kms-color-slate-50);
  --kms-bg-surface: var(--kms-color-slate-100);

  --kms-text-main: var(--kms-color-slate-700);
  --kms-text-soft: var(--kms-color-slate-500);
  --kms-text-dark: var(--kms-color-slate-900);
  --kms-text-strong: #172033;

  --kms-border-soft: #edf2f7;
  --kms-border: #dbe4ee;
  --kms-border-strong: var(--kms-color-slate-300);

  /* ================= Spacing ================= */
  --kms-space-0: 0;
  --kms-space-1: 4px;
  --kms-space-2: 8px;
  --kms-space-3: 12px;
  --kms-space-4: 16px;
  --kms-space-5: 20px;
  --kms-space-6: 24px;
  --kms-space-7: 28px;
  --kms-space-8: 32px;
  --kms-space-10: 40px;
  --kms-space-12: 48px;

  /* ================= Radius ================= */
  --kms-radius-xs: 6px;
  --kms-radius-sm: 8px;
  --kms-radius-md: 10px;
  --kms-radius-lg: 12px;
  --kms-radius-xl: 16px;
  --kms-radius-2xl: 20px;
  --kms-radius-3xl: 24px;
  --kms-radius-pill: 999px;

  /* ================= Shadows ================= */
  --kms-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06);
  --kms-shadow-sm: 0 4px 12px rgba(15, 23, 42, 0.06);
  --kms-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
  --kms-shadow-lg: 0 14px 34px rgba(15, 23, 42, 0.10);
  --kms-shadow-xl: 0 20px 48px rgba(15, 23, 42, 0.14);
  --kms-shadow-modal: 0 30px 90px rgba(15, 23, 42, 0.28);

  --kms-focus-ring: 0 0 0 4px rgba(37, 99, 235, 0.14);

  /* ================= Layout Sizes ================= */
  --kms-header-height: 64px;
  --kms-sidebar-width: 236px;
  --kms-sidebar-width-collapsed: 76px;
  --kms-content-padding: 24px;
  --kms-page-max-width: 100%;

  /* ================= Component Sizes ================= */
  --kms-button-height-sm: 34px;
  --kms-button-height-md: 40px;
  --kms-button-height-lg: 44px;

  --kms-input-height-sm: 34px;
  --kms-input-height-md: 40px;
  --kms-input-height-lg: 46px;

  --kms-table-row-height-compact: 38px;
  --kms-table-row-height-comfortable: 48px;
  --kms-table-row-height-spacious: 58px;

  --kms-card-padding-compact: 14px;
  --kms-card-padding-comfortable: 20px;
  --kms-card-padding-spacious: 28px;

  /* ================= Z Index ================= */
  --kms-z-base: 1;
  --kms-z-table-header: 2;
  --kms-z-sidebar: 900;
  --kms-z-header: 1000;
  --kms-z-dropdown: 1200;
  --kms-z-overlay: 5000;
  --kms-z-modal: 6000;
  --kms-z-toast: 7000;

  /* ================= Breakpoints ================= */
  --kms-breakpoint-sm: 640px;
  --kms-breakpoint-md: 768px;
  --kms-breakpoint-lg: 1100px;
  --kms-breakpoint-xl: 1400px;
  --kms-breakpoint-2xl: 1500px;
}