/**
 * Design Tokens - Adiuta Application
 *
 * This file contains all design system tokens including:
 * - Spacing scale
 * - Typography scale
 * - Font weights
 * - Border radius
 * - Shadows
 * - Transitions
 *
 * These tokens provide consistency across the application and make
 * it easier to maintain and update the design system.
 */

:root {
  /* ========================================
   * Spacing Scale
   * Base unit: 4px (0.25rem)
   * ======================================== */
  --spacing-unit: 0.25rem;
  --space-0: 0;
  --space-1: calc(var(--spacing-unit) * 1);   /* 4px */
  --space-2: calc(var(--spacing-unit) * 2);   /* 8px */
  --space-3: calc(var(--spacing-unit) * 3);   /* 12px */
  --space-4: calc(var(--spacing-unit) * 4);   /* 16px */
  --space-5: calc(var(--spacing-unit) * 5);   /* 20px */
  --space-6: calc(var(--spacing-unit) * 6);   /* 24px */
  --space-8: calc(var(--spacing-unit) * 8);   /* 32px */
  --space-10: calc(var(--spacing-unit) * 10); /* 40px */
  --space-12: calc(var(--spacing-unit) * 12); /* 48px */
  --space-16: calc(var(--spacing-unit) * 16); /* 64px */
  --space-20: calc(var(--spacing-unit) * 20); /* 80px */
  --space-24: calc(var(--spacing-unit) * 24); /* 96px */

  /* ========================================
   * Typography Scale
   * Based on modular scale with 1.125 ratio
   * ======================================== */
  --font-size-xs: 0.75rem;     /* 12px */
  --font-size-sm: 0.875rem;    /* 14px */
  --font-size-base: 1rem;      /* 16px */
  --font-size-md: 1.125rem;    /* 18px */
  --font-size-lg: 1.25rem;     /* 20px */
  --font-size-xl: 1.5rem;      /* 24px */
  --font-size-2xl: 1.875rem;   /* 30px */
  --font-size-3xl: 2.25rem;    /* 36px */
  --font-size-4xl: 3rem;       /* 48px */

  /* Line Heights */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  --line-height-loose: 2;

  /* ========================================
   * Font Weights
   * ======================================== */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* ========================================
   * Border Radius
   * ======================================== */
  --radius-none: 0;
  --radius-sm: 0.25rem;    /* 4px */
  --radius-md: 0.375rem;   /* 6px */
  --radius-lg: 0.5rem;     /* 8px */
  --radius-xl: 0.75rem;    /* 12px */
  --radius-2xl: 1rem;      /* 16px */
  --radius-3xl: 1.5rem;    /* 24px */
  --radius-full: 9999px;   /* Circular */

  /* ========================================
   * Shadows
   * Elevation system for depth perception
   * ======================================== */
  --shadow-none: none;
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);

  /* Dark mode shadows - stronger for better contrast */
  --shadow-dark-sm: 0 1px 3px 0 rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.3);
  --shadow-dark-md: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3);
  --shadow-dark-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.4);
  --shadow-dark-xl: 0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.5);

  /* ========================================
   * Transitions
   * Animation timing functions
   * ======================================== */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slowest: 500ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Easing functions */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ========================================
   * Z-Index Scale
   * Layering system for stacking context
   * ======================================== */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;

  /* ========================================
   * Grid & Layout
   * ======================================== */
  --container-max-width: 1440px;
  --grid-gutter: var(--space-6);  /* 24px */
  --sidebar-width: 280px;
  --header-height: 64px;

  /* ========================================
   * Breakpoints (for reference in JS)
   * ======================================== */
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-2xl: 1400px;
}