/*
 * VK Design System · tokens
 * The palette follows the KRDS scale (primary/secondary/gray steps); everything else is ours.
 * Use these variables instead of raw values. Add a token here before using a new color twice.
 */
:root {
  color-scheme: light;

  /* Primary */
  --vk-primary-5: #eef5ff;
  --vk-primary-10: #d8e8ff;
  --vk-primary-20: #b5d3ff;
  --vk-primary-50: #246beb;
  --vk-primary-60: #1d56bc;
  --vk-primary-70: #16408d;

  /* Secondary */
  --vk-secondary-5: #eef2f7;
  --vk-secondary-10: #dce4ed;
  --vk-secondary-70: #334968;

  /* Gray */
  --vk-gray-0: #fff;
  --vk-gray-3: #f8f9fa;
  --vk-gray-5: #f4f5f6;
  --vk-gray-10: #e6e8ea;
  --vk-gray-20: #cdd1d5;
  --vk-gray-30: #b1b8be;
  --vk-gray-50: #6d7882;
  --vk-gray-70: #384450;
  --vk-gray-90: #1e2832;

  /* Status: 5 = background tint, 20 = border, 60 = text/icon */
  --vk-success-5: #eaf6ec;
  --vk-success-20: #b7dfc0;
  --vk-success-60: #267337;
  --vk-danger-5: #fff1f4;
  --vk-danger-10: #fdeef2;
  --vk-danger-20: #f3aab9;
  --vk-danger-60: #d50136;
  --vk-warning-5: #fff8e8;
  --vk-warning-20: #f1c57a;
  --vk-warning-50: #c27c0e;
  --vk-warning-70: #6d4500;

  --vk-focus: #003675;

  /* Typography */
  --vk-font: "Pretendard GOV", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --vk-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Layout */
  --vk-content: 1200px;
  --vk-container: min(calc(100% - 48px), var(--vk-content));
  --vk-container-mobile: calc(100% - 32px);

  /* Shape */
  --vk-radius-sm: 4px;
  --vk-radius-md: 6px;
  --vk-radius-lg: 10px;
  --vk-radius-xl: 12px;
  --vk-radius-pill: 999px;

  /* Elevation */
  --vk-shadow-sm: 0 2px 8px rgba(30, 40, 50, .12);
  --vk-shadow-md: 0 8px 24px rgba(30, 40, 50, .08);
  --vk-shadow-lg: 0 12px 32px rgba(30, 40, 50, .14);
  --vk-shadow-modal: 0 24px 72px rgba(0, 0, 0, .24);
  --vk-backdrop: rgba(30, 40, 50, .68);
}