/* prototype/css/tokens.css */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard.css");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");

:root {
  /* Color Palette */
  --bg-page: #E6F0FA;
  --bg-surface: #FFFFFF;
  --primary: #1976D2;
  --primary-hover: #1565C0;
  --success: #C8E6C9;
  --success-text: #2E7D32;
  --warning: #FFF9C4;
  --warning-text: #F57F17;
  --error: #FFCDD2;
  --error-text: #C62828;
  --text-primary: #212121;
  --text-secondary: #757575;
  --border-color: #E0E0E0;
  
  /* Sidebar */
  --sidebar-width: 250px;
  --sidebar-bg: #FFFFFF;
  --sidebar-hover: #F5F5F5;
  --sidebar-active-bg: #E3F2FD;
  --sidebar-active-text: #1976D2;

  /* Header */
  --header-height: 64px;
  
  /* Typography */
  --font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
  --font-size-base: 14px;
  --font-size-h1: 24px;
  --font-size-h2: 18px;
  --font-size-caption: 12px;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;

  /* Shadows & Borders */
  --shadow-elevation-1: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  --shadow-elevation-2: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-full: 9999px;
  
  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

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

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  color: var(--text-primary);
  background-color: var(--bg-page);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1 {
  font-size: var(--font-size-h1);
  font-weight: 600; /* SemiBold */
}

h2 {
  font-size: var(--font-size-h2);
  font-weight: 500; /* Medium */
}

.caption {
  font-size: var(--font-size-caption);
  color: var(--text-secondary);
}