:root {
  
  --color-green-50:  #EEF8F0;
  --color-green-100: #D5EFDA;
  --color-green-300: #8FD39B;
  --color-green-400: #7CD08A;   
  --color-green-500: #55B765;   
  --color-green-600: #2F8F4A;
  --color-green-700: #237A3B;   
  --color-green-800: #1E6B34;

  --color-ink-950: #060D14;
  --color-ink-900: #0B1621;     
  --color-ink-800: #13222F;
  --color-ink-700: #1D3040;
  --color-ink-600: #2B4255;

  --color-gray-600: #5B6B7A;    
  --color-gray-500: #7A8896;
  --color-gray-400: #A7B4C0;    
  --color-gray-300: #C9D2DA;
  --color-gray-200: #E3E8ED;
  --color-gray-100: #F1F4F6;
  --color-white:    #FFFFFF;

  --color-paper:    #F5F3EE;    
  --color-paper-2:  #ECE8DF;

  
  --data-1: #2F6BFF;   
  --data-2: #19B7D3;   
  --data-3: #55B765;   
  --data-4: #F2C94C;   
  --data-5: #F2733C;   
  --data-ramp: linear-gradient(90deg, var(--data-1), var(--data-2), var(--data-3), var(--data-4), var(--data-5));

  
  --color-signal:  #F2733C;
  --color-info:    #1F6FEB;
  --color-success: var(--color-green-700);
  --color-danger:  #C8372D;

  
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --font-mono: "JetBrains Mono", "Pretendard Variable", Pretendard, "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-serif: "Noto Serif KR", "Nanum Myeongjo", serif;

  
  --fs-display: clamp(2.5rem, 1.5rem + 4.4vw, 5.5rem);   
  --fs-h1:      clamp(2rem, 1.4rem + 2.6vw, 3.75rem);    
  --fs-h2:      clamp(1.625rem, 1.25rem + 1.6vw, 2.75rem); 
  --fs-h3:      clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);  
  --fs-lead:    clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem); 
  --fs-body:    1rem;      
  --fs-small:   0.875rem;  
  --fs-caption: 0.75rem;   

  --lh-tight: 1.15;
  --lh-snug:  1.35;
  --lh-body:  1.7;          
  --ls-tight: -0.03em;      
  --ls-mono:  0.08em;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-black:   800;

  
  --space-1: 0.25rem;  --space-2: 0.5rem;  --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.25rem;  --space-6: 1.5rem;  --space-8: 2rem;    --space-10: 2.5rem;
  --space-12: 3rem;    --space-16: 4rem;   --space-20: 5rem;   --space-24: 6rem;
  --space-section: clamp(4.5rem, 3rem + 6vw, 9rem);

  
  --container: 1280px;
  --container-narrow: 880px;
  --gutter: clamp(1rem, 0.5rem + 2vw, 2rem);   
  --header-h: 72px;
  

  
  --radius-xs: 4px; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 24px; --radius-pill: 999px;
  --border-hair: 1px solid rgba(11, 22, 33, 0.10);
  --shadow-1: 0 1px 2px rgba(11,22,33,.06), 0 2px 8px rgba(11,22,33,.06);
  --shadow-2: 0 8px 24px rgba(11,22,33,.10), 0 2px 6px rgba(11,22,33,.06);
  --shadow-3: 0 24px 64px rgba(11,22,33,.18);

  
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-1: 150ms; --dur-2: 250ms; --dur-3: 450ms; --dur-4: 800ms;
  --dur-kenburns: 18s;

  
  --z-header: 100; --z-drawer: 200; --z-toast: 300;

  
  --focus-ring: 0 0 0 3px var(--color-white), 0 0 0 6px var(--color-info);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; --dur-4: 0ms; --dur-kenburns: 0s; }
}