:root {
  /* === CORE PALETTE (RGB) === */
  --primary: 37, 179, 149;    /* #25B395 */
  --accent:  255, 114, 1;     /* #FF7201 */
  --neutral: 100, 116, 139;   /* #64748B */
  --success: 34, 197, 94;     /* #22C55E */
  --warning: 245, 158, 11;    /* #F59E0B */
  --error:   239, 68, 68;     /* #EF4444 */
  --info:    59, 130, 246;    /* #3B82F6 */

  /* === SURFACE PALETTE (RGB) === */
  --background: 255, 255, 255; /* #FFFFFF */
  --foreground: 15, 23, 42;    /* #0F172A */
  --surface:    248, 250, 252; /* #F8FAFC */
  --border:     226, 232, 240; /* #E2E8F0 */
  --muted:      148, 163, 184; /* #94A3B8 */

  /* === COLOR TOKENS === */
  --color-primary: rgb(var(--primary));
  --color-accent:  rgb(var(--accent));
  --color-neutral: rgb(var(--neutral));
  --color-success: rgb(var(--success));
  --color-warning: rgb(var(--warning));
  --color-error:   rgb(var(--error));
  --color-info:    rgb(var(--info));

  --color-background: rgb(var(--background));
  --color-foreground: rgb(var(--foreground));
  --color-surface:    rgb(var(--surface));
  --color-border:     rgb(var(--border));
  --color-muted:      rgb(var(--muted));

  /* === DERIVED COLOR SHADES === */
  --color-primary-dark: #1A9179;
  --color-primary-tint: rgba(var(--primary), 0.12);
  --color-accent-dark:  #D96100;
  --color-error-tint:   rgba(var(--error), 0.10);

  /* === TYPOGRAPHY === */
  --font-family: 'Arbfont', 'Tajawal', 'Cairo', sans-serif;

  /* === SPACING === */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* === BORDER RADIUS === */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   10px;
  --radius-2xl:  12px;
  --radius-full: 9999px;

  /* === SHADOWS === */
  --shadow-none: none;
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:   0 2px 8px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.05);
  --shadow-lg:   0 4px 16px rgba(0,0,0,0.09), 0 2px 6px rgba(0,0,0,0.06);
}