/* LUSTER Design System - Token Variables */

:root {
  /* Typography */
  --font-family-sans-en: 'Inter', sans-serif;
  --font-family-serif-en: 'Domine', serif;
  --font-family-sans-ar: 'Cairo', sans-serif;
  --font-family-mono: 'JetBrains Mono', monospace;

  /* Font Sizes */
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 32px;
  --font-size-4xl: 48px;

  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Spacing Scale (8pt base) */
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Border Radius */
  --radius-0: 0px;
  --radius-1: 4px;
  --radius-2: 8px;
  --radius-3: 12px;
  --radius-4: 16px;
  --radius-5: 20px;
  --radius-full: 9999px;

  /* Elevation & Shadows */
  --shadow-flat: none;
  --shadow-subtle: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-default: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-raised: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  /* Primary Colors - Diamond Brand */
  --color-primary-50: #EEF2FF;
  --color-primary-100: #E0E7FF;
  --color-primary-200: #C7D2FE;
  --color-primary-300: #A5B4FC;
  --color-primary-400: #818CF8;
  --color-primary-500: #6366F1;
  --color-primary-600: #4F46E5;
  --color-primary-700: #4338CA;
  --color-primary-800: #3730A3;
  --color-primary-900: #312E81;
  --color-primary-950: #1E1B4B;

  /* Semantic Colors */
  --color-success-50: #E6FAED;
  --color-success-500: #00CA4B;
  --color-success-900: #006D1E;

  --color-danger-50: #FEE9E9;
  --color-danger-500: #F32727;
  --color-danger-900: #7E0E0E;

  --color-warning-50: #FEF3C7;
  --color-warning-500: #F59E0B;
  --color-warning-900: #6E3B0E;

  /* Neutral Colors */
  --color-neutral-0: #FFFFFF;
  --color-neutral-50: #F9FAFB;
  --color-neutral-100: #F3F4F6;
  --color-neutral-200: #E5E7EB;
  --color-neutral-300: #D1D5DB;
  --color-neutral-400: #9CA3AF;
  --color-neutral-500: #6B7280;
  --color-neutral-600: #4B5563;
  --color-neutral-700: #374151;
  --color-neutral-800: #1F2937;
  --color-neutral-900: #111827;
  --color-neutral-950: #030712;

  /* Density Tokens */
  --density-comfortable-v-padding: 12px;
  --density-comfortable-h-padding: 16px;
  --density-compact-v-padding: 8px;
  --density-compact-h-padding: 12px;

  /* Component-specific tokens */
  --button-radius: var(--radius-2);
  --input-radius: var(--radius-4);
  --badge-radius: var(--radius-full);
  --card-radius: var(--radius-3);
  --modal-radius: var(--radius-4);

  /* Focus Ring */
  --component-focus-ring: 0 0 0 3px rgba(79, 70, 229, 0.1);

  /* Page Border */
  --page-border-color: #D4D4D8;
}