/**
 * MoyeoBom Design Tokens
 * Modern Light Theme - Cyan/Teal Brand
 *
 * @version 4.0
 * @date 2026-02-03
 */

:root {
  /* ========================================
     COLOR TOKENS - Primary Brand (Cyan/Teal)
     ======================================== */

  /* Primary - Vibrant Cyan */
  --color-primary: #0891B2;
  --color-primary-light: #22D3EE;
  --color-primary-lighter: #A5F3FC;
  --color-primary-dark: #0E7490;
  --color-primary-darker: #155E75;
  --color-primary-50: #ECFEFF;
  --color-primary-100: #CFFAFE;
  --color-primary-200: #A5F3FC;
  --color-primary-300: #67E8F9;
  --color-primary-400: #22D3EE;
  --color-primary-500: #06B6D4;
  --color-primary-600: #0891B2;
  --color-primary-700: #0E7490;
  --color-primary-800: #155E75;
  --color-primary-900: #164E63;
  --color-primary-glow: rgba(8, 145, 178, 0.15);
  --color-primary-subtle: rgba(8, 145, 178, 0.08);

  /* Accent - Emerald Green */
  --color-accent: #10B981;
  --color-accent-light: #34D399;
  --color-accent-dark: #059669;
  --color-accent-glow: rgba(16, 185, 129, 0.15);
  --color-accent-subtle: rgba(16, 185, 129, 0.08);


  /* ========================================
     COLOR TOKENS - Surface Layers (Light Theme)
     ======================================== */

  /* Background Layers */
  --color-bg-base: #FFFFFF;
  --color-bg-elevated: #FFFFFF;
  --color-bg-secondary: #F3F4F6;
  --color-bg-tertiary: #E5E7EB;
  --color-background: #FAFBFC;

  /* Surface Layers - 깊이감 표현 */
  --color-surface-1: #FFFFFF;
  --color-surface-2: #FAFBFC;
  --color-surface-3: #F3F4F6;
  --color-surface-4: #E5E7EB;
  --color-surface-variant: #F9FAFB;

  /* Glass Effect */
  --color-surface-glass: rgba(255, 255, 255, 0.85);
  --color-surface-glass-heavy: rgba(255, 255, 255, 0.95);


  /* ========================================
     COLOR TOKENS - Text Hierarchy (Light Theme)
     ======================================== */

  --color-text-heading: #111827;
  --color-text-primary: #1F2937;
  --color-text-body: #374151;
  --color-text-secondary: #6B7280;
  --color-text-tertiary: #9CA3AF;
  --color-text-disabled: #D1D5DB;
  --color-text-inverse: #FFFFFF;


  /* ========================================
     COLOR TOKENS - Semantic Colors (Light Theme)
     ======================================== */

  /* Success - Emerald */
  --color-success: #10B981;
  --color-success-light: #D1FAE5;
  --color-success-dark: #059669;
  --color-success-bg: rgba(16, 185, 129, 0.1);
  --color-success-border: rgba(16, 185, 129, 0.2);

  /* Warning - Amber */
  --color-warning: #F59E0B;
  --color-warning-light: #FEF3C7;
  --color-warning-dark: #D97706;
  --color-warning-bg: rgba(245, 158, 11, 0.1);
  --color-warning-border: rgba(245, 158, 11, 0.2);

  /* Error/Danger - Red */
  --color-error: #EF4444;
  --color-error-light: #FEE2E2;
  --color-error-dark: #DC2626;
  --color-error-bg: rgba(239, 68, 68, 0.1);
  --color-error-border: rgba(239, 68, 68, 0.2);

  --color-danger: #EF4444;
  --color-danger-light: #FEE2E2;
  --color-danger-dark: #DC2626;

  /* Info - Blue */
  --color-info: #3B82F6;
  --color-info-light: #DBEAFE;
  --color-info-dark: #2563EB;
  --color-info-bg: rgba(59, 130, 246, 0.1);
  --color-info-border: rgba(59, 130, 246, 0.2);


  /* ========================================
     COLOR TOKENS - Border & Divider (Light Theme)
     ======================================== */

  --color-border: #E5E7EB;
  --color-border-light: #F3F4F6;
  --color-border-strong: #D1D5DB;
  --color-border-subtle: #F9FAFB;
  --color-border-focus: #0891B2;

  --color-divider: #E5E7EB;
  --color-divider-light: #F3F4F6;


  /* ========================================
     TYPOGRAPHY TOKENS
     ======================================== */

  /* Font Families */
  --font-family-base: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-mono: 'SF Mono', Monaco, 'Cascadia Code', monospace;

  /* Font Sizes (1.25 ratio scale) */
  --text-micro: 0.6875rem;   /* 11px */
  --text-tiny: 0.75rem;      /* 12px */
  --text-caption: 0.8125rem; /* 13px */
  --text-body-sm: 0.875rem;  /* 14px */
  --text-body: 0.9375rem;    /* 15px */
  --text-body-lg: 1rem;      /* 16px */
  --text-title-3: 1.125rem;  /* 18px */
  --text-title-2: 1.25rem;   /* 20px */
  --text-title-1: 1.5rem;    /* 24px */
  --text-headline: 1.875rem; /* 30px */
  --text-display: 2.25rem;   /* 36px */

  /* Font Weights */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;

  /* Line Heights */
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;

  /* Letter Spacing */
  --tracking-tighter: -0.03em;
  --tracking-tight: -0.015em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-wider: 0.04em;


  /* ========================================
     SPACING TOKENS (8px Grid)
     ======================================== */

  --space-0: 0;
  --space-0-5: 0.125rem;  /* 2px */
  --space-1: 0.25rem;     /* 4px */
  --space-1-5: 0.375rem;  /* 6px */
  --space-2: 0.5rem;      /* 8px */
  --space-2-5: 0.625rem;  /* 10px */
  --space-3: 0.75rem;     /* 12px */
  --space-3-5: 0.875rem;  /* 14px */
  --space-4: 1rem;        /* 16px */
  --space-5: 1.25rem;     /* 20px */
  --space-6: 1.5rem;      /* 24px */
  --space-7: 1.75rem;     /* 28px */
  --space-8: 2rem;        /* 32px */
  --space-9: 2.25rem;     /* 36px */
  --space-10: 2.5rem;     /* 40px */
  --space-12: 3rem;       /* 48px */
  --space-14: 3.5rem;     /* 56px */
  --space-16: 4rem;       /* 64px */
  --space-20: 5rem;       /* 80px */
  --space-24: 6rem;       /* 96px */

  /* Semantic Spacing */
  --space-page-x: var(--space-4);      /* 16px */
  --space-page-y: var(--space-6);      /* 24px */
  --space-section: var(--space-8);     /* 32px */
  --space-card-padding: var(--space-5); /* 20px */
  --space-list-gap: var(--space-3);    /* 12px */
  --space-inline: var(--space-2);      /* 8px */


  /* ========================================
     SHADOW TOKENS (Light Theme - Soft)
     ======================================== */

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.15);

  /* Card Shadows */
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 6px rgba(0, 0, 0, 0.04);
  --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.06);
  --shadow-elevated: var(--shadow-md);
  --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);

  /* Glow Shadows */
  --shadow-glow: 0 0 20px rgba(8, 145, 178, 0.15);
  --shadow-glow-sm: 0 0 12px rgba(8, 145, 178, 0.1);
  --shadow-glow-lg: 0 0 40px rgba(8, 145, 178, 0.2);

  /* FAB Shadow */
  --shadow-fab: 0 8px 24px rgba(8, 145, 178, 0.3), 0 4px 12px rgba(0, 0, 0, 0.1);


  /* ========================================
     BORDER RADIUS TOKENS
     ======================================== */

  --radius-none: 0;
  --radius-sm: 0.375rem;  /* 6px */
  --radius-md: 0.5rem;    /* 8px */
  --radius-lg: 0.75rem;   /* 12px */
  --radius-xl: 1rem;      /* 16px */
  --radius-2xl: 1.25rem;  /* 20px */
  --radius-3xl: 1.5rem;   /* 24px */
  --radius-4xl: 2rem;     /* 32px */
  --radius-full: 9999px;


  /* ========================================
     ANIMATION TOKENS
     ======================================== */

  /* Duration */
  --duration-instant: 75ms;
  --duration-fast: 150ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;
  --duration-slower: 500ms;

  /* Easing */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);


  /* ========================================
     COMPONENT SIZE TOKENS
     ======================================== */

  /* Button Heights */
  --btn-height-sm: 2rem;      /* 32px */
  --btn-height-md: 2.75rem;   /* 44px */
  --btn-height-lg: 3.25rem;   /* 52px */
  --btn-height-xl: 3.5rem;    /* 56px */

  /* Input Heights */
  --input-height-sm: 2.5rem;  /* 40px */
  --input-height-md: 3rem;    /* 48px */
  --input-height-lg: 3.5rem;  /* 56px */

  /* Avatar Sizes */
  --avatar-xs: 1.5rem;   /* 24px */
  --avatar-sm: 2rem;     /* 32px */
  --avatar-md: 2.5rem;   /* 40px */
  --avatar-lg: 3rem;     /* 48px */
  --avatar-xl: 4rem;     /* 64px */
  --avatar-2xl: 5rem;    /* 80px */

  /* Icon Sizes */
  --icon-xs: 1rem;       /* 16px */
  --icon-sm: 1.25rem;    /* 20px */
  --icon-md: 1.5rem;     /* 24px */
  --icon-lg: 2rem;       /* 32px */
  --icon-xl: 2.5rem;     /* 40px */


  /* ========================================
     LAYOUT TOKENS
     ======================================== */

  /* Fixed Heights */
  --height-header: 3.5rem;    /* 56px */
  --height-bottom-nav: 4rem;   /* bottom nav height */
  --height-status-bar: 3rem;  /* 48px */
  --height-safe-bottom: calc(96px + env(safe-area-inset-bottom));

  /* Touch Target */
  --touch-target-min: 44px;

  /* Content Width */
  --content-max-width: 640px;
  --content-wide-max-width: 1024px;


  /* ========================================
     Z-INDEX TOKENS
     ======================================== */

  --z-base: 0;
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-fixed: 30;
  --z-overlay: 40;
  --z-nav: 50;
  --z-fab: 100;
  --z-fab-overlay: 100;
  --z-fab-items: 101;
  --z-fab-button: 102;
  --z-modal-backdrop: 200;
  --z-modal: 201;
  --z-toast: 300;
  --z-tooltip: 400;


}


/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Screen Reader Only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Focus Visible Ring */
.focus-ring {
  outline: none;
}

.focus-ring:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Glass Effect */
.glass {
  background: var(--color-surface-glass);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
}

.glass-heavy {
  background: var(--color-surface-glass-heavy);
  backdrop-filter: blur(24px) saturate(200%);
  -webkit-backdrop-filter: blur(24px) saturate(200%);
}

/* iOS Blur Style */
.ios-blur {
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}

/* Hide Scrollbar */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Tap Highlight */
.tap-highlight-none {
  -webkit-tap-highlight-color: transparent;
}

/* Touch Action */
.touch-manipulation {
  touch-action: manipulation;
}

/* Material Symbols Configuration */
.material-symbols-outlined {
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
}

.material-symbols-filled {
  font-variation-settings:
    'FILL' 1,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
}


/* ========================================
   ANIMATIONS
   ======================================== */

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes scaleInBounce {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  60% {
    opacity: 1;
    transform: scale(1.02);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes shimmer {
  from { background-position: -200% 0; }
  to { background-position: 200% 0; }
}

@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(8, 145, 178, 0.15);
  }
  50% {
    box-shadow: 0 0 40px rgba(8, 145, 178, 0.25);
  }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes bounceSubtle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* Animation Classes */
.animate-fade-in {
  animation: fadeIn var(--duration-normal) var(--ease-out);
}

.animate-fade-in-up {
  animation: fadeInUp var(--duration-slow) var(--ease-out);
}

.animate-fade-in-down {
  animation: fadeInDown var(--duration-slow) var(--ease-out);
}

.animate-slide-up {
  animation: slideUp var(--duration-slow) var(--ease-out);
}

.animate-slide-down {
  animation: slideDown var(--duration-slow) var(--ease-out);
}

.animate-scale-in {
  animation: scaleIn var(--duration-normal) var(--ease-out);
}

.animate-scale-in-bounce {
  animation: scaleInBounce 0.4s var(--ease-bounce);
}

.animate-shimmer {
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.5) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: shimmer 2s linear infinite;
}

.animate-pulse-glow {
  animation: pulseGlow 2s var(--ease-in-out) infinite;
}

.animate-float {
  animation: float 3s var(--ease-in-out) infinite;
}

.animate-bounce-subtle {
  animation: bounceSubtle 0.6s var(--ease-out);
}


/* ========================================
   RESPONSIVE BREAKPOINTS
   ======================================== */

/* Small Phone: < 375px */
@media (max-width: 374px) {
  :root {
    --space-page-x: var(--space-3);
    --text-display: 1.875rem;
    --text-title-1: 1.25rem;
  }
}

/* Large Phone: 415px - 767px */
@media (min-width: 415px) {
  :root {
    --space-page-x: var(--space-5);
  }
}

/* Tablet: >= 768px */
@media (min-width: 768px) {
  :root {
    --space-page-x: var(--space-6);
    --space-section: var(--space-10);
    --text-display: 2.5rem;
    --text-headline: 2rem;
    --text-title-1: 1.75rem;
  }
}

/* Desktop: >= 1024px */
@media (min-width: 1024px) {
  :root {
    --space-page-x: var(--space-8);
  }
}


/* ========================================
   REDUCED MOTION - Accessibility
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ========================================
   STAGGER ANIMATION UTILITIES
   ======================================== */

.stagger-item {
  opacity: 0;
  animation: fadeInUp var(--duration-slow) var(--ease-out) forwards;
}

.stagger-item:nth-child(1) { animation-delay: 0ms; }
.stagger-item:nth-child(2) { animation-delay: 50ms; }
.stagger-item:nth-child(3) { animation-delay: 100ms; }
.stagger-item:nth-child(4) { animation-delay: 150ms; }
.stagger-item:nth-child(5) { animation-delay: 200ms; }
.stagger-item:nth-child(6) { animation-delay: 250ms; }
.stagger-item:nth-child(7) { animation-delay: 300ms; }
.stagger-item:nth-child(8) { animation-delay: 350ms; }
.stagger-item:nth-child(9) { animation-delay: 400ms; }
.stagger-item:nth-child(10) { animation-delay: 450ms; }

.stagger-section {
  opacity: 0;
  animation: fadeInUp var(--duration-slow) var(--ease-out) forwards;
}

.stagger-section:nth-of-type(1) { animation-delay: 80ms; }
.stagger-section:nth-of-type(2) { animation-delay: 160ms; }
.stagger-section:nth-of-type(3) { animation-delay: 240ms; }
.stagger-section:nth-of-type(4) { animation-delay: 320ms; }
.stagger-section:nth-of-type(5) { animation-delay: 400ms; }


/* ========================================
   ACTIVE NAV INDICATOR
   ======================================== */

.nav-indicator {
  position: absolute;
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--color-primary);
  transition: left var(--duration-slow) var(--ease-spring),
              width var(--duration-slow) var(--ease-spring);
}


/* ========================================
   SKELETON LOADING PLACEHOLDERS
   ======================================== */

.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--color-bg-secondary);
  border-radius: var(--radius-lg);
}

.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.6) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}

.skeleton-text {
  height: 0.875rem;
  border-radius: var(--radius-sm);
}

.skeleton-title {
  height: 1.25rem;
  width: 60%;
  border-radius: var(--radius-sm);
}

.skeleton-avatar {
  border-radius: var(--radius-xl);
}

.skeleton-card {
  border-radius: var(--radius-2xl);
  border: 1px solid var(--color-border-light);
}


/* ========================================
   FORM COMPONENT CLASSES
   ======================================== */

.input-default {
  width: 100%;
  padding: 0.625rem 1rem;
  background: var(--color-bg-secondary);
  border: 2px solid transparent;
  border-radius: var(--radius-xl);
  color: var(--color-text-primary);
  font-size: var(--text-body-sm);
  transition: all var(--duration-normal) var(--ease-in-out);
}

.input-default::placeholder {
  color: var(--color-text-tertiary);
}

.input-default:focus {
  outline: none;
  background: var(--color-bg-base);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-glow);
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: white;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-xl);
  border: none;
  font-weight: var(--font-medium);
  font-size: var(--text-body-sm);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-in-out);
}

.btn-primary:hover {
  box-shadow: 0 4px 12px rgba(8, 145, 178, 0.25);
}

.btn-primary:active {
  transform: scale(0.98);
}

.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--color-bg-base);
  color: var(--color-text-primary);
  padding: 0.5rem 1rem;
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  font-weight: var(--font-medium);
  font-size: var(--text-body-sm);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-in-out);
}

.btn-secondary:hover {
  background: var(--color-bg-secondary);
}

.btn-secondary:active {
  transform: scale(0.98);
}


/* ========================================
   SEARCH BAR ANIMATION
   ======================================== */

.search-expand {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height var(--duration-slow) var(--ease-out),
              opacity var(--duration-normal) var(--ease-out),
              margin var(--duration-slow) var(--ease-out);
}

.search-expand.open {
  max-height: 60px;
  opacity: 1;
}