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

:root {
  /* Brand palette */
  --brand-50: #EEF2FF;
  --brand-100: #E0E7FF;
  --brand-200: #C7D2FE;
  --brand-300: #A5B4FC;
  --brand-400: #818CF8;
  --brand: #6366F1;
  --brand-600: #4F46E5;
  --brand-dark: #4338CA;
  --brand-800: #3730A3;
  --brand-900: #312E81;
  --brand-light: var(--brand-400);
  --brand-bg: var(--brand-50);

  /* Warm grays (Zinc) */
  --gray-50: #FAFAFA;
  --gray-100: #F4F4F5;
  --gray-200: #E4E4E7;
  --gray-300: #D4D4D8;
  --gray-400: #A1A1AA;
  --gray-500: #71717A;
  --gray-600: #52525B;
  --gray-700: #3F3F46;
  --gray-800: #27272A;
  --gray-900: #18181B;

  /* Semantic colors */
  --red: #EF4444;
  --red-light: #FEE2E2;
  --green: #10B981;
  --green-light: #D1FAE5;
  --yellow: #F59E0B;
  --yellow-light: #FEF3C7;
  --blue: #3B82F6;
  --blue-light: #DBEAFE;

  /* Typography */
  --font-sans: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Consolas', monospace;

  /* Layout */
  --header-h: 56px;
  --sidebar-w: 260px;

  /* Shadows */
  --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.07), 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.04);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.08), 0 8px 10px -6px rgba(0,0,0,0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0,0,0,0.15);
  --shadow-card-hover: 0 8px 25px -5px rgba(99,102,241,0.12), 0 4px 10px -3px rgba(0,0,0,0.06);

  /* Radius */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 0.15s;
  --duration-normal: 0.25s;
  --duration-slow: 0.4s;
  --transition: var(--duration-normal) var(--ease-out);
  --transition-fast: var(--duration-fast) var(--ease-out);
  --transition-slow: var(--duration-slow) var(--ease-out);

  /* Glass */
  --glass-bg: rgba(255,255,255,0.72);
  --glass-blur: blur(16px);
  --glass-border: rgba(255,255,255,0.25);

  /* Spacing scale (4px base) */
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* Focus ring */
  --focus-ring: 0 0 0 2px var(--brand-bg), 0 0 0 4px var(--brand-300);
}

/* Reset */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 14px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { font-family: var(--font-sans); color: var(--gray-800); background: var(--gray-50); line-height: 1.6; overflow: hidden; height: 100vh; }
a { color: var(--brand); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--brand-dark); }
button { cursor: pointer; font-family: inherit; }
input, select, textarea { font-family: inherit; }
code, pre { font-family: var(--font-mono); }

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

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }

/* Focus visible */
:focus-visible { outline: none; box-shadow: var(--focus-ring); }