:root {
  /* Colors */
  --color-primary: #0f172a;       /* Deep Navy */
  --color-primary-light: #1e293b; /* Lighter Navy */
  --color-secondary: #d4af37;     /* Premium Gold */
  --color-secondary-hover: #b5952f;
  
  --color-text-main: #334155;     /* Slate 700 */
  --color-text-light: #64748b;    /* Slate 500 */
  --color-text-white: #ffffff;
  
  --color-bg-body: #f8fafc;       /* Slate 50 */
  --color-bg-white: #ffffff;
  --color-bg-alt: #f1f5f9;        /* Slate 100 */

  /* Typography */
  --font-main: 'Outfit', sans-serif;
  --font-heading: 'Outfit', sans-serif;

  /* Spacing */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 2rem;
  --spacing-lg: 4rem;
  --spacing-xl: 8rem;

  /* Layout */
  --container-width: 1200px;
  --header-height: 80px;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --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);
}