/* ===========================================
   CSS Variables - TM Innovations
   Global Design Tokens
=========================================== */

:root {
  /* ========== Primary Colors ========== */
  --primary-color: #ff4e8d;
  --primary-light: #ff8fab;
  --primary-dark: #d43f77;
  --primary-gradient: linear-gradient(135deg, #ff4e8d 0%, #ff8fab 100%);
  --primary-gradient-reverse: linear-gradient(135deg, #ff8fab 0%, #ff4e8d 100%);

  /* ========== Secondary Colors ========== */
  --secondary-color: #dc8cdb;
  --secondary-light: #ecade3;
  --secondary-dark: #c56cc4;

  /* ========== Neutral Colors ========== */
  --text-dark: #1f272b;
  --text-medium: #4a4a4a;
  --text-light: #666666;
  --text-muted: #999999;
  
  /* ========== Background Colors ========== */
  --bg-white: #ffffff;
  --bg-light: #f7f7f7;
  --bg-gray: #f9f9f9;
  --bg-dark: #1e1e1e;

  /* ========== Border Colors ========== */
  --border-light: #e0e0e0;
  --border-medium: #cccccc;
  --border-dark: #999999;

  /* ========== Shadow Colors ========== */
  --shadow-light: rgba(0, 0, 0, 0.1);
  --shadow-medium: rgba(0, 0, 0, 0.15);
  --shadow-dark: rgba(0, 0, 0, 0.2);
  --shadow-primary: rgba(255, 78, 141, 0.3);

  /* ========== Typography ========== */
  --font-family: 'Poppins', sans-serif;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Font Sizes */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 28px;
  --font-size-4xl: 32px;
  --font-size-5xl: 42px;
  --font-size-6xl: 48px;

  /* Line Heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.8;

  /* ========== Spacing ========== */
  --spacing-xs: 5px;
  --spacing-sm: 10px;
  --spacing-md: 15px;
  --spacing-lg: 20px;
  --spacing-xl: 30px;
  --spacing-2xl: 40px;
  --spacing-3xl: 60px;
  --spacing-4xl: 80px;
  --spacing-5xl: 100px;

  /* ========== Border Radius ========== */
  --radius-sm: 5px;
  --radius-md: 10px;
  --radius-lg: 15px;
  --radius-xl: 20px;
  --radius-full: 30px;
  --radius-circle: 50%;

  /* ========== Transitions ========== */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
  --transition-bounce: 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  /* ========== Z-Index Scale ========== */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 500;
  --z-modal-backdrop: 900;
  --z-modal: 1000;
  --z-tooltip: 1100;

  /* ========== Breakpoints (for reference) ========== */
  /* Mobile: 0 - 575px */
  /* Tablet: 576px - 991px */
  /* Desktop: 992px - 1199px */
  /* Large: 1200px+ */

  /* ========== Component Specific ========== */
  --header-height: 100px;
  --header-height-mobile: 70px;
  --footer-bg: var(--bg-dark);
  --card-shadow: 0 5px 15px var(--shadow-light);
  --card-shadow-hover: 0 15px 30px var(--shadow-medium);
  --button-shadow: 0 5px 15px var(--shadow-primary);
}

/* ========== Dark Mode Variables (Optional) ========== */
@media (prefers-color-scheme: dark) {
  :root {
    /* Uncomment to enable dark mode */
    /* --bg-white: #1e1e1e;
    --bg-light: #2a2a2a;
    --bg-gray: #333333;
    --text-dark: #ffffff;
    --text-medium: #e0e0e0;
    --text-light: #cccccc; */
  }
}