/* ============================================================
   KRDS Design System: Colors & Typography
   Korea Government Design System v1.0.0
   공공 AX 프로젝트 / Insight-Note
   ============================================================ */

/* ── Fonts ─────────────────────────────────────────────────── */
@font-face {
  font-family: 'Pretendard GOV';
  font-weight: 100;
  font-style: normal;
  src: url('fonts/PretendardGOV-Thin.otf') format('opentype');
}
@font-face {
  font-family: 'Pretendard GOV';
  font-weight: 200;
  font-style: normal;
  src: url('fonts/PretendardGOV-ExtraLight.otf') format('opentype');
}
@font-face {
  font-family: 'Pretendard GOV';
  font-weight: 300;
  font-style: normal;
  src: url('fonts/PretendardGOV-Light.otf') format('opentype');
}
@font-face {
  font-family: 'Pretendard GOV';
  font-weight: 400;
  font-style: normal;
  src: url('fonts/PretendardGOV-Regular.otf') format('opentype');
}
@font-face {
  font-family: 'Pretendard GOV';
  font-weight: 500;
  font-style: normal;
  src: url('fonts/PretendardGOV-Medium.otf') format('opentype');
}
@font-face {
  font-family: 'Pretendard GOV';
  font-weight: 600;
  font-style: normal;
  src: url('fonts/PretendardGOV-SemiBold.otf') format('opentype');
}
@font-face {
  font-family: 'Pretendard GOV';
  font-weight: 700;
  font-style: normal;
  src: url('fonts/PretendardGOV-Bold.otf') format('opentype');
}
@font-face {
  font-family: 'Pretendard GOV';
  font-weight: 800;
  font-style: normal;
  src: url('fonts/PretendardGOV-ExtraBold.otf') format('opentype');
}
@font-face {
  font-family: 'Pretendard GOV';
  font-weight: 900;
  font-style: normal;
  src: url('fonts/PretendardGOV-Black.otf') format('opentype');
}

/* ── Color Tokens ───────────────────────────────────────────── */
:root {

  /* Gray Scale (0~100) */
  --color-gray-0:   #ffffff;
  --color-gray-5:   #f4f5f6;
  --color-gray-10:  #eef2f7;
  --color-gray-20:  #e6e8ea;
  --color-gray-30:  #cdd1d5;
  --color-gray-40:  #b1b8be;
  --color-gray-50:  #8a949e;   /* 주의: 이 파일의 gray·primary·secondary 단계는 KRDS 공식 값과 다르다. 새 코드는 아래 --krds-* 팔레트(파일 끝)를 원재료로 쓴다 */
  --color-gray-60:  #58616a;
  --color-gray-70:  #464c53;
  --color-gray-80:  #333b41;
  --color-gray-90:  #1e2124;
  --color-gray-95:  #131416;
  --color-gray-100: #000000;

  /* Primary Blue Scale */
  --color-primary-0:   #ffffff;
  --color-primary-5:   #ecf2fe;
  --color-primary-10:  #d8e5fd;
  --color-primary-20:  #afc9fb;
  --color-primary-30:  #7aaef8;
  --color-primary-40:  #4f91f6;
  --color-primary-50:  #256ef4;   /* Base primary */
  --color-primary-60:  #1155cc;
  --color-primary-70:  #0b3da0;
  --color-primary-80:  #052b57;
  --color-primary-90:  #052b57;
  --color-primary-95:  #031830;
  --color-primary-100: #000000;

  /* Secondary (Navy) Scale */
  --color-secondary-0:   #ffffff;
  --color-secondary-5:   #eef2f7;
  --color-secondary-10:  #d6e0ed;
  --color-secondary-20:  #98acca;
  --color-secondary-30:  #395076;   /* text base dark mode */
  --color-secondary-40:  #22395a;   /* AA dark mode */
  --color-secondary-50:  #052b57;   /* Base secondary */
  --color-secondary-60:  #041e3d;
  --color-secondary-70:  #030c1e;
  --color-secondary-80:  #020810;
  --color-secondary-90:  #010408;
  --color-secondary-95:  #000204;
  --color-secondary-100: #000000;

  /* Semantic / Alias Colors */
  --color-bg-default:    #ffffff;
  --color-bg-subtle:     #f4f5f6;
  --color-bg-muted:      #eef2f7;

  --color-fg-primary:    #13141a;   /* near-black text */
  --color-fg-secondary:  #464c53;   /* body text */
  --color-fg-tertiary:   #58616a;   /* secondary text · 5.81:1 on white */
  --color-fg-quaternary: #6e7780;   /* meta · 4.50:1 on white (WCAG AA 정상 텍스트 통과) */
  --color-fg-disabled:   #b1b8be;   /* disabled state: 비활성에만 사용 */
  /* Overlay: 모달 backdrop. 정부 톤 유지 위해 fg-primary 16% (rgba 변환) */
  --color-overlay-modal: rgba(19, 20, 26, 0.36);
  --color-fg-inverse:    #ffffff;

  --color-border-default:  #cdd1d5;
  --color-border-subtle:   #d6e4eb;
  --color-border-strong:   #8a949e;
  --color-border-primary:  #256ef4;

  --color-action-primary:          #256ef4;
  --color-action-primary-hover:    #1155cc;
  --color-action-primary-pressed:  #0b3da0;
  --color-action-primary-disabled: #b1b8be;
  --color-action-primary-surface:  #ecf2fe;

  --color-action-secondary:         #052b57;
  --color-action-secondary-hover:   #041e3d;
  --color-action-secondary-pressed: #030c1e;

  /* Status Colors */
  --color-status-info:     #256ef4;
  --color-status-success:  #1a7f43;
  --color-status-warning:  #d97706;
  --color-status-danger:   #dc2626;

  /* Dark / High-contrast surface */
  --color-surface-dark:    #1e2124;
  --color-surface-darker:  #13141a;

  /* ── Typography Tokens ─────────────────────────────────── */
  --font-family-base: 'Pretendard GOV', 'Noto Sans KR', sans-serif;
  --font-line-height: 1.5;
  --font-letter-spacing-base: 0px;
  --font-letter-spacing-heading: 0px;

  /* Display (marketing / hero: Bold) */
  --font-display-large-size:   60px;
  --font-display-large-weight: 700;
  --font-display-medium-size:  44px;
  --font-display-medium-weight: 700;
  --font-display-small-size:   36px;
  --font-display-small-weight: 700;

  /* Heading (Bold) */
  --font-heading-xlarge-size:   40px;
  --font-heading-xlarge-weight: 700;
  --font-heading-large-size:    32px;
  --font-heading-large-weight:  700;
  --font-heading-medium-size:   24px;
  --font-heading-medium-weight: 700;
  --font-heading-small-size:    20px;
  --font-heading-small-weight:  700;
  --font-heading-xsmall-size:   17px;
  --font-heading-xsmall-weight: 700;
  --font-heading-xxsmall-size:  15px;
  --font-heading-xxsmall-weight: 700;

  /* Body */
  --font-body-large-size:    19px;
  --font-body-large-weight:  400;
  --font-body-medium-size:   17px;
  --font-body-medium-weight: 400;
  --font-body-small-size:    15px;
  --font-body-small-weight:  400;
  --font-body-xsmall-size:   13px;
  --font-body-xsmall-weight: 400;

  /* Body Bold variants */
  --font-body-large-bold-weight:   700;
  --font-body-medium-bold-weight:  700;
  --font-body-small-bold-weight:   700;
  --font-body-xsmall-bold-weight:  700;

  /* ── Spacing Tokens ────────────────────────────────────── */
  /* Gap tokens */
  --gap-1:  2px;
  --gap-2:  4px;
  --gap-3:  8px;
  --gap-4:  12px;
  --gap-5:  16px;
  --gap-6:  20px;
  --gap-7:  24px;
  --gap-8:  32px;
  --gap-9:  40px;
  --gap-10: 48px;
  --gap-11: 64px;
  --gap-12: 80px;

  /* Padding tokens */
  --padding-2:  4px;
  --padding-3:  8px;
  --padding-4:  10px;
  --padding-5:  12px;
  --padding-6:  16px;
  --padding-7:  20px;
  --padding-8:  24px;
  --padding-9:  32px;
  --padding-10: 40px;

  /* ── Border Radius Tokens ──────────────────────────────── */
  --radius-xsmall-1: 2px;   /* indicators, badges, progress bars */
  --radius-xsmall-2: 2px;
  --radius-small-1:  4px;   /* tags, chips, checkbox, radio, switch */
  --radius-small-2:  4px;
  --radius-small-3:  4px;
  --radius-medium-1: 6px;   /* buttons, inputs, selects */
  --radius-medium-2: 6px;
  --radius-medium-3: 8px;
  --radius-medium-4: 8px;
  --radius-large-1:  10px;  /* cards, dialogs */
  --radius-large-2:  10px;
  --radius-xlarge-1: 12px;  /* banners, bottom sheets */
  --radius-xlarge-2: 12px;
  --radius-max:      9999px; /* fully circular */

  /* ── Shadow / Elevation Tokens ─────────────────────────── */
  --shadow-level-1: 0 1px 2px rgba(0,0,0,0.08);
  --shadow-level-2: 0 2px 8px rgba(0,0,0,0.10);
  --shadow-level-3: 0 4px 16px rgba(0,0,0,0.12);
  --shadow-level-4: 0 8px 32px rgba(0,0,0,0.16);

  /* ── Motion Tokens ─────────────────────────────────────── */
  /* Durations: 가이드(MOTION_GUIDE.md) 권장 160~240ms / 패널·모달 240~320ms */
  --duration-instant:    120ms;  /* hover, button feedback, toggle thumb */
  --duration-base:       180ms;  /* state change, color/opacity transition */
  --duration-emphasized: 280ms;  /* panel resize, layout, progress */

  /* Exit durations: 진입의 약 70%. 모션 표준상 leave가 enter보다 짧고 단순. */
  --duration-exit-base:       140ms;  /* item leave, fade-out */
  --duration-exit-emphasized: 200ms;  /* view swap leave */

  /* Easings */
  --ease-out:      cubic-bezier(0.2, 0, 0, 1);     /* 가이드 표준 */
  --ease-standard: cubic-bezier(0.25, 1, 0.5, 1);  /* ease-out-quart (보조) */
}

/* Reduced-motion respect: 운영성/접근성 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Semantic Element Styles ────────────────────────────────── */
body {
  font-family: var(--font-family-base);
  font-size: var(--font-body-medium-size);
  font-weight: var(--font-body-medium-weight);
  line-height: var(--font-line-height);
  color: var(--color-fg-primary);
  background-color: var(--color-bg-default);
  -webkit-font-smoothing: antialiased;
}

/* Display */
.display-large  { font-size: var(--font-display-large-size);  font-weight: var(--font-display-large-weight);  line-height: 1.5; letter-spacing: 1px; }
.display-medium { font-size: var(--font-display-medium-size); font-weight: var(--font-display-medium-weight); line-height: 1.5; letter-spacing: 1px; }
.display-small  { font-size: var(--font-display-small-size);  font-weight: var(--font-display-small-weight);  line-height: 1.5; letter-spacing: 1px; }

/* Heading */
.heading-xlarge  { font-size: var(--font-heading-xlarge-size);  font-weight: var(--font-heading-xlarge-weight);  line-height: 1.5; }
.heading-large   { font-size: var(--font-heading-large-size);   font-weight: var(--font-heading-large-weight);   line-height: 1.5; }
.heading-medium  { font-size: var(--font-heading-medium-size);  font-weight: var(--font-heading-medium-weight);  line-height: 1.5; }
.heading-small   { font-size: var(--font-heading-small-size);   font-weight: var(--font-heading-small-weight);   line-height: 1.5; }
.heading-xsmall  { font-size: var(--font-heading-xsmall-size);  font-weight: var(--font-heading-xsmall-weight);  line-height: 1.5; }
.heading-xxsmall { font-size: var(--font-heading-xxsmall-size); font-weight: var(--font-heading-xxsmall-weight); line-height: 1.5; }

/* Body */
.body-large   { font-size: var(--font-body-large-size);   font-weight: var(--font-body-large-weight);   line-height: 1.5; }
.body-medium  { font-size: var(--font-body-medium-size);  font-weight: var(--font-body-medium-weight);  line-height: 1.5; }
.body-small   { font-size: var(--font-body-small-size);   font-weight: var(--font-body-small-weight);   line-height: 1.5; }
.body-xsmall  { font-size: var(--font-body-xsmall-size);  font-weight: var(--font-body-xsmall-weight);  line-height: 1.5; }

/* Bold body variants */
.body-large-bold   { font-size: var(--font-body-large-size);   font-weight: 700; line-height: 1.5; }
.body-medium-bold  { font-size: var(--font-body-medium-size);  font-weight: 700; line-height: 1.5; }
.body-small-bold   { font-size: var(--font-body-small-size);   font-weight: 700; line-height: 1.5; }
.body-xsmall-bold  { font-size: var(--font-body-xsmall-size);  font-weight: 700; line-height: 1.5; }

/* Text colors */
.text-primary    { color: var(--color-fg-primary); }
.text-secondary  { color: var(--color-fg-secondary); }
.text-tertiary   { color: var(--color-fg-tertiary); }
.text-disabled   { color: var(--color-fg-disabled); }
.text-inverse    { color: var(--color-fg-inverse); }

/* 편집 중 dot 점멸: 생성문서 리스트/상세 공통 */
@keyframes editPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

/* ──────────────────────────────────────────────────────────────
   .edit-pill: 다른 사용자 편집 중 표시 (생성문서 리스트/상세 공통)
   조용한 회색 pill. 위계는 본문 메타보다 한 단 아래.
   ────────────────────────────────────────────────────────────── */
.edit-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-2);
  padding: 2px var(--padding-4) 2px var(--padding-3);
  border-radius: var(--radius-max);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-gray-20);
  font-size: var(--font-body-xsmall-size);
  font-weight: 500;
  color: var(--color-fg-tertiary);
  line-height: 1.4;
  white-space: nowrap;
}
.edit-pill-dot {
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--color-fg-quaternary);
  animation: editPulse 1.6s ease-in-out infinite;
  flex-shrink: 0;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}

/* ──────────────────────────────────────────────────────────────
   글로벌 :focus-visible 정책: WCAG 2.4.7
   ──────────────────────────────────────────────────────────────
   • 키보드 포커스만 표시(:focus-visible). 마우스 클릭으로는 노출 안 됨.
   • outline-offset으로 둥근 모서리 요소도 자연스러운 ring 형성.
   • outline:none 인라인 스타일을 일부 컴포넌트에서 사용하더라도
     :focus-visible 가상클래스가 더 강한 우선순위로 덮어쓴다(중요선언 X).
   ────────────────────────────────────────────────────────────── */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--color-action-primary);
  outline-offset: 2px;
  border-radius: 2px;
}
/* 등급/액션 컬러 위에 포커스가 갈 때 contrast 보장 위해 ring 색을 inverse로 전환 */
button:focus-visible,
[role="button"]:focus-visible,
a:focus-visible {
  outline-color: var(--color-action-primary);
  box-shadow: 0 0 0 4px var(--color-action-primary-surface);
}

/* ──────────────────────────────────────────────────────────────
   터치 타깃 hit-area 확장: WCAG 2.5.5/2.5.8
   ──────────────────────────────────────────────────────────────
   .icon-btn 사이즈가 22~26px이어도 ::before pseudo로 44×44 hit-area를
   확보한다. 시각적으로는 그대로지만 클릭/탭 영역만 넓힘.
   ────────────────────────────────────────────────────────────── */
.icon-btn { position: relative; }
.icon-btn::before {
  content: "";
  position: absolute;
  inset: 50% 50% 50% 50%;
  width: 44px; height: 44px;
  transform: translate(-50%, -50%);
  /* 시각적 영향 없이 hit-test만 확장 */
}

/* ──────────────────────────────────────────────────────────────
   Toast UI Editor: KRDS 톤 보정
   ──────────────────────────────────────────────────────────────
   기본 스타일이 sans-serif·둔탁한 보더·과한 padding이라 정부 톤과 충돌.
   여기서는 (1) 폰트 inherit, (2) 보더 색 토큰화, (3) 카드 라운드,
   (4) 콘텐츠 영역 padding 일관화, (5) 헤딩 스케일 보정,
   (6) 뷰어(viewer)에서 좌우 여백 확보: 6가지를 일괄 적용.
   ────────────────────────────────────────────────────────────── */
.toastui-editor-defaultUI {
  border: 1px solid var(--color-gray-20) !important;
  border-radius: var(--radius-large-1) !important;
  overflow: hidden;
  font-family: 'Pretendard GOV', 'Noto Sans KR', sans-serif !important;
  background: var(--color-bg-default) !important;
}
.toastui-editor-defaultUI .toastui-editor-toolbar {
  background: var(--color-bg-subtle) !important;
  border-bottom: 1px solid var(--color-gray-20) !important;
}
.toastui-editor-defaultUI .toastui-editor-toolbar-icons {
  border-radius: var(--radius-small-2) !important;
}
.toastui-editor-defaultUI .toastui-editor-toolbar-icons:hover {
  background: var(--color-gray-10) !important;
  border-color: transparent !important;
}
.toastui-editor-defaultUI .toastui-editor-mode-switch {
  background: var(--color-bg-subtle) !important;
  border-top: 1px solid var(--color-gray-20) !important;
}
.toastui-editor-defaultUI .toastui-editor-mode-switch .tab-item {
  color: var(--color-fg-tertiary) !important;
  font-family: inherit !important;
}
.toastui-editor-defaultUI .toastui-editor-mode-switch .tab-item.active {
  color: var(--color-action-primary) !important;
}
/* 본문 영역: WYSIWYG / Markdown 양쪽 공통 가독 여백 */
.toastui-editor-defaultUI .ProseMirror,
.toastui-editor-defaultUI .toastui-editor-md-preview .toastui-editor-contents,
.toastui-editor-defaultUI .toastui-editor-md-container .CodeMirror,
.toastui-editor-defaultUI .toastui-editor-md-container .ProseMirror {
  padding: var(--padding-7) var(--padding-8) !important;
  font-family: 'Pretendard GOV', 'Noto Sans KR', sans-serif !important;
  font-size: var(--font-body-medium-size) !important;
  line-height: 1.75 !important;
  color: var(--color-fg-primary) !important;
  background: var(--color-bg-default) !important;
}
/* 헤딩: KRDS 스케일 보정 */
.toastui-editor-defaultUI .ProseMirror h1,
.toastui-editor-defaultUI .toastui-editor-contents h1 {
  font-size: var(--font-heading-small-size) !important;
  font-weight: var(--font-heading-small-weight) !important;
  border-bottom: none !important;
  color: var(--color-fg-primary) !important;
  margin: 0 0 var(--gap-5) !important;
  padding-bottom: 0 !important;
}
.toastui-editor-defaultUI .ProseMirror h2,
.toastui-editor-defaultUI .toastui-editor-contents h2 {
  font-size: var(--font-heading-xsmall-size) !important;
  font-weight: var(--font-heading-xsmall-weight) !important;
  border-bottom: none !important;
  color: var(--color-fg-primary) !important;
  margin: var(--gap-7) 0 var(--gap-4) !important;
  padding-bottom: 0 !important;
}
.toastui-editor-defaultUI .ProseMirror h3,
.toastui-editor-defaultUI .toastui-editor-contents h3 {
  font-size: var(--font-heading-xxsmall-size) !important;
  font-weight: var(--font-heading-xxsmall-weight) !important;
  color: var(--color-fg-secondary) !important;
  margin: var(--gap-5) 0 var(--gap-3) !important;
}
.toastui-editor-defaultUI .ProseMirror p,
.toastui-editor-defaultUI .toastui-editor-contents p {
  color: var(--color-fg-secondary) !important;
  margin: 0 0 var(--gap-4) !important;
}
.toastui-editor-defaultUI .ProseMirror ul,
.toastui-editor-defaultUI .ProseMirror ol,
.toastui-editor-defaultUI .toastui-editor-contents ul,
.toastui-editor-defaultUI .toastui-editor-contents ol {
  padding-left: 22px !important;
  margin: 0 0 var(--gap-5) !important;
  color: var(--color-fg-secondary) !important;
}
.toastui-editor-defaultUI .ProseMirror strong,
.toastui-editor-defaultUI .toastui-editor-contents strong {
  color: var(--color-fg-primary) !important;
}
.toastui-editor-defaultUI .ProseMirror blockquote,
.toastui-editor-defaultUI .toastui-editor-contents blockquote {
  border-left: 3px solid var(--color-gray-20) !important;
  color: var(--color-fg-tertiary) !important;
  padding-left: var(--padding-5) !important;
  background: transparent !important;
}
.toastui-editor-defaultUI .ProseMirror code,
.toastui-editor-defaultUI .toastui-editor-contents code {
  background: var(--color-bg-subtle) !important;
  border: 1px solid var(--color-gray-20) !important;
  padding: 1px 6px !important;
  border-radius: var(--radius-small-1) !important;
  font-family: 'SF Mono', Menlo, Consolas, monospace !important;
  color: var(--color-fg-primary) !important;
}

/* Viewer (factory({viewer: true})): 미리보기 좌우 여백 확보 */
.toastui-editor-contents {
  padding: var(--padding-7) var(--padding-8) !important;
  font-family: 'Pretendard GOV', 'Noto Sans KR', sans-serif !important;
  font-size: var(--font-body-medium-size) !important;
  line-height: 1.75 !important;
  color: var(--color-fg-primary) !important;
}

/* ──────────────────────────────────────────────────────────────
   미디어 쿼리: 노트북·태블릿 분기
   ──────────────────────────────────────────────────────────────
   1280px 미만: 좌측 소스 패널 폭 자동 축소(JS-driven과 별도 시각 안전선)
   980px 미만: 우측 작업대 컴팩트 모드 시각 폴백
   ────────────────────────────────────────────────────────────── */
@media (max-width: 1280px) {
  :root { --gap-7: 14px; --gap-8: 18px; --padding-7: 14px; --padding-8: 18px; }
}
@media (max-width: 980px) {
  :root { --font-heading-xsmall-size: 16px; --font-body-medium-size: 15px; }
}
.text-action     { color: var(--color-action-primary); }

/* ──────────────────────────────────────────────────────────────
   KRDS 공식 색 팔레트 (2026-10-02 추가)
   출처: KRDS HTML Component Kit(github.com/KRDS-uiux/krds-uiux, main 2026-01-12) resources/css/token/krds_tokens.css 라이트 모드 원재료 값.
   이유: 위 --color-gray·primary·secondary 단계가 KRDS 공식 값과 다르다(회색 10~50이 한 단계 밀림, 보조색 20 이후 다름,
   위험·경고·성공·정보·포인트 단계 없음). 기존 단계는 Insight-Note 등 여러 제품이 직접 쓰고 있어(gray-20 약 300곳) 값을 바꾸지 않고,
   KRDS 값은 --krds-* 이름으로 나란히 둔다. 새 역할 토큰과 새 컴포넌트는 --krds-*를 원재료로 쓴다.
   화면 코드에는 이 번호 토큰도 직접 쓰지 않고 roles.css 역할 토큰을 거친다(공통 하네스 7절).
   ────────────────────────────────────────────────────────────── */
:root {
  --krds-gray-0: #ffffff;  --krds-gray-5: #f4f5f6;  --krds-gray-10: #e6e8ea;  --krds-gray-20: #cdd1d5;  --krds-gray-30: #b1b8be;  --krds-gray-40: #8a949e;  --krds-gray-50: #6d7882;  --krds-gray-60: #58616a;  --krds-gray-70: #464c53;  --krds-gray-80: #33363d;  --krds-gray-90: #1e2124;  --krds-gray-95: #131416;  --krds-gray-100: #000000;
  --krds-primary-5: #ecf2fe;  --krds-primary-10: #d8e5fd;  --krds-primary-20: #b1cefb;  --krds-primary-30: #86aff9;  --krds-primary-40: #4c87f6;  --krds-primary-50: #256ef4;  --krds-primary-60: #0b50d0;  --krds-primary-70: #083891;  --krds-primary-80: #052561;  --krds-primary-90: #03163a;  --krds-primary-95: #020f27;
  --krds-secondary-5: #eef2f7;  --krds-secondary-10: #d6e0eb;  --krds-secondary-20: #bacbde;  --krds-secondary-30: #90b0d5;  --krds-secondary-40: #6b96c7;  --krds-secondary-50: #346fb2;  --krds-secondary-60: #1c589c;  --krds-secondary-70: #063a74;  --krds-secondary-80: #052b57;  --krds-secondary-90: #031f3f;  --krds-secondary-95: #02162c;
  --krds-danger-5: #fdefec;  --krds-danger-10: #fcdfd9;  --krds-danger-20: #f7afa1;  --krds-danger-30: #f48771;  --krds-danger-40: #f05f42;  --krds-danger-50: #de3412;  --krds-danger-60: #bd2c0f;  --krds-danger-70: #8a240f;  --krds-danger-80: #5c180a;  --krds-danger-90: #390d05;  --krds-danger-95: #260903;
  --krds-warning-5: #fff3db;  --krds-warning-10: #ffe0a3;  --krds-warning-20: #ffc95c;  --krds-warning-30: #ffb114;  --krds-warning-40: #c78500;  --krds-warning-50: #9e6a00;  --krds-warning-60: #8a5c00;  --krds-warning-70: #614100;  --krds-warning-80: #422c00;  --krds-warning-90: #2e1f00;  --krds-warning-95: #241800;
  --krds-success-5: #eaf6ec;  --krds-success-10: #d8eedd;  --krds-success-20: #a9dab4;  --krds-success-30: #7ec88e;  --krds-success-40: #3fa654;  --krds-success-50: #228738;  --krds-success-60: #267337;  --krds-success-70: #285d33;  --krds-success-80: #1f4727;  --krds-success-90: #122b18;  --krds-success-95: #0e2012;
  --krds-information-5: #e7f4fe;  --krds-information-10: #d3ebfd;  --krds-information-20: #9ed2fa;  --krds-information-30: #5fb5f7;  --krds-information-40: #2098f3;  --krds-information-50: #0b78cb;  --krds-information-60: #096ab3;  --krds-information-70: #085691;  --krds-information-80: #053961;  --krds-information-90: #03253f;  --krds-information-95: #021a2c;
  --krds-point-5: #fbeff0;  --krds-point-10: #f5d6d9;  --krds-point-20: #ebadb2;  --krds-point-30: #e0858c;  --krds-point-40: #d65c66;  --krds-point-50: #d63d4a;  --krds-point-60: #ab2b36;  --krds-point-70: #7a1f26;  --krds-point-80: #521419;  --krds-point-90: #310c0f;  --krds-point-95: #21080a;
  --krds-graphic-10: #e5ecf9;  --krds-graphic-30: #98acc5;  --krds-graphic-50: #61758f;  --krds-graphic-70: #39506c;  --krds-graphic-90: #223a58;
}