:root {
  /* Base Radius */
  --radius: 0.5rem;

  /* Colors - Greys */
  --color-grey-0: #FFFFFF;
  --color-grey-5: #F9FAFB;
  --color-grey-10: #F3F4F6;
  --color-grey-20: #E5E7EB;
  --color-grey-30: #D1D5DB;
  --color-grey-40: #9CA3AF;
  --color-grey-50: #6B7280;
  --color-grey-60: #4B5563;
  --color-grey-70: #374151;
  --color-grey-80: #1F2937;
  --color-grey-90: #111827;

  /* Colors - Categories */
  --category-business: #94521A;
  --category-personal: #8A2E3D;
  --category-school: #3A5DAE;
  --category-gaming: #6A4C93;
  --category-professional: #2C2C2C;
  --category-university: #00724F;
  --category-business-light: rgba(148, 82, 26, 0.05); /* #94521A0D */
  --category-personal-light: rgba(138, 46, 61, 0.05); /* #8A2E3D0D */
  --category-school-light: rgba(58, 93, 174, 0.05); /* #3A5DAE0D */
  --category-gaming-light: rgba(106, 76, 147, 0.05); /* #6A4C930D */
  --category-professional-light: rgba(44, 44, 44, 0.05); /* #2C2C2C0D */
  --category-university-light: rgba(0, 114, 79, 0.05); /* #00724F0D */
  --category-business-hover: rgba(148, 82, 26, 0.1); /* #94521A1A */
  --category-personal-hover: rgba(138, 46, 61, 0.1); /* #8A2E3D1A */
  --category-school-hover: rgba(58, 93, 174, 0.1); /* #3A5DAE1A */
  --category-gaming-hover: rgba(106, 76, 147, 0.1); /* #6A4C931A */
  --category-professional-hover: rgba(44, 44, 44, 0.1); /* #2C2C2C1A */
  --category-university-hover: rgba(0, 114, 79, 0.1); /* #00724F1A */

  /* Colors - Modern */
  --modern-black: #231F20;

  /* Primary Defaults (fallback hex or references) */
  --primary: var(--modern-black);
  --primary-foreground: var(--color-grey-0);
  --secondary: var(--color-grey-20);
  --secondary-foreground: var(--modern-black);
  --destructive: #EF4444; /* Tailwind red-500 fallback */
  --destructive-foreground: var(--color-grey-0);
  --muted: var(--color-grey-10);
  --muted-foreground: var(--color-grey-50);
  --accent: var(--color-grey-10);
  --accent-foreground: var(--modern-black);
  --popover: var(--color-grey-0);
  --popover-foreground: var(--modern-black);
  --card: var(--color-grey-0);
  --card-foreground: var(--modern-black);

  /* Core Colors */
  --border: var(--color-grey-20);
  --input: var(--color-grey-20);
  --ring: var(--category-university);
  --background: var(--color-grey-0);
  --foreground: var(--modern-black);
  
  /* Border Radii */
  --radius-lg: var(--radius);
  --radius-md: calc(var(--radius) - 2px);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-none: 0px;
  --radius-soft: 2px;
  --radius-base: 4px;
  --radius-rounded: 8px;
  --radius-large: 16px;
  --radius-circle: 9999px;

  /* Box Shadows */
  --shadow-category: 1px 2px 3px 0px rgba(0, 0, 0, 0.07);

  /* Max Widths */
  --max-width-8xl: 100rem;

  /* Fonts Config */
  --font-rethink: "Rethink Sans", "Tajawal", sans-serif;
  --font-sans: var(--font-rethink);
  --font-arabic: "Tajawal", "Rethink Sans", sans-serif;
  --text-3xl: 2rem;

  /* Breakpoints Reference (Standard) */
  --screen-2xsmall: 320px;
  --screen-xsmall: 512px;
  --screen-small: 1024px;
  --screen-medium: 1280px;
  --screen-large: 1440px;
  --screen-xlarge: 1680px;
  --screen-2xlarge: 1920px;
}