/* ============================================
   CSS CUSTOM PROPERTIES - Theme Variables
   ============================================ */

/* Responsive zoom scaling based on DEVICE screen resolution (not window size) */
/* Large monitors (1920px+): no zoom */
/* Medium monitors: progressive scaling */
/* Small screens (13" laptop ~1366px): 0.75 zoom */

/* Default for small screens / 13" laptops */
html {
  zoom: 0.75;
}

@media screen and (min-device-width: 1366px) {
  html {
    zoom: 0.8;
  }
}

@media screen and (min-device-width: 1440px) {
  html {
    zoom: 0.85;
  }
}

@media screen and (min-device-width: 1600px) {
  html {
    zoom: 0.9;
  }
}

@media screen and (min-device-width: 1920px) {
  html {
    zoom: 1;
  }
}

:root {
    /* Men's Theme (Default) */
    --accent-color: #E07856;
    --accent-hover: #d6654a;
    --accent-light: #fef3f0;
    --accent-dark: #8b4734;
    --accent-glow: rgba(224, 120, 86, 0.4);
    --accent-gradient-start: #fefaf8;
    --accent-gradient-end: #fff9f5;
    --accent-border: rgba(224, 120, 86, 0.15);

    /* Opacity variants for compatibility */
    --accent-10: rgba(224, 120, 86, 0.1);
    --accent-15: rgba(224, 120, 86, 0.15);
    --accent-20: rgba(224, 120, 86, 0.2);
    --accent-25: rgba(224, 120, 86, 0.25);
    --accent-30: rgba(224, 120, 86, 0.3);
    --accent-35: rgba(224, 120, 86, 0.35);
    --accent-40: rgba(224, 120, 86, 0.4);
    --accent-50: rgba(224, 120, 86, 0.5);
    --accent-60: rgba(224, 120, 86, 0.6);
    --accent-70: rgba(224, 120, 86, 0.7);
    --accent-80: rgba(224, 120, 86, 0.8);
    --accent-90: rgba(224, 120, 86, 0.9);
  }

  /* Women's Theme Override */
  body.women-theme,
  body[data-gender="womens"],
  body[data-gender="w"],
  body[data-gender="f"],
  html[data-gender="womens"],
  html[data-gender="w"],
  html[data-gender="f"] {
    --accent-color: #E879B3;
    --accent-hover: #d666a0;
    --accent-light: #fef0f7;
    --accent-dark: #8b4466;
    --accent-glow: rgba(232, 121, 179, 0.4);
    --accent-gradient-start: #fef6fa;
    --accent-gradient-end: #fdf3f7;
    --accent-border: rgba(232, 121, 179, 0.15);

    --accent-10: rgba(232, 121, 179, 0.1);
    --accent-15: rgba(232, 121, 179, 0.15);
    --accent-20: rgba(232, 121, 179, 0.2);
    --accent-25: rgba(232, 121, 179, 0.25);
    --accent-30: rgba(232, 121, 179, 0.3);
    --accent-35: rgba(232, 121, 179, 0.35);
    --accent-40: rgba(232, 121, 179, 0.4);
    --accent-50: rgba(232, 121, 179, 0.5);
    --accent-60: rgba(232, 121, 179, 0.6);
    --accent-70: rgba(232, 121, 179, 0.7);
    --accent-80: rgba(232, 121, 179, 0.8);
    --accent-90: rgba(232, 121, 179, 0.9);
  }

  /* Dark mode for women's theme - use transparent accent-light */
  html.dark body[data-gender="womens"],
  html.dark body[data-gender="w"],
  html.dark body[data-gender="f"],
  html.dark[data-gender="womens"],
  html.dark[data-gender="w"],
  html.dark[data-gender="f"] {
    --accent-light: rgba(232, 121, 179, 0.15);
    --accent-gradient-start: rgba(232, 121, 179, 0.08);
    --accent-gradient-end: rgba(232, 121, 179, 0.05);
  }

  /* Dark mode for men's theme - use transparent accent-light */
  html.dark {
    --accent-light: rgba(224, 120, 86, 0.15);
    --accent-gradient-start: rgba(224, 120, 86, 0.08);
    --accent-gradient-end: rgba(224, 120, 86, 0.05);
  }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.875rem;
  line-height: 1.625;
  color: #27272a;
  background-color: #ffffff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html.dark body {
  color: #f4f4f5;
  background-color: #18181b;
}

html.dark {
  color-scheme: dark;
}

* {
  text-rendering: optimizeLegibility;
}

/* ============================================
   MOBILE LAYOUT - Remove padding for full-width content
   ============================================ */
@media (max-width: 768px) {
  /* Remove main content padding on mobile so content can use full screen width */
  #main-content {
    padding: 0 !important;
  }

  /* Hide footer on mobile for cleaner experience */
  footer {
    margin-top: 0 !important;
  }
}