/* Auto-generated from dx.material.patsient.json - DO NOT EDIT MANUALLY */
/* Run: node scripts/generate-tokens.mjs */

:root {
  /* --- DevExtreme ThemeBuilder tokens (do not override) --- */
  --color-accent: rgba(21, 93, 252, 1);
  --color-text: rgba(16, 24, 40, 1);
  --color-border: rgba(235, 230, 231, 1);
  --border-radius: 10px;
  --font-family: 'Roboto', sans-serif;
  --border-radius-card: 16px;
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;

  /* --- Extended palette (mirrored from connectedportal/src/styles.css) --- */

  /* Base */
  --color-white: #ffffff;
  --color-black: #000000;

  /* Accent shades */
  --color-accent-50: #eff6ff;
  --color-accent-100: #dbeafe;

  /* Gray scale */
  --color-gray-50:  #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #111827;
  --color-gray-900: #0f172a;

  /* Blue */
  --color-blue-50:  #eff6ff;
  --color-blue-100: #dbeafe;
  --color-blue-200: #bfdbfe;
  --color-blue-600: #2563eb;
  --color-blue-700: #1d4ed8;
  --color-blue-800: #1e3a8a;

  /* Yellow */
  --color-yellow-50:  #fefce8;
  --color-yellow-100: #fef3c7;
  --color-yellow-200: #fef08a;
  --color-yellow-300: #fde047;
  --color-yellow-400: #facc15;
  --color-yellow-500: #eab308;
  --color-yellow-600: #ca8a04;
  --color-yellow-700: #d97706;
  --color-yellow-800: #92400e;

  /* Green */
  --color-green-50:  #f0fdf4;
  --color-green-100: #d1fae5;
  --color-green-200: #a7f3d0;
  --color-green-300: #6ee7b7;
  --color-green-400: #22c55e;
  --color-green-500: #10b981;
  --color-green-600: #059669;
  --color-green-700: #047857;
  --color-green-800: #065f46;

  /* Orange */
  --color-orange-50:  #fff7ed;
  --color-orange-100: #ffedd5;
  --color-orange-200: #fed7aa;
  --color-orange-300: #fdba74;
  --color-orange-600: #ea580c;
  --color-orange-700: #c2410c;

  /* Red */
  --color-red-50:  #fef2f2;
  --color-red-100: #fee2e2;
  --color-red-200: #fecaca;
  --color-red-300: #fca5a5;
  --color-red-400: #ef4444;
  --color-red-500: #f87171;
  --color-red-600: #dc2626;
  --color-red-700: #b91c1c;

  /* Purple */
  --color-purple-100: #e9d5ff;
  --color-purple-200: #e0e7ff;
  --color-purple-300: #ede9fe;
  --color-purple-600: #9333ea;
  --color-purple-700: #7c3aed;
  --color-purple-800: #6b21a8;
  --color-purple-900: #3730a3;

  /* Teal */
  --color-teal-50:  #f0fdfa;
  --color-teal-100: #ccfbf1;
  --color-teal-500: #14b8a6;
  --color-teal-600: #0d9488;
  --color-teal-700: #0f766e;

  /* Indigo */
  --color-indigo-600: #4f46e5;
  --color-indigo-800: #3730a3;
  --color-indigo-900: #1e40af;

  /* Semantic */
  --color-background:           #f9fafb;
  --color-background-secondary: #fafafa;
  --color-shadow:               rgba(0, 0, 0, 0.1);

  /* Border radius variants */
  --border-radius-xs: 0.25rem;
  --border-radius-md: 0.375rem;
  --border-radius-lg: 0.75rem;

  /* Font sizes */
  --font-size-2xs: 0.625rem;
  --font-size-xs:  0.75rem;
  --font-size-sm:  0.875rem;
  --font-size-base: 1rem;
  --font-size-lg:  1.125rem;
  --font-size-xl:  1.25rem;
  --font-size-2xl: 1.5rem;

  /* Font weights */
  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;

  /* Line heights */
  --line-height-tight:   1.2;
  --line-height-normal:  1.4;
  --line-height-relaxed: 1.5;

  /* Extended spacing */
  --spacing-2xs: 0.25rem;
  --spacing-3xl: 3rem;
  --spacing-4xl: 4rem;

  /* Icon sizes */
  --icon-size-xs: 0.75rem;
  --icon-size-sm: 1rem;
  --icon-size-md: 1.25rem;
  --icon-size-lg: 1.5rem;
  --icon-size-xl: 2rem;
}