/**
 * KCA Reservation System - Design Tokens
 * Theme: Refined Elegance - Premium Minimal Light
 *
 * A sophisticated, light-mode design system inspired by
 * luxury hotels and premium concierge services.
 */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&display=swap');

:root {
  /* ═══════════════════════════════════════════════════════════
     COLOR SYSTEM - Vibrant Orange & Warm Terracotta
     ═══════════════════════════════════════════════════════════ */

  /* Primary - Vibrant Orange (Brand Color) */
  --color-primary-900: #6b2502;
  --color-primary-800: #872e03;
  --color-primary-700: #a33803;
  --color-primary-600: #c94504;
  --color-primary-500: #ea5305;
  --color-primary-400: #f06d2a;
  --color-primary-300: #f58d55;
  --color-primary-200: #fab185;
  --color-primary-100: #fdd5bb;
  --color-primary-50: #fff0e6;

  /* Secondary - Warm Terracotta (Accent Color) */
  --color-secondary-900: #4a2c1a;
  --color-secondary-800: #5d3820;
  --color-secondary-700: #744628;
  --color-secondary-600: #8b5633;
  --color-secondary-500: #a66842;
  --color-secondary-400: #bb8562;
  --color-secondary-300: #d0a385;
  --color-secondary-200: #e5c4ab;
  --color-secondary-100: #f5e6da;
  --color-secondary-50: #faf3ee;

  /* Neutral - Warm Stone (Elegant Grays) */
  --color-neutral-950: #1c1917;
  --color-neutral-900: #292524;
  --color-neutral-800: #44403c;
  --color-neutral-700: #57534e;
  --color-neutral-600: #78716c;
  --color-neutral-500: #a8a29e;
  --color-neutral-400: #d6d3d1;
  --color-neutral-300: #e7e5e4;
  --color-neutral-200: #f5f5f4;
  --color-neutral-100: #fafaf9;
  --color-neutral-50: #ffffff;

  /* Semantic Colors */
  --color-success-600: #059669;
  --color-success-500: #10b981;
  --color-success-400: #34d399;
  --color-success-100: #d1fae5;
  --color-success-50: #ecfdf5;

  --color-warning-600: #d97706;
  --color-warning-500: #f59e0b;
  --color-warning-400: #fbbf24;
  --color-warning-100: #fef3c7;
  --color-warning-50: #fffbeb;

  --color-danger-600: #dc2626;
  --color-danger-500: #ef4444;
  --color-danger-400: #f87171;
  --color-danger-100: #fee2e2;
  --color-danger-50: #fef2f2;

  --color-info-600: #0284c7;
  --color-info-500: #0ea5e9;
  --color-info-400: #38bdf8;
  --color-info-100: #e0f2fe;
  --color-info-50: #f0f9ff;

  /* ═══════════════════════════════════════════════════════════
     SEMANTIC COLORS - Backgrounds & Text
     ═══════════════════════════════════════════════════════════ */

  /* Backgrounds */
  --bg-primary: #ffffff;
  --bg-secondary: #fafaf9;
  --bg-tertiary: #f5f5f4;
  --bg-card: #ffffff;
  --bg-elevated: #ffffff;
  --bg-overlay: rgba(28, 25, 23, 0.5);

  /* Text Colors */
  --text-primary: #1c1917;
  --text-secondary: #57534e;
  --text-tertiary: #78716c;
  --text-muted: #a8a29e;
  --text-inverse: #ffffff;

  /* Border Colors */
  --border-default: #e7e5e4;
  --border-light: #f5f5f4;
  --border-dark: #d6d3d1;
  --border-focus: var(--color-primary-400);

  /* ═══════════════════════════════════════════════════════════
     SHADOWS - Subtle & Elegant
     ═══════════════════════════════════════════════════════════ */

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.03);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.06), 0 4px 8px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.08), 0 8px 16px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 24px 64px rgba(0, 0, 0, 0.1), 0 12px 24px rgba(0, 0, 0, 0.05);

  /* Colored Shadows - For emphasis */
  --shadow-primary: 0 4px 14px rgba(234, 83, 5, 0.25);
  --shadow-primary-lg: 0 8px 24px rgba(234, 83, 5, 0.3);
  --shadow-secondary: 0 4px 14px rgba(166, 104, 66, 0.15);

  /* ═══════════════════════════════════════════════════════════
     GRADIENTS - Refined & Subtle
     ═══════════════════════════════════════════════════════════ */

  /* Primary Button Gradient */
  --gradient-primary: linear-gradient(135deg, #c94504 0%, #ea5305 50%, #f06d2a 100%);
  --gradient-primary-hover: linear-gradient(135deg, #a33803 0%, #c94504 50%, #ea5305 100%);

  /* Secondary/Header Gradient */
  --gradient-secondary: linear-gradient(135deg, #872e03 0%, #a33803 50%, #c94504 100%);

  /* Secondary Light - 밝은 헤더용 그라디언트 */
  --gradient-secondary-light: linear-gradient(135deg, #f06d2a 0%, #f58d55 50%, #fab185 100%);

  /* Subtle Background Gradients */
  --gradient-bg-warm: linear-gradient(180deg, #fff0e6 0%, #fafaf9 100%);
  --gradient-bg-cool: linear-gradient(180deg, #f5f8fb 0%, #fafaf9 100%);

  /* Text Gradient (for special headings) */
  --gradient-text-primary: linear-gradient(135deg, #c94504 0%, #ea5305 50%, #f06d2a 100%);

  /* ═══════════════════════════════════════════════════════════
     TYPOGRAPHY
     ═══════════════════════════════════════════════════════════ */

  /* Font Families */
  --font-display: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
  --font-accent: 'Cormorant Garamond', Georgia, serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Font Sizes - Fixed Scale */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;

  /* Font Weights */
  --font-light: 300;
  --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.05em;
  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;

  /* ═══════════════════════════════════════════════════════════
     SPACING & SIZING
     ═══════════════════════════════════════════════════════════ */

  --space-0: 0;
  --space-px: 1px;
  --space-0\.5: 0.125rem;
  --space-1: 0.25rem;
  --space-1\.5: 0.375rem;
  --space-2: 0.5rem;
  --space-2\.5: 0.625rem;
  --space-3: 0.75rem;
  --space-3\.5: 0.875rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-9: 2.25rem;
  --space-10: 2.5rem;
  --space-11: 2.75rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-28: 7rem;
  --space-32: 8rem;

  /* Container Widths */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1200px;
  --container-2xl: 1400px;

  /* ═══════════════════════════════════════════════════════════
     BORDER RADIUS
     ═══════════════════════════════════════════════════════════ */

  --radius-none: 0;
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-3xl: 1.5rem;
  --radius-full: 9999px;

  /* ═══════════════════════════════════════════════════════════
     TRANSITIONS & ANIMATIONS
     ═══════════════════════════════════════════════════════════ */

  /* Timing Functions */
  --ease-linear: linear;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* Durations */
  --duration-instant: 50ms;
  --duration-fast: 150ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;
  --duration-slower: 400ms;

  /* ═══════════════════════════════════════════════════════════
     Z-INDEX SCALE
     ═══════════════════════════════════════════════════════════ */

  --z-behind: -1;
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-overlay: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
  --z-toast: 800;
  --z-max: 9999;

  /* ═══════════════════════════════════════════════════════════
     COMPONENT TOKENS
     ═══════════════════════════════════════════════════════════ */

  /* Header */
  --header-height: 72px;
  --header-bg: var(--bg-primary);
  --header-border: var(--border-light);

  /* Cards */
  --card-bg: var(--bg-card);
  --card-border: var(--border-default);
  --card-radius: var(--radius-2xl);
  --card-shadow: var(--shadow-sm);
  --card-shadow-hover: var(--shadow-lg);

  /* Inputs */
  --input-bg: var(--bg-primary);
  --input-border: var(--border-dark);
  --input-border-focus: var(--color-primary-400);
  --input-radius: var(--radius-lg);
  --input-shadow-focus: 0 0 0 3px rgba(234, 83, 5, 0.15);

  /* Buttons */
  --btn-radius: var(--radius-lg);
  --btn-font-weight: var(--font-semibold);

  /* ═══════════════════════════════════════════════════════════
     MOBILE / RESPONSIVE TOKENS
     ═══════════════════════════════════════════════════════════ */

  /* Admin Layout */
  --admin-header-height: 64px;
  --admin-header-height-mobile: 56px;
  --admin-sidebar-width: 260px;
  --admin-sidebar-width-mobile: 280px;

  /* Touch Targets (Apple HIG / Material Design) */
  --touch-target-min: 44px;

  /* Mobile Padding */
  --mobile-padding: var(--space-4);
}

/* ═══════════════════════════════════════════════════════════
   GLOBAL RESET & BASE STYLES
   ═══════════════════════════════════════════════════════════ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--bg-secondary);
  min-height: 100vh;
  overflow-x: hidden;
}

/* Selection Colors */
::selection {
  background: var(--color-primary-200);
  color: var(--color-primary-900);
}

/* Focus Styles */
:focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}

/* Scrollbar - Minimal */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--bg-tertiary);
}

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

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

/* Typography Base */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  color: var(--text-primary);
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); }

p {
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}

a {
  color: var(--color-primary-600);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

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

/* Image Defaults */
img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Button Reset */
button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

/* Input Reset */
input, textarea, select {
  font-family: inherit;
  font-size: inherit;
}

/* List Reset */
ul, ol {
  list-style: none;
}

/* Table Reset */
table {
  border-collapse: collapse;
  width: 100%;
}