:root {
  /* ----------------------------------------
     BRAND COLOR SYSTEM (PRIMITIVES)
  ---------------------------------------- */
  --color-primary: #000000;
  --color-secondary: #d4af37; /* Gold tone */
  --color-accent: #876445;

  --color-success: #27ae60;
  --color-danger: #e63946;
  --color-warning: #f4d03f;

  /* ----------------------------------------
     TEXT COLORS
  ---------------------------------------- */
  --text-dark: #111;
  --text-light: #fff;
  --text-muted: #777;

  /* ----------------------------------------
     BACKGROUND COLORS
  ---------------------------------------- */
  --bg-white: #ffffff;
  --bg-light: #f7f3ee; /* your jewelry theme tone */
  --bg-dark: #111111;
  --bg-transparent: rgba(255, 255, 255, 0);

  /* ----------------------------------------
     SEMANTIC COLORS (for components)
  ---------------------------------------- */
  --header-bg-default: var(--bg-transparent);
  --header-bg-scrolled: rgba(0, 0, 0, 0.92);
  --header-text-default: var(--text-light);
  --header-text-scrolled: var(--text-light);

  --nav-underline-default: var(--text-light);
  --nav-underline-active: var(--color-secondary);

  --button-bg: var(--color-primary);
  --button-text: var(--text-light);
  --button-bg-hover: #222;

  /* ----------------------------------------
     BORDERS & RADIUS
  ---------------------------------------- */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 22px;
  --radius-full: 999px;

  /* ----------------------------------------
     SHADOW SYSTEM (Elevations)
  ---------------------------------------- */
  --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 10px 25px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 25px 55px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 40px 80px rgba(0, 0, 0, 0.22);

  --shadow-glow-gold: 0 0 14px rgba(200, 170, 90, 0.45); /* special */

  /* ----------------------------------------
     TYPOGRAPHY
  ---------------------------------------- */
  --font-primary: "Inter", sans-serif;
  --font-secondary: "Playfair Display", serif;

  --font-xs: 12px;
  --font-sm: 14px;
  --font-md: 16px;
  --font-lg: 22px;
  --font-xl: 32px;
  --font-xxl: 48px;

  /* ----------------------------------------
     SPACING SYSTEM
  ---------------------------------------- */
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;

  /* ----------------------------------------
     TRANSITIONS
  ---------------------------------------- */
  --transition-fast: 0.15s ease;
  --transition: 0.3s ease;
  --transition-slow: 0.45s ease;

  /* ----------------------------------------
     HEADER SIZES
  ---------------------------------------- */
  --header-height: 155px;
  --header-height-scrolled: 120px;

  /* ----------------------------------------
     GRID & BREAKPOINTS
  ---------------------------------------- */
  --container-width: 1400px;

  --bp-xs: 480px;
  --bp-sm: 768px;
  --bp-md: 1024px;
  --bp-lg: 1280px;
  --bp-xl: 1536px;

  /* ----------------------------------------
     Z-INDEX MAP
  ---------------------------------------- */
  --z-header: 4;
  --z-menu: 3;
  --z-overlay: 1;
  --z-dropdown: 2;
  --z-modal: 5;
}