:root {
  /* Base Colors */
  --primary: #1a1a1a;
  --secondary: #f9f9f9;
  --primary-dark: #0d2b4d;
  --accent: #d20a1b;
  --hover: #a2a2a2;
  --hover-color: #4b5563;

  /* Text Colors */
  --text: #222222;
  --text-color: #111;
  --secondary-text-color: #6b7280;
  --white: #ffffff;
  --black: #000000;
  --green: #059408;

  /* Layout + Component Backgrounds */
  --border-color: #e5e7eb;
  --summary-bg: #f0f0f0;

  /*Shop*/
  /*card*/
  --card-color: #f9f9f9;

  /* Cart Specific */
  --cart-badge-bg: rgb(251, 12, 12);
  --cart-badge-text: white;
  --checkout-bg: #111;
  --checkout-hover-bg: #1f2937;
  --apply-button-bg: #e71c23;
  --checkout-button-bg: #000000;

  /* Typography */
  --font-sans: "Proxima Nova", sans-serif;
  --font-serif: "Playfair Display", serif;
  --font-family: "Proxima Nova", sans-serif;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

  /* Animation */
  --transition: all 0.3s ease;

  /* Footer Specific */
  --gray-300: #c3c3c3;
  --gray-500: #6b7280;
  --accent: #d20a1b;
}