/**
 * variables.css
 * Premium Editorial Design System — "Precision"
 * Deep Noir + Gold Accent 기반 상위 0.1% 에디토리얼 디자인 토큰
 */

:root {
   /* ============================================
     색상 시스템 (Color System) — Deep Noir + Gold
     ============================================ */

   /* Primary Colors — Refined Gold */
   --color-primary: #C9A96E;
   --color-primary-hover: #D4B97E;
   --color-primary-light: rgba(201, 169, 110, 0.15);
   --color-primary-dark: #A88B52;

   /* Secondary Colors — Deep Navy */
   --color-secondary: #1A1A2E;
   --color-secondary-hover: #252542;
   --color-secondary-light: #0F0F1A;

   /* Semantic Colors */
   --color-success: #4ADE80;
   --color-success-light: rgba(74, 222, 128, 0.08);
   --color-success-dark: #22C55E;

   --color-danger: #EF4444;
   --color-danger-light: rgba(239, 68, 68, 0.08);
   --color-danger-dark: #DC2626;

   --color-warning: #F59E0B;
   --color-warning-light: rgba(245, 158, 11, 0.08);
   --color-warning-dark: #D97706;
   --color-warning-text: #92400E;

   --color-info: #60A5FA;
   --color-info-light: rgba(96, 165, 250, 0.08);
   --color-info-dark: #3B82F6;

   /* Neutral Colors — True Noir Palette */
   --color-white: #F5F0EB;
   --color-black: #000000;
   --color-gray-100: #0D0D0F;
   --color-gray-200: #141416;
   --color-gray-300: #1E1E22;
   --color-gray-400: #2A2A30;
   --color-gray-500: #4A4A52;
   --color-gray-600: #6E6E78;
   --color-gray-700: #9E9EA8;
   --color-gray-800: #CCCCD2;
   --color-gray-900: #F5F0EB;

   /* Text Colors — Sophisticated Readability */
   --color-text-primary: #F5F0EB;
   --color-text-secondary: #9E9EA8;
   --color-text-muted: #6E6E78;
   --color-text-disabled: #4A4A52;

   /* Background Colors — Deep Noir */
   --color-bg-primary: #0B0B0D;
   --color-bg-secondary: #0D0D0F;
   --color-bg-disabled: #141416;

   /* Glassmorphism Tokens — Subtle */
   --glass-bg: rgba(255, 255, 255, 0.02);
   --glass-border: rgba(255, 255, 255, 0.06);
   --glass-blur: 20px;

   /* Gradient Colors — Editorial */
   --gradient-primary: linear-gradient(135deg, #C9A96E 0%, #E8D5A3 100%);
   --gradient-success: linear-gradient(135deg, #4ADE80 0%, #86EFAC 100%);
   --gradient-danger: linear-gradient(135deg, #EF4444 0%, #FCA5A5 100%);
   --gradient-dark: linear-gradient(180deg, #0B0B0D 0%, #141416 100%);
   --gradient-hero: linear-gradient(180deg, transparent 0%, rgba(11, 11, 13, 0.8) 100%);

   /* Border Colors — Whisper Light */
   --color-border-light: rgba(255, 255, 255, 0.06);
   --color-border-medium: rgba(255, 255, 255, 0.12);
   --color-border-dark: rgba(255, 255, 255, 0.20);


   /* ============================================
     타이포그래피 (Typography) — Serif + Sans Dual System
     ============================================ */

   /* Font Families */
   --font-family-heading: 'Playfair Display', 'Noto Serif KR', Georgia, serif;
   --font-family-primary: 'Inter', 'Noto Sans KR', -apple-system, BlinkMacSystemFont,
      'Segoe UI', sans-serif;
   --font-family-monospace: 'JetBrains Mono', 'Courier New', monospace;

   /* Font Sizes — Cinematic Scale */
   --font-size-xs: 0.75rem;      /* 12px */
   --font-size-sm: 0.875rem;     /* 14px */
   --font-size-base: 1rem;       /* 16px */
   --font-size-md: 1.125rem;     /* 18px */
   --font-size-lg: 1.25rem;      /* 20px */
   --font-size-xl: 1.75rem;      /* 28px */
   --font-size-2xl: 2.5rem;      /* 40px */
   --font-size-3xl: 3.5rem;      /* 56px */
   --font-size-4xl: 5rem;        /* 80px — Hero */
   --font-size-5xl: 7rem;        /* 112px — Statement */

   /* Font Weights */
   --font-weight-light: 300;
   --font-weight-normal: 400;
   --font-weight-medium: 500;
   --font-weight-semibold: 600;
   --font-weight-bold: 700;

   /* Line Heights */
   --line-height-tight: 1.05;
   --line-height-snug: 1.2;
   --line-height-normal: 1.65;
   --line-height-loose: 2;

   /* Letter Spacing */
   --tracking-tight: -0.03em;
   --tracking-normal: 0;
   --tracking-wide: 0.08em;
   --tracking-wider: 0.15em;
   --tracking-widest: 0.25em;


   /* ============================================
     간격 시스템 (Spacing System) — Editorial Whitespace
     ============================================ */

   --spacing-xs: 0.375rem;   /* 6px */
   --spacing-sm: 0.75rem;    /* 12px */
   --spacing-md: 1.25rem;    /* 20px */
   --spacing-lg: 2rem;       /* 32px */
   --spacing-xl: 3.5rem;     /* 56px */
   --spacing-2xl: 6rem;      /* 96px */
   --spacing-3xl: 10rem;     /* 160px */


   /* ============================================
     레이아웃 (Layout)
     ============================================ */

   /* Container — Full Viewport */
   --container-max-width: 1200px;
   --container-narrow: 800px;
   --container-padding: 80px;
   --container-padding-mobile: 24px;

   /* Border Radius — Refined */
   --radius-sm: 4px;
   --radius-md: 8px;
   --radius-lg: 12px;
   --radius-xl: 16px;
   --radius-full: 100px;
   --radius-circle: 50%;

   /* Shadows — Subtle & Deep */
   --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
   --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
   --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5);
   --shadow-xl: 0 24px 80px rgba(0, 0, 0, 0.6);
   --shadow-glow: 0 0 30px rgba(201, 169, 110, 0.15);
   --shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.5);

   /* Z-index Layers */
   --z-index-nav: 50;
   --z-index-dropdown: 100;
   --z-index-modal: 200;
   --z-index-tooltip: 300;
   --z-index-notification: 400;


   /* ============================================
     애니메이션 (Animation)
     ============================================ */

   /* Transition Durations */
   --transition-fast: 0.2s;
   --transition-base: 0.4s;
   --transition-slow: 0.8s;
   --transition-slower: 1.2s;

   /* Transition Easings */
   --ease-in: cubic-bezier(0.4, 0, 1, 1);
   --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
   --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
   --ease-elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6);


   /* ============================================
     컴포넌트별 변수 (Component Variables)
     ============================================ */

   /* Button — Minimalist Border */
   --btn-padding-y: 14px;
   --btn-padding-x: 36px;
   --btn-border-radius: var(--radius-sm);
   --btn-font-size: var(--font-size-sm);
   --btn-font-weight: var(--font-weight-medium);
   --btn-transition: all var(--transition-base) var(--ease-out);
   --btn-transform-hover: translateY(-2px);
   --btn-transform-active: translateY(0);

   /* Card — Editorial Clean */
   --card-padding: 40px;
   --card-border-radius: var(--radius-md);
   --card-bg: rgba(255, 255, 255, 0.02);
   --card-border: 1px solid var(--glass-border);
   --card-shadow: var(--shadow-md);
   --card-backdrop: blur(var(--glass-blur));

   /* Input */
   --input-padding-y: 14px;
   --input-padding-x: 20px;
   --input-border-radius: var(--radius-sm);
   --input-border: 1px solid var(--color-border-light);
   --input-focus-border: var(--color-primary);

   /* Progress Bar */
   --progress-height: 3px;
   --progress-border-radius: var(--radius-full);
   --progress-bg: var(--color-gray-300);
   --progress-fill-bg: var(--gradient-primary);
   --progress-transition: width 1s var(--ease-in-out);

   /* Upload Section */
   --upload-border-width: 1px;
   --upload-border-style: solid;
   --upload-border-color: var(--color-border-light);
   --upload-border-radius: var(--radius-md);
   --upload-padding: 60px;
   --upload-bg: transparent;
   --upload-hover-border: var(--color-primary);
   --upload-hover-bg: rgba(201, 169, 110, 0.03);

   /* Notice Box */
   --notice-padding: 24px;
   --notice-border-width: 1px;
   --notice-border-radius: var(--radius-md);
   --notice-gap: 16px;

   /* Navigation */
   --nav-height: 80px;
   --nav-bg: transparent;
   --nav-bg-scrolled: rgba(11, 11, 13, 0.9);


   /* ============================================
     반응형 브레이크포인트 (Responsive Breakpoints)
     ============================================ */

   --breakpoint-xs: 0;
   --breakpoint-sm: 576px;
   --breakpoint-md: 768px;
   --breakpoint-lg: 992px;
   --breakpoint-xl: 1200px;
   --breakpoint-2xl: 1400px;
}