/*
 * eKhata Design System — foundational design tokens
 * Keep component declarations out of this file. Components must consume these
 * semantic variables so themes can evolve without template refactoring.
 */

:root,
[data-ek-theme="light"] {
  color-scheme: light;

  /* Brand and feedback colors */
  --ek-color-primary: #d97706;
  --ek-color-primary-hover: #b45309;
  --ek-color-primary-light: #fbbf24;
  --ek-color-primary-subtle: #fffbeb;
  --ek-color-success: #16a34a;
  --ek-color-success-subtle: #f0fdf4;
  --ek-color-warning: #f59e0b;
  --ek-color-warning-subtle: #fffbeb;
  --ek-color-danger: #dc2626;
  --ek-color-danger-subtle: #fef2f2;
  --ek-color-info: #2563eb;
  --ek-color-info-subtle: #eff6ff;

  /* Neutral and surface colors */
  --ek-color-background: #f5f5f5;
  --ek-color-surface: #ffffff;
  --ek-color-surface-muted: #f9fafb;
  --ek-color-border: #e5e7eb;
  --ek-color-border-strong: #d1d5db;
  --ek-color-text-primary: #111827;
  --ek-color-text-secondary: #6b7280;
  --ek-color-text-disabled: #9ca3af;
  --ek-color-on-primary: #ffffff;
  --ek-color-overlay: rgb(17 24 39 / 55%);

  /* RGB channels support accessible alpha variants without duplicating hex. */
  --ek-color-primary-rgb: 217, 119, 6;
  --ek-color-success-rgb: 22, 163, 74;
  --ek-color-warning-rgb: 245, 158, 11;
  --ek-color-danger-rgb: 220, 38, 38;
  --ek-color-info-rgb: 37, 99, 235;
  --ek-color-text-rgb: 17, 24, 39;

  /* Typography scale */
  --ek-font-family-sans: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ek-font-family-monospace: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --ek-font-size-12: 0.75rem;
  --ek-font-size-14: 0.875rem;
  --ek-font-size-16: 1rem;
  --ek-font-size-18: 1.125rem;
  --ek-font-size-20: 1.25rem;
  --ek-font-size-24: 1.5rem;
  --ek-font-size-30: 1.875rem;
  --ek-font-size-36: 2.25rem;
  --ek-font-size-48: 3rem;
  --ek-font-weight-regular: 400;
  --ek-font-weight-medium: 500;
  --ek-font-weight-semibold: 600;
  --ek-font-weight-bold: 700;
  --ek-line-height-tight: 1.25;
  --ek-line-height-normal: 1.5;
  --ek-line-height-relaxed: 1.625;

  /* Four-pixel spacing scale */
  --ek-space-0: 0;
  --ek-space-1: 0.25rem;
  --ek-space-2: 0.5rem;
  --ek-space-3: 0.75rem;
  --ek-space-4: 1rem;
  --ek-space-5: 1.25rem;
  --ek-space-6: 1.5rem;
  --ek-space-8: 2rem;
  --ek-space-10: 2.5rem;
  --ek-space-12: 3rem;
  --ek-space-16: 4rem;

  /* Radius */
  --ek-radius-sm: 0.375rem;
  --ek-radius-md: 0.625rem;
  --ek-radius-lg: 1rem;
  --ek-radius-xl: 1.5rem;
  --ek-radius-pill: 9999px;

  /* Elevation */
  --ek-shadow-sm: 0 1px 2px rgb(17 24 39 / 6%), 0 1px 3px rgb(17 24 39 / 8%);
  --ek-shadow-md: 0 4px 6px -1px rgb(17 24 39 / 8%), 0 2px 4px -2px rgb(17 24 39 / 8%);
  --ek-shadow-lg: 0 12px 24px -8px rgb(17 24 39 / 16%), 0 4px 8px -4px rgb(17 24 39 / 8%);

  /* Focus, motion and stacking */
  --ek-focus-ring-color: rgb(var(--ek-color-primary-rgb) / 32%);
  --ek-focus-ring-width: 0.2rem;
  --ek-transition-fast: 120ms ease;
  --ek-transition-base: 200ms ease;
  --ek-transition-slow: 300ms ease;
  --ek-z-dropdown: 1000;
  --ek-z-sticky: 1020;
  --ek-z-fixed: 1030;
  --ek-z-drawer: 1040;
  --ek-z-modal: 1050;
  --ek-z-popover: 1070;
  --ek-z-tooltip: 1080;
  --ek-z-toast: 1090;

  /* Content sizing */
  --ek-content-max-width: 90rem;
  --ek-sidebar-width: 17rem;
  --ek-sidebar-collapsed-width: 4.75rem;
  --ek-topbar-height: 4rem;
  --ek-mobile-nav-height: 4rem;
}