/* CSS Variables */
:root {
  /* Primary Colors */
  --color-primary-main: #E31E24;
  --color-primary-light: #FF4D52;
  --color-primary-dark: #C71820;

  /* Secondary Colors */
  --color-secondary-main: #0066FF;
  --color-secondary-light: #4D94FF;
  --color-secondary-dark: #004DBF;

  /* Grayscale */
  --color-gray-900: #1A1A1A;
  --color-gray-700: #4A4A4A;
  --color-gray-500: #9E9E9E;
  --color-gray-300: #D9D9D9;
  --color-gray-100: #F5F5F5;
  --color-gray-50: #FFFFFF;

  /* Semantic Colors */
  --color-success: #00C853;
  --color-warning: #FFA000;
  --color-error: #D32F2F;
  --color-info: #0288D1;

  /* Spacing (4px Grid) - Doubled values */
  --spacing-xs: 8px;
  --spacing-s: 16px;
  --spacing-m: 32px;
  --spacing-l: 48px;
  --spacing-xl: 64px;
  --spacing-2xl: 96px;

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

  /* Shadows */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.15);

  /* Z-Index */
  --z-index-modal: 1300;
  --z-index-drawer: 1200;
  --z-index-app-bar: 1100;
  --z-index-fab: 1050;
  --z-index-sticky: 1020;
}

/* CSS Reset & Base Styles */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Roboto", "Helvetica Neue", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-gray-900);
  background-color: var(--color-gray-50);
  min-height: 100%;
  overflow-x: hidden;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-weight: 700;
}

p {
  margin: 0;
}

a {
  color: var(--color-primary-main);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--color-primary-light);
}

/* Remove default button styles */
button {
  font-family: inherit;
  cursor: pointer;
}

/* Accessibility: Focus Indicators */
*:focus-visible {
  outline: 2px solid var(--color-secondary-main);
  outline-offset: 2px;
  border-radius: var(--border-radius-sm);
}

/* Selection */
::selection {
  background-color: var(--color-primary-light);
  color: white;
}

/* Scrollbar (Webkit) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-gray-100);
}

::-webkit-scrollbar-thumb {
  background: var(--color-gray-300);
  border-radius: var(--border-radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-gray-500);
}

/* Utility Classes */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}

@media (min-width: 768px) {
  .container {
    padding: 0 80px;
  }
}

@media (min-width: 1024px) {
  .container {
    padding: 0 120px;
  }
}

/* Mobile First - Hide on Mobile */
.hide-mobile {
  display: none;
}

@media (min-width: 768px) {
  .hide-mobile {
    display: block;
  }
}

/* Hide on Desktop */
.hide-desktop {
  display: block;
}

@media (min-width: 768px) {
  .hide-desktop {
    display: none;
  }
}
