/**
 * Dustid Ecommerce - CSS Variables
 * This file contains all CSS variables used throughout the project.
 *
 * Note: Color themes are now loaded dynamically via PHP based on URL parameters
 * Change themes by adding ?theme=N to the URL where N is 1-6
 */

@font-face {
  font-family: "Grotesque";
  src: url("../fonts/basis-grotesque-regular-pro.otf");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "SouvenirStd";
  src: url("../fonts/SouvenirStd-Light.otf");
  font-weight: light;
  font-style: normal;
}

/* Shadows */
:root {
  --shadow-light: 0 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-dark: 0 4px 20px rgba(0, 0, 0, 0.3);

  /* Typography */
  /* Primary font: Inter for clean, modern readability */
  --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  
  /* Secondary font: Poppins for headings and emphasis */
  --font-secondary: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  
  /* Fallback fonts */
  --font-fallback: "Grotesque", "SouvenirStd";

  /* Animations */
  --transition: all 0.3s ease;
}

/* Theme Variables */
[data-theme="light"] {
  --text: var(--text-dark);
  --bg: var(--bg-light);
  --card: var(--card-light);
  --border: var(--border-light);
  --shadow: var(--shadow-light);
  --text-rgb: var(--text-dark-rgb);
  --bg-rgb: 255, 255, 255;

  /* Additional light mode variables */
  --text-muted: rgba(var(--text-dark-rgb), 0.7);
  --bg-subtle: #f8f9fa;
  --card-hover: #ffffff;
  --input-bg: #ffffff;
  --pricing-badge: var(--accent);
}

[data-theme="dark"] {
  --text: var(--text-light);
  --bg: var(--bg-dark);
  --card: var(--card-dark);
  --border: var(--border-dark);
  --shadow: var(--shadow-dark);
  --text-rgb: var(--text-light-rgb);
  --bg-rgb: 18, 18, 18;

  /* Additional dark mode variables */
  --text-muted: rgba(var(--text-light-rgb), 0.7);
  --bg-subtle: #2a2a2a;
  --card-hover: #2c2c2c;
  --input-bg: #333333;
  --pricing-badge: var(--accent);
}

/* Spacing variables for consistent spacing */
:root {
  --space-xs: 0.25rem; /* 4px */
  --space-sm: 0.5rem; /* 8px */
  --space-md: 1rem; /* 16px */
  --space-lg: 1.5rem; /* 24px */
  --space-xl: 2rem; /* 32px */
  --space-2xl: 2.5rem; /* 40px */
  --space-3xl: 3rem; /* 48px */
  --space-4xl: 4rem; /* 64px */
  --space-5xl: 6rem; /* 96px */

  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* Container max-width */
  --container-max: 1320px;
  --container-small: 1080px;
}