/* ===================================================================== shell.css — 사용자단 셸·화면 공통 구조 (사이트 중립 — WO-027) ⚠️ 브랜드(색·토큰 오버라이드)는 theme-{siteKey}.css 가 담당한다. 여기는 모든 사이트가 공유하는 구조·유틸만 둔다. 원래 theme-nlsc.css 에 섞여 있던 것을 분리했다 — 새 사이트에서 테마만 바꿔도 화면 구조가 유지되도록. (krdsdemo 시범에서 사이트맵·검색 패널·팝업 구조가 통째로 빠졌던 원인) ===================================================================== */ /* 로고 — 이미지 없는 사이트는 사이트명 텍스트가 로고다. KRDS 기본 샘플 로고 배경을 끈다 (안 끄면 기본 KRDS 로고 이미지 위에 텍스트가 겹친다 — krdsdemo 실측) */ #krds-header .header-branding .logo a, #krds-footer .f-logo, #krds-footer .krds-identifier .logo { background: none; width: auto; height: auto; } #krds-header .header-branding .logo { width: auto; } /* KRDS 고정 폭(로고 이미지 기준)이 텍스트 로고를 줄바꿈시킨다 */ /* 고대비에서는 KRDS 가 [data-krds-mode=high-contrast] #krds-header .header-container .logo a 로 샘플 로고 (ico_logo_krds_high_contrast)를 다시 깐다(1,3,1) — 텍스트 로고 위에 겹쳐 타일이 된다(TST-030 D1). html 을 앞에 붙여 특이성(1,3,2)으로 다시 끈다. 이미지 로고가 있는 사이트는 테마에서 고대비 변형을 다시 건다(theme-krdsdemo). */ html[data-krds-mode="high-contrast"] #krds-header .header-container .logo a, html[data-krds-mode="high-contrast"] #krds-header .header-branding .logo a, html[data-krds-mode="high-contrast"] #krds-footer .f-logo, html[data-krds-mode="high-contrast"] #krds-footer .krds-identifier .logo { background: none; } @media (prefers-color-scheme: dark) { html[data-krds-mode="theme"] #krds-header .header-container .logo a, html[data-krds-mode="theme"] #krds-header .header-branding .logo a, html[data-krds-mode="theme"] #krds-footer .f-logo, html[data-krds-mode="theme"] #krds-footer .krds-identifier .logo { background: none; } } .logo-text { font-size: var(--krds-pc-font-size-heading-medium); font-weight: var(--krds-font-weight-bold); white-space: nowrap; } #krds-footer .f-logo .logo-text, #krds-footer .krds-identifier .logo .logo-text { font-size: var(--krds-pc-font-size-heading-xsmall); } /* ===================================================================== 공통 유틸리티 ⚠️ 아래 클래스들은 KRDS 에 없다. 우리 화면이 쓰고 있는데 정의가 없어 스타일이 전혀 적용되지 않고 있었다(WO-005 Phase 1 에서 발견). KRDS 에 있는 것은 절대 여기서 다시 정의하지 않는다 — form-group / form-tit / form-conts / form-hint / krds-form-check / krds-check-area / krds-input / krds-form-select / krds-btn / krds-table-wrap / tbl / krds-pagination / sr-only / btn-wrap 은 전부 KRDS 것이다. 화면에서 그 이름을 쓰면 된다. (CLAUDE.md §4.3 — 컴포넌트를 발명하지 않는다) ===================================================================== */ /* 여백 — 화면에서 인라인 style 을 쓰지 않기 위한 최소 유틸 (CLAUDE.md §4.1) */ .mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; } .mt-40 { margin-top: 40px; } /* 표 셀 왼쪽 정렬. ⚠️ txt-left 는 KRDS 에 없다(krds.min.css·카탈로그 0건). WO-003 부터 표 제목 셀에 써 왔지만 정의가 없어 효과가 없었다 — scripts/check_krds_classes.py 가 잡아냈다 (DES-002 A9). */ .txt-left { text-align: left; } /* 표 열 폭 유틸 — 인라인 style="width:N%" 대체 (CLAUDE.md §4-1, DES-002 A5). 사용자단·관리자단 공용 */ .w-6p { width: 6%; } .w-8p { width: 8%; } .w-9p { width: 9%; } .w-10p { width: 10%; } .w-11p { width: 11%; } .w-12p { width: 12%; } .w-13p { width: 13%; } .w-14p { width: 14%; } .w-16p { width: 16%; } .w-18p { width: 18%; } .w-20p { width: 20%; } .w-22p { width: 22%; } .w-24p { width: 24%; } .w-30p { width: 30%; } /* 페이지 제목 영역 */ .page-title-wrap { margin-bottom: 8px; } .page-title-wrap .h-tit { font-size: 1.5rem; font-weight: 700; color: var(--krds-light-color-text-bolder); } .page-desc { margin-top: 4px; color: var(--krds-light-color-text-subtle); } /* 필수 표시 — aria-hidden 이라 시각 표현 전용 */ .required { color: var(--krds-color-light-danger-50); } /* 경고 텍스트 */ .txt-danger { color: var(--krds-color-light-danger-50); font-weight: 600; } /* 목록 상단 도구줄 */ .list-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .total-count { color: var(--krds-light-color-text-subtle); } .total-count strong { color: var(--krds-light-color-text-bolder); } /* 검색 영역 — 여러 조건을 한 줄에 놓는다 */ .search-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; } .search-row .form-group { margin: 0; } .search-row .search-submit { flex: 0 0 auto; } /* 값만 보여 주는 항목 (입력이 아닌 정보) */ .form-static { padding: 6px 0; } /* 건너뛰기 링크는 KRDS 가 #krds-skip-link 로 제공한다 — 여기서 다시 만들지 않는다. 표 안 인라인 폼(.inline-form)은 admin.css 에 있다. */ /* 메인 배너 */ .banner-list { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 16px; padding: 0; list-style: none; } .banner-list img { max-height: 60px; } /* 관리자 배너 목록 썸네일 */ .banner-thumb { max-width: 120px; max-height: 48px; } /* 팝업 — 열린 것만 보인다. KRDS modal 은 기본이 숨김이다. ⚠️ KRDS 는 display 외에 z-index:-1 / visibility:hidden / opacity:0 으로도 숨긴다 (.krds-modal.shown 이 display, .krds-modal.in 이 나머지를 복구하는 2단 구조). display 만 복구하면 '투명 무클릭 레이어'가 되어 팝업이 안 보인다 — TST-011 결함 수정. */ .krds-modal.cms-popup { display: none; } .krds-modal.cms-popup.is-open { display: block; z-index: 1010; visibility: visible; opacity: 1; transition-delay: 0s; } /* 배경 dim — KRDS 는 .modal-back.in 으로 켠다. is-open 체계에 맞춰 동등 복구 (TST-011). */ .krds-modal.cms-popup.is-open .modal-back { display: block; z-index: 1000; visibility: visible; } .cms-popup-frame { width: 100%; min-height: 320px; border: 0; } /* ===================================================================== 메인 화면 ⚠️ KRDS 에 있는 것은 여기서 다시 정의하지 않는다 — krds-tab-area / tab / tab-conts / btn-tab / krds-info-list 는 전부 KRDS 것이다. ===================================================================== */ .main-vision { padding: 32px 0; } .vision-lead { margin-top: 8px; color: var(--krds-light-color-text-subtle); font-size: 1.125rem; } /* 최신소식 목록 — 제목과 날짜를 양끝에 둔다 */ .news-list li a { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 8px 0; } .news-subject { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .news-date { flex: 0 0 auto; color: var(--krds-light-color-text-subtle); font-size: 0.875rem; } .empty-msg { padding: 24px 0; color: var(--krds-light-color-text-subtle); text-align: center; } /* 주요 서비스 바로가기 */ .shortcut-list { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; padding: 0; list-style: none; } .shortcut-list a { display: inline-block; padding: 12px 20px; border: 1px solid var(--krds-color-light-secondary-10); border-radius: 8px; } /* ===================================================================== 게시판·페이지·사이트맵 — 사용자단 커스텀 컨테이너 (DES-003 C 규칙, 토큰만) ===================================================================== */ /* 갤러리 카드 썸네일 슬롯 — 공식 structured_list 에 슬롯이 없어 card-top 안에 둔다 (D2). card-top 이 flex 라 width:100% 가 없으면 콘텐츠 크기로 줄어든다 (TST-003 B4) */ .card-thumb { display: block; position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--krds-radius-medium2); background: var(--krds-light-color-surface-gray-subtler); } .card-thumb .thumb-image { width: 100%; height: 100%; object-fit: cover; } /* 영상 글 배지 — 썸네일 위에 겹친다 (WO-019 · DES-006 §3.6) */ .card-thumb .thumb-badge { position: absolute; top: var(--krds-gap-3); left: var(--krds-gap-3); z-index: 1; } /* 영상 임베드 플레이어 — 상세 본문 위, 16:9 반응형. src 는 서버 템플릿(VideoEmbed)만 만든다 (WO-019) */ .video-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--krds-radius-medium2); background: var(--krds-light-color-surface-gray-subtler); } .video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .video-link { display: flex; justify-content: flex-end; } .thumb-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--krds-light-color-text-subtle); font-size: var(--krds-pc-font-size-body-small); } /* 본문 컨테이너 — 콘텐츠 페이지(레이아웃 4종은 data-layout 속성만 다르다)와 게시글 상세가 공유 */ .page-content { max-width: 960px; margin: 0 auto; } .page-content[data-layout="map"] .map-frame { width: 100%; min-height: 360px; border: 0; } /* 검색 패널 — 관리자단과 같은 규칙. KRDS .form-group 은 width:100% 라 여기서만 폭을 되돌린다 */ .search-panel { background: var(--krds-light-color-surface-white); border: 1px solid var(--krds-light-color-divider-gray-light); border-radius: var(--krds-radius-medium2); padding: 16px 20px; } .search-panel .search-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; } .search-panel .form-group { width: auto; margin: 0; } .search-panel .form-conts { width: auto; } .search-panel .krds-input { width: 220px; } .search-panel .search-submit { display: flex; gap: 4px; margin-left: auto; } /* 사이트맵 */ .sitemap-wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; } .h-tit.sm { font-size: var(--krds-pc-font-size-heading-xsmall); } @media (max-width: 768px) { .search-panel .form-group, .search-panel .form-conts, .search-panel .krds-input { width: 100%; } .search-panel .search-submit { margin-left: 0; } } /* 푸터 관련사이트 모달 (17_footer_shell) — KRDS 1.1.0 의 data-type=full 은 내부 패딩이 0 이라 시안(가운데 정렬·큰 제목·불릿 4열·우상단 닫기) 레이아웃을 여기서 정의한다 */ .krds-modal[data-type="full"] .modal-content { max-width: 1380px; margin: 0 auto; padding: 96px 24px 64px; position: relative; } .krds-modal[data-type="full"] .modal-title { font-size: var(--krds-pc-font-size-heading-large); font-weight: var(--krds-font-weight-bold); } .krds-modal[data-type="full"] .modal-conts { margin-top: 40px; } .krds-modal[data-type="full"] .btn-close { position: absolute; top: 40px; right: 24px; } .pop-foot-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 32px; margin: 0; padding: 0; list-style: none; } .pop-foot-links li { position: relative; padding-left: 14px; } .pop-foot-links li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 4px; height: 4px; border-radius: 50%; background: var(--krds-light-color-text-basic); } .pop-foot-links a { color: var(--krds-light-color-text-basic); text-decoration: none; font-size: var(--krds-pc-font-size-body-large); } .pop-foot-links a:hover { color: var(--krds-light-color-action-primary-hover); text-decoration: underline; } @media (max-width: 1024px) { .pop-foot-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .pop-foot-links { grid-template-columns: minmax(0, 1fr); } } /* 푸터 연락 정보 목록(f-cs) — KRDS 번들에 dt/dd 세부 정의가 없어 보강 (남색 푸터 대비는 테마가 담당) */ #krds-footer .f-cs { display: flex; flex-wrap: wrap; gap: 12px 48px; margin: 16px 0 0; padding: 0; list-style: none; } #krds-footer .f-cs dl { margin: 0; } #krds-footer .f-cs .info-tit { font-size: var(--krds-pc-font-size-body-small); margin-bottom: 4px; } #krds-footer .f-cs .info-conts { margin: 0; font-size: var(--krds-pc-font-size-body-medium); } /* 푸터 KRDS 출처 표기(f-notice, WO-028 E4) — f-copy 아래 한 문장. 링크만 밑줄 */ #krds-footer .f-btm .f-btm-text { flex-wrap: wrap; } /* KRDS 는 row·nowrap — 출처 문안이 셋째 줄로 내려오게 */ #krds-footer .f-btm .f-btm-text .f-notice { flex: 0 0 100%; width: 100%; margin: 0; font-size: var(--krds-pc-font-size-body-small); line-height: var(--krds-line-height-body-small, 1.5); color: var(--krds-light-color-text-subtle); } #krds-footer .f-btm .f-btm-text .f-notice a { text-decoration: underline; color: inherit; } /* 전체메뉴 모달 — 사이트맵 그리드 재사용 + 페이지 폴백 링크 */ #popSitemap .sitemap-wrap { margin-top: 8px; } #popSitemap .h-tit.sm { margin-bottom: 12px; } .sitemap-page-link { margin-top: 40px; } /* ---------- 글자 크기 (DES-011 §2 D7) ---------- KRDS 는 html{font-size:var(--krds-font-size-base)} 하나가 루트이고 모든 글자·여백이 rem 이다. 그래서 이 토큰 하나만 바꾸면 화면 전체가 비례 확대된다(브라우저 확대와 같은 결과). 기본 62.5%(=10px). '보통' 은 속성을 지워 KRDS 기본값을 그대로 쓴다. html 로 한정하는 이유: 선택 버튼에도 같은 이름의 data 속성이 붙으면 그 버튼이 매칭된다. */ html[data-font-scale="sm"] { --krds-font-size-base: 56.25%; } /* 90% */ html[data-font-scale="lg"] { --krds-font-size-base: 68.75%; } /* 110% */ html[data-font-scale="xl"] { --krds-font-size-base: 75%; } /* 120% */ html[data-font-scale="xxl"] { --krds-font-size-base: 81.25%; } /* 130% */ /* @generated:mode-aliases begin — scripts/gen_mode_aliases.py 가 만든다. 손으로 고치지 말 것 */ /* 우리 CSS 가 참조하는 light 토큰을 고대비에서 high-contrast 값으로 돌린다 (293종). KRDS 는 자기 규칙만 다시 쓰고 light 토큰을 재정의하지 않는다 — 이 블록이 없으면 우리 면은 흰 채로, KRDS 글자만 밝아져 읽을 수 없게 된다 (TST-030 D2·D3·D9). */ html[data-krds-mode="high-contrast"] { --krds-light-color-action-disabled: var(--krds-high-contrast-color-action-disabled); --krds-light-color-action-primary: var(--krds-high-contrast-color-action-primary); --krds-light-color-action-primary-active: var(--krds-high-contrast-color-action-primary-active); --krds-light-color-action-primary-hover: var(--krds-high-contrast-color-action-primary-hover); --krds-light-color-action-primary-pressed: var(--krds-high-contrast-color-action-primary-pressed); --krds-light-color-action-primary-selected: var(--krds-high-contrast-color-action-primary-selected); --krds-light-color-action-secondary: var(--krds-high-contrast-color-action-secondary); --krds-light-color-action-secondary-active: var(--krds-high-contrast-color-action-secondary-active); --krds-light-color-action-secondary-hover: var(--krds-high-contrast-color-action-secondary-hover); --krds-light-color-action-secondary-on: var(--krds-high-contrast-color-action-secondary-on); --krds-light-color-action-secondary-on-hover: var(--krds-high-contrast-color-action-secondary-on-hover); --krds-light-color-action-secondary-on-pressed: var(--krds-high-contrast-color-action-secondary-on-pressed); --krds-light-color-action-secondary-on-selected: var(--krds-high-contrast-color-action-secondary-on-selected); --krds-light-color-action-secondary-pressed: var(--krds-high-contrast-color-action-secondary-pressed); --krds-light-color-action-secondary-selected: var(--krds-high-contrast-color-action-secondary-selected); --krds-light-color-action-white: var(--krds-high-contrast-color-action-white); --krds-light-color-alpha-base0: var(--krds-high-contrast-color-alpha-base0); --krds-light-color-alpha-base10: var(--krds-high-contrast-color-alpha-base10); --krds-light-color-alpha-base100: var(--krds-high-contrast-color-alpha-base100); --krds-light-color-alpha-base25: var(--krds-high-contrast-color-alpha-base25); --krds-light-color-alpha-base50: var(--krds-high-contrast-color-alpha-base50); --krds-light-color-alpha-base75: var(--krds-high-contrast-color-alpha-base75); --krds-light-color-alpha-inverse0: var(--krds-high-contrast-color-alpha-inverse0); --krds-light-color-alpha-inverse10: var(--krds-high-contrast-color-alpha-inverse10); --krds-light-color-alpha-inverse100: var(--krds-high-contrast-color-alpha-inverse100); --krds-light-color-alpha-inverse25: var(--krds-high-contrast-color-alpha-inverse25); --krds-light-color-alpha-inverse50: var(--krds-high-contrast-color-alpha-inverse50); --krds-light-color-alpha-inverse75: var(--krds-high-contrast-color-alpha-inverse75); --krds-light-color-alpha-shadow1: var(--krds-high-contrast-color-alpha-shadow1); --krds-light-color-alpha-shadow2: var(--krds-high-contrast-color-alpha-shadow2); --krds-light-color-alpha-shadow3: var(--krds-high-contrast-color-alpha-shadow3); --krds-light-color-background-dim: var(--krds-high-contrast-color-background-dim); --krds-light-color-background-gray-subtle: var(--krds-high-contrast-color-background-gray-subtle); --krds-light-color-background-gray-subtler: var(--krds-high-contrast-color-background-gray-subtler); --krds-light-color-background-inverse: var(--krds-high-contrast-color-background-inverse); --krds-light-color-background-white: var(--krds-high-contrast-color-background-white); --krds-light-color-border-danger: var(--krds-high-contrast-color-border-danger); --krds-light-color-border-danger-light: var(--krds-high-contrast-color-border-danger-light); --krds-light-color-border-disabled: var(--krds-high-contrast-color-border-disabled); --krds-light-color-border-gray: var(--krds-high-contrast-color-border-gray); --krds-light-color-border-gray-dark: var(--krds-high-contrast-color-border-gray-dark); --krds-light-color-border-gray-darker: var(--krds-high-contrast-color-border-gray-darker); --krds-light-color-border-gray-light: var(--krds-high-contrast-color-border-gray-light); --krds-light-color-border-information: var(--krds-high-contrast-color-border-information); --krds-light-color-border-information-light: var(--krds-high-contrast-color-border-information-light); --krds-light-color-border-inverse: var(--krds-high-contrast-color-border-inverse); --krds-light-color-border-point: var(--krds-high-contrast-color-border-point); --krds-light-color-border-point-light: var(--krds-high-contrast-color-border-point-light); --krds-light-color-border-primary: var(--krds-high-contrast-color-border-primary); --krds-light-color-border-primary-light: var(--krds-high-contrast-color-border-primary-light); --krds-light-color-border-secondary: var(--krds-high-contrast-color-border-secondary); --krds-light-color-border-secondary-light: var(--krds-high-contrast-color-border-secondary-light); --krds-light-color-border-success: var(--krds-high-contrast-color-border-success); --krds-light-color-border-success-light: var(--krds-high-contrast-color-border-success-light); --krds-light-color-border-transparency: var(--krds-high-contrast-color-border-transparency); --krds-light-color-border-warning: var(--krds-high-contrast-color-border-warning); --krds-light-color-border-warning-light: var(--krds-high-contrast-color-border-warning-light); --krds-light-color-button-disabled-border: var(--krds-high-contrast-color-button-disabled-border); --krds-light-color-button-disabled-fill: var(--krds-high-contrast-color-button-disabled-fill); --krds-light-color-button-primary-fill: var(--krds-high-contrast-color-button-primary-fill); --krds-light-color-button-primary-fill-hover: var(--krds-high-contrast-color-button-primary-fill-hover); --krds-light-color-button-primary-fill-pressed: var(--krds-high-contrast-color-button-primary-fill-pressed); --krds-light-color-button-secondary-border: var(--krds-high-contrast-color-button-secondary-border); --krds-light-color-button-secondary-fill: var(--krds-high-contrast-color-button-secondary-fill); --krds-light-color-button-secondary-fill-hover: var(--krds-high-contrast-color-button-secondary-fill-hover); --krds-light-color-button-secondary-fill-pressed: var(--krds-high-contrast-color-button-secondary-fill-pressed); --krds-light-color-button-tertiary-border: var(--krds-high-contrast-color-button-tertiary-border); --krds-light-color-button-tertiary-fill: var(--krds-high-contrast-color-button-tertiary-fill); --krds-light-color-button-tertiary-fill-hover: var(--krds-high-contrast-color-button-tertiary-fill-hover); --krds-light-color-button-tertiary-fill-pressed: var(--krds-high-contrast-color-button-tertiary-fill-pressed); --krds-light-color-button-text-border: var(--krds-high-contrast-color-button-text-border); --krds-light-color-button-text-fill: var(--krds-high-contrast-color-button-text-fill); --krds-light-color-button-text-fill-hover: var(--krds-high-contrast-color-button-text-fill-hover); --krds-light-color-button-text-fill-pressed: var(--krds-high-contrast-color-button-text-fill-pressed); --krds-light-color-divider-error: var(--krds-high-contrast-color-divider-error); --krds-light-color-divider-gray: var(--krds-high-contrast-color-divider-gray); --krds-light-color-divider-gray-dark: var(--krds-high-contrast-color-divider-gray-dark); --krds-light-color-divider-gray-darker: var(--krds-high-contrast-color-divider-gray-darker); --krds-light-color-divider-gray-light: var(--krds-high-contrast-color-divider-gray-light); --krds-light-color-divider-inverse: var(--krds-high-contrast-color-divider-inverse); --krds-light-color-divider-point: var(--krds-high-contrast-color-divider-point); --krds-light-color-divider-primary: var(--krds-high-contrast-color-divider-primary); --krds-light-color-divider-primary-light: var(--krds-high-contrast-color-divider-primary-light); --krds-light-color-divider-secondary: var(--krds-high-contrast-color-divider-secondary); --krds-light-color-divider-secondary-light: var(--krds-high-contrast-color-divider-secondary-light); --krds-light-color-element-danger: var(--krds-high-contrast-color-element-danger); --krds-light-color-element-danger-lighter: var(--krds-high-contrast-color-element-danger-lighter); --krds-light-color-element-disabled-dark: var(--krds-high-contrast-color-element-disabled-dark); --krds-light-color-element-disabled-light: var(--krds-high-contrast-color-element-disabled-light); --krds-light-color-element-gray: var(--krds-high-contrast-color-element-gray); --krds-light-color-element-gray-dark: var(--krds-high-contrast-color-element-gray-dark); --krds-light-color-element-gray-light: var(--krds-high-contrast-color-element-gray-light); --krds-light-color-element-gray-lighter: var(--krds-high-contrast-color-element-gray-lighter); --krds-light-color-element-information: var(--krds-high-contrast-color-element-information); --krds-light-color-element-information-lighter: var(--krds-high-contrast-color-element-information-lighter); --krds-light-color-element-inverse: var(--krds-high-contrast-color-element-inverse); --krds-light-color-element-inverse-static: var(--krds-high-contrast-color-element-inverse-static); --krds-light-color-element-point: var(--krds-high-contrast-color-element-point); --krds-light-color-element-point-light: var(--krds-high-contrast-color-element-point-light); --krds-light-color-element-point-lighter: var(--krds-high-contrast-color-element-point-lighter); --krds-light-color-element-primary: var(--krds-high-contrast-color-element-primary); --krds-light-color-element-primary-light: var(--krds-high-contrast-color-element-primary-light); --krds-light-color-element-primary-lighter: var(--krds-high-contrast-color-element-primary-lighter); --krds-light-color-element-secondary: var(--krds-high-contrast-color-element-secondary); --krds-light-color-element-secondary-light: var(--krds-high-contrast-color-element-secondary-light); --krds-light-color-element-secondary-lighter: var(--krds-high-contrast-color-element-secondary-lighter); --krds-light-color-element-success: var(--krds-high-contrast-color-element-success); --krds-light-color-element-success-lighter: var(--krds-high-contrast-color-element-success-lighter); --krds-light-color-element-warning: var(--krds-high-contrast-color-element-warning); --krds-light-color-element-warning-lighter: var(--krds-high-contrast-color-element-warning-lighter); --krds-light-color-graphic-blue: var(--krds-high-contrast-color-graphic-blue); --krds-light-color-graphic-blue-dark: var(--krds-high-contrast-color-graphic-blue-dark); --krds-light-color-graphic-blue-darker: var(--krds-high-contrast-color-graphic-blue-darker); --krds-light-color-graphic-blue-subtle: var(--krds-high-contrast-color-graphic-blue-subtle); --krds-light-color-graphic-blue-subtler: var(--krds-high-contrast-color-graphic-blue-subtler); --krds-light-color-graphic-brand: var(--krds-high-contrast-color-graphic-brand); --krds-light-color-graphic-red: var(--krds-high-contrast-color-graphic-red); --krds-light-color-graphic-red-dark: var(--krds-high-contrast-color-graphic-red-dark); --krds-light-color-graphic-red-darker: var(--krds-high-contrast-color-graphic-red-darker); --krds-light-color-graphic-red-subtle: var(--krds-high-contrast-color-graphic-red-subtle); --krds-light-color-graphic-red-subtler: var(--krds-high-contrast-color-graphic-red-subtler); --krds-light-color-icon-danger: var(--krds-high-contrast-color-icon-danger); --krds-light-color-icon-danger-static: var(--krds-high-contrast-color-icon-danger-static); --krds-light-color-icon-disabled: var(--krds-high-contrast-color-icon-disabled); --krds-light-color-icon-disabled-on: var(--krds-high-contrast-color-icon-disabled-on); --krds-light-color-icon-gray: var(--krds-high-contrast-color-icon-gray); --krds-light-color-icon-gray-fill: var(--krds-high-contrast-color-icon-gray-fill); --krds-light-color-icon-gray-light: var(--krds-high-contrast-color-icon-gray-light); --krds-light-color-icon-gray-static: var(--krds-high-contrast-color-icon-gray-static); --krds-light-color-icon-information: var(--krds-high-contrast-color-icon-information); --krds-light-color-icon-information-static: var(--krds-high-contrast-color-icon-information-static); --krds-light-color-icon-inverse: var(--krds-high-contrast-color-icon-inverse); --krds-light-color-icon-inverse-static: var(--krds-high-contrast-color-icon-inverse-static); --krds-light-color-icon-point: var(--krds-high-contrast-color-icon-point); --krds-light-color-icon-point-static: var(--krds-high-contrast-color-icon-point-static); --krds-light-color-icon-primary: var(--krds-high-contrast-color-icon-primary); --krds-light-color-icon-primary-static: var(--krds-high-contrast-color-icon-primary-static); --krds-light-color-icon-secondary: var(--krds-high-contrast-color-icon-secondary); --krds-light-color-icon-secondary-static: var(--krds-high-contrast-color-icon-secondary-static); --krds-light-color-icon-success: var(--krds-high-contrast-color-icon-success); --krds-light-color-icon-success-static: var(--krds-high-contrast-color-icon-success-static); --krds-light-color-icon-warning: var(--krds-high-contrast-color-icon-warning); --krds-light-color-icon-warning-static: var(--krds-high-contrast-color-icon-warning-static); --krds-light-color-input-border: var(--krds-high-contrast-color-input-border); --krds-light-color-input-border-active: var(--krds-high-contrast-color-input-border-active); --krds-light-color-input-border-disabled: var(--krds-high-contrast-color-input-border-disabled); --krds-light-color-input-border-error: var(--krds-high-contrast-color-input-border-error); --krds-light-color-input-surface: var(--krds-high-contrast-color-input-surface); --krds-light-color-input-surface-disabled: var(--krds-high-contrast-color-input-surface-disabled); --krds-light-color-link-default: var(--krds-high-contrast-color-link-default); --krds-light-color-link-hover: var(--krds-high-contrast-color-link-hover); --krds-light-color-link-pressed: var(--krds-high-contrast-color-link-pressed); --krds-light-color-link-visited: var(--krds-high-contrast-color-link-visited); --krds-light-color-surface-danger-subtler: var(--krds-high-contrast-color-surface-danger-subtler); --krds-light-color-surface-disabled: var(--krds-high-contrast-color-surface-disabled); --krds-light-color-surface-gray-subtle: var(--krds-high-contrast-color-surface-gray-subtle); --krds-light-color-surface-gray-subtler: var(--krds-high-contrast-color-surface-gray-subtler); --krds-light-color-surface-information-subtler: var(--krds-high-contrast-color-surface-information-subtler); --krds-light-color-surface-inverse: var(--krds-high-contrast-color-surface-inverse); --krds-light-color-surface-inverse-static: var(--krds-high-contrast-color-surface-inverse-static); --krds-light-color-surface-point-subtler: var(--krds-high-contrast-color-surface-point-subtler); --krds-light-color-surface-primary-subtler: var(--krds-high-contrast-color-surface-primary-subtler); --krds-light-color-surface-secondary-subtler: var(--krds-high-contrast-color-surface-secondary-subtler); --krds-light-color-surface-success-subtler: var(--krds-high-contrast-color-surface-success-subtler); --krds-light-color-surface-warning-subtler: var(--krds-high-contrast-color-surface-warning-subtler); --krds-light-color-surface-white: var(--krds-high-contrast-color-surface-white); --krds-light-color-surface-white-static: var(--krds-high-contrast-color-surface-white-static); --krds-light-color-surface-white-subtle: var(--krds-high-contrast-color-surface-white-subtle); --krds-light-color-surface-white-subtler: var(--krds-high-contrast-color-surface-white-subtler); --krds-light-color-text-basic: var(--krds-high-contrast-color-text-basic); --krds-light-color-text-basic-inverse: var(--krds-high-contrast-color-text-basic-inverse); --krds-light-color-text-bolder: var(--krds-high-contrast-color-text-bolder); --krds-light-color-text-bolder-inverse: var(--krds-high-contrast-color-text-bolder-inverse); --krds-light-color-text-danger: var(--krds-high-contrast-color-text-danger); --krds-light-color-text-disabled: var(--krds-high-contrast-color-text-disabled); --krds-light-color-text-disabled-on: var(--krds-high-contrast-color-text-disabled-on); --krds-light-color-text-information: var(--krds-high-contrast-color-text-information); --krds-light-color-text-inverse-static: var(--krds-high-contrast-color-text-inverse-static); --krds-light-color-text-point: var(--krds-high-contrast-color-text-point); --krds-light-color-text-primary: var(--krds-high-contrast-color-text-primary); --krds-light-color-text-secondary: var(--krds-high-contrast-color-text-secondary); --krds-light-color-text-static: var(--krds-high-contrast-color-text-static); --krds-light-color-text-subtle: var(--krds-high-contrast-color-text-subtle); --krds-light-color-text-subtle-inverse: var(--krds-high-contrast-color-text-subtle-inverse); --krds-light-color-text-success: var(--krds-high-contrast-color-text-success); --krds-light-color-text-warning: var(--krds-high-contrast-color-text-warning); --krds-color-light-alpha-black0: var(--krds-color-high-contrast-alpha-black0); --krds-color-light-alpha-black10: var(--krds-color-high-contrast-alpha-black10); --krds-color-light-alpha-black100: var(--krds-color-high-contrast-alpha-black100); --krds-color-light-alpha-black25: var(--krds-color-high-contrast-alpha-black25); --krds-color-light-alpha-black50: var(--krds-color-high-contrast-alpha-black50); --krds-color-light-alpha-black75: var(--krds-color-high-contrast-alpha-black75); --krds-color-light-alpha-white0: var(--krds-color-high-contrast-alpha-white0); --krds-color-light-alpha-white10: var(--krds-color-high-contrast-alpha-white10); --krds-color-light-alpha-white100: var(--krds-color-high-contrast-alpha-white100); --krds-color-light-alpha-white25: var(--krds-color-high-contrast-alpha-white25); --krds-color-light-alpha-white50: var(--krds-color-high-contrast-alpha-white50); --krds-color-light-alpha-white75: var(--krds-color-high-contrast-alpha-white75); --krds-color-light-danger-10: var(--krds-color-high-contrast-danger-10); --krds-color-light-danger-20: var(--krds-color-high-contrast-danger-20); --krds-color-light-danger-30: var(--krds-color-high-contrast-danger-30); --krds-color-light-danger-40: var(--krds-color-high-contrast-danger-40); --krds-color-light-danger-5: var(--krds-color-high-contrast-danger-5); --krds-color-light-danger-50: var(--krds-color-high-contrast-danger-50); --krds-color-light-danger-60: var(--krds-color-high-contrast-danger-60); --krds-color-light-danger-70: var(--krds-color-high-contrast-danger-70); --krds-color-light-danger-80: var(--krds-color-high-contrast-danger-80); --krds-color-light-danger-90: var(--krds-color-high-contrast-danger-90); --krds-color-light-danger-95: var(--krds-color-high-contrast-danger-95); --krds-color-light-graphic-10: var(--krds-color-high-contrast-graphic-10); --krds-color-light-graphic-30: var(--krds-color-high-contrast-graphic-30); --krds-color-light-graphic-50: var(--krds-color-high-contrast-graphic-50); --krds-color-light-graphic-70: var(--krds-color-high-contrast-graphic-70); --krds-color-light-graphic-90: var(--krds-color-high-contrast-graphic-90); --krds-color-light-gray-0: var(--krds-color-high-contrast-gray-0); --krds-color-light-gray-10: var(--krds-color-high-contrast-gray-10); --krds-color-light-gray-100: var(--krds-color-high-contrast-gray-100); --krds-color-light-gray-20: var(--krds-color-high-contrast-gray-20); --krds-color-light-gray-30: var(--krds-color-high-contrast-gray-30); --krds-color-light-gray-40: var(--krds-color-high-contrast-gray-40); --krds-color-light-gray-5: var(--krds-color-high-contrast-gray-5); --krds-color-light-gray-50: var(--krds-color-high-contrast-gray-50); --krds-color-light-gray-60: var(--krds-color-high-contrast-gray-60); --krds-color-light-gray-70: var(--krds-color-high-contrast-gray-70); --krds-color-light-gray-80: var(--krds-color-high-contrast-gray-80); --krds-color-light-gray-90: var(--krds-color-high-contrast-gray-90); --krds-color-light-gray-95: var(--krds-color-high-contrast-gray-95); --krds-color-light-information-10: var(--krds-color-high-contrast-information-10); --krds-color-light-information-20: var(--krds-color-high-contrast-information-20); --krds-color-light-information-30: var(--krds-color-high-contrast-information-30); --krds-color-light-information-40: var(--krds-color-high-contrast-information-40); --krds-color-light-information-5: var(--krds-color-high-contrast-information-5); --krds-color-light-information-50: var(--krds-color-high-contrast-information-50); --krds-color-light-information-60: var(--krds-color-high-contrast-information-60); --krds-color-light-information-70: var(--krds-color-high-contrast-information-70); --krds-color-light-information-80: var(--krds-color-high-contrast-information-80); --krds-color-light-information-90: var(--krds-color-high-contrast-information-90); --krds-color-light-information-95: var(--krds-color-high-contrast-information-95); --krds-color-light-point-10: var(--krds-color-high-contrast-point-10); --krds-color-light-point-20: var(--krds-color-high-contrast-point-20); --krds-color-light-point-30: var(--krds-color-high-contrast-point-30); --krds-color-light-point-40: var(--krds-color-high-contrast-point-40); --krds-color-light-point-5: var(--krds-color-high-contrast-point-5); --krds-color-light-point-50: var(--krds-color-high-contrast-point-50); --krds-color-light-point-60: var(--krds-color-high-contrast-point-60); --krds-color-light-point-70: var(--krds-color-high-contrast-point-70); --krds-color-light-point-80: var(--krds-color-high-contrast-point-80); --krds-color-light-point-90: var(--krds-color-high-contrast-point-90); --krds-color-light-point-95: var(--krds-color-high-contrast-point-95); --krds-color-light-primary-10: var(--krds-color-high-contrast-primary-10); --krds-color-light-primary-20: var(--krds-color-high-contrast-primary-20); --krds-color-light-primary-30: var(--krds-color-high-contrast-primary-30); --krds-color-light-primary-40: var(--krds-color-high-contrast-primary-40); --krds-color-light-primary-5: var(--krds-color-high-contrast-primary-5); --krds-color-light-primary-50: var(--krds-color-high-contrast-primary-50); --krds-color-light-primary-60: var(--krds-color-high-contrast-primary-60); --krds-color-light-primary-70: var(--krds-color-high-contrast-primary-70); --krds-color-light-primary-80: var(--krds-color-high-contrast-primary-80); --krds-color-light-primary-90: var(--krds-color-high-contrast-primary-90); --krds-color-light-primary-95: var(--krds-color-high-contrast-primary-95); --krds-color-light-secondary-10: var(--krds-color-high-contrast-secondary-10); --krds-color-light-secondary-20: var(--krds-color-high-contrast-secondary-20); --krds-color-light-secondary-30: var(--krds-color-high-contrast-secondary-30); --krds-color-light-secondary-40: var(--krds-color-high-contrast-secondary-40); --krds-color-light-secondary-5: var(--krds-color-high-contrast-secondary-5); --krds-color-light-secondary-50: var(--krds-color-high-contrast-secondary-50); --krds-color-light-secondary-60: var(--krds-color-high-contrast-secondary-60); --krds-color-light-secondary-70: var(--krds-color-high-contrast-secondary-70); --krds-color-light-secondary-80: var(--krds-color-high-contrast-secondary-80); --krds-color-light-secondary-90: var(--krds-color-high-contrast-secondary-90); --krds-color-light-secondary-95: var(--krds-color-high-contrast-secondary-95); --krds-color-light-success-10: var(--krds-color-high-contrast-success-10); --krds-color-light-success-20: var(--krds-color-high-contrast-success-20); --krds-color-light-success-30: var(--krds-color-high-contrast-success-30); --krds-color-light-success-40: var(--krds-color-high-contrast-success-40); --krds-color-light-success-5: var(--krds-color-high-contrast-success-5); --krds-color-light-success-50: var(--krds-color-high-contrast-success-50); --krds-color-light-success-60: var(--krds-color-high-contrast-success-60); --krds-color-light-success-70: var(--krds-color-high-contrast-success-70); --krds-color-light-success-80: var(--krds-color-high-contrast-success-80); --krds-color-light-success-90: var(--krds-color-high-contrast-success-90); --krds-color-light-success-95: var(--krds-color-high-contrast-success-95); --krds-color-light-warning-10: var(--krds-color-high-contrast-warning-10); --krds-color-light-warning-20: var(--krds-color-high-contrast-warning-20); --krds-color-light-warning-30: var(--krds-color-high-contrast-warning-30); --krds-color-light-warning-40: var(--krds-color-high-contrast-warning-40); --krds-color-light-warning-5: var(--krds-color-high-contrast-warning-5); --krds-color-light-warning-50: var(--krds-color-high-contrast-warning-50); --krds-color-light-warning-60: var(--krds-color-high-contrast-warning-60); --krds-color-light-warning-70: var(--krds-color-high-contrast-warning-70); --krds-color-light-warning-80: var(--krds-color-high-contrast-warning-80); --krds-color-light-warning-90: var(--krds-color-high-contrast-warning-90); --krds-color-light-warning-95: var(--krds-color-high-contrast-warning-95); } @media (prefers-color-scheme: dark) { html[data-krds-mode="theme"] { --krds-light-color-action-disabled: var(--krds-high-contrast-color-action-disabled); --krds-light-color-action-primary: var(--krds-high-contrast-color-action-primary); --krds-light-color-action-primary-active: var(--krds-high-contrast-color-action-primary-active); --krds-light-color-action-primary-hover: var(--krds-high-contrast-color-action-primary-hover); --krds-light-color-action-primary-pressed: var(--krds-high-contrast-color-action-primary-pressed); --krds-light-color-action-primary-selected: var(--krds-high-contrast-color-action-primary-selected); --krds-light-color-action-secondary: var(--krds-high-contrast-color-action-secondary); --krds-light-color-action-secondary-active: var(--krds-high-contrast-color-action-secondary-active); --krds-light-color-action-secondary-hover: var(--krds-high-contrast-color-action-secondary-hover); --krds-light-color-action-secondary-on: var(--krds-high-contrast-color-action-secondary-on); --krds-light-color-action-secondary-on-hover: var(--krds-high-contrast-color-action-secondary-on-hover); --krds-light-color-action-secondary-on-pressed: var(--krds-high-contrast-color-action-secondary-on-pressed); --krds-light-color-action-secondary-on-selected: var(--krds-high-contrast-color-action-secondary-on-selected); --krds-light-color-action-secondary-pressed: var(--krds-high-contrast-color-action-secondary-pressed); --krds-light-color-action-secondary-selected: var(--krds-high-contrast-color-action-secondary-selected); --krds-light-color-action-white: var(--krds-high-contrast-color-action-white); --krds-light-color-alpha-base0: var(--krds-high-contrast-color-alpha-base0); --krds-light-color-alpha-base10: var(--krds-high-contrast-color-alpha-base10); --krds-light-color-alpha-base100: var(--krds-high-contrast-color-alpha-base100); --krds-light-color-alpha-base25: var(--krds-high-contrast-color-alpha-base25); --krds-light-color-alpha-base50: var(--krds-high-contrast-color-alpha-base50); --krds-light-color-alpha-base75: var(--krds-high-contrast-color-alpha-base75); --krds-light-color-alpha-inverse0: var(--krds-high-contrast-color-alpha-inverse0); --krds-light-color-alpha-inverse10: var(--krds-high-contrast-color-alpha-inverse10); --krds-light-color-alpha-inverse100: var(--krds-high-contrast-color-alpha-inverse100); --krds-light-color-alpha-inverse25: var(--krds-high-contrast-color-alpha-inverse25); --krds-light-color-alpha-inverse50: var(--krds-high-contrast-color-alpha-inverse50); --krds-light-color-alpha-inverse75: var(--krds-high-contrast-color-alpha-inverse75); --krds-light-color-alpha-shadow1: var(--krds-high-contrast-color-alpha-shadow1); --krds-light-color-alpha-shadow2: var(--krds-high-contrast-color-alpha-shadow2); --krds-light-color-alpha-shadow3: var(--krds-high-contrast-color-alpha-shadow3); --krds-light-color-background-dim: var(--krds-high-contrast-color-background-dim); --krds-light-color-background-gray-subtle: var(--krds-high-contrast-color-background-gray-subtle); --krds-light-color-background-gray-subtler: var(--krds-high-contrast-color-background-gray-subtler); --krds-light-color-background-inverse: var(--krds-high-contrast-color-background-inverse); --krds-light-color-background-white: var(--krds-high-contrast-color-background-white); --krds-light-color-border-danger: var(--krds-high-contrast-color-border-danger); --krds-light-color-border-danger-light: var(--krds-high-contrast-color-border-danger-light); --krds-light-color-border-disabled: var(--krds-high-contrast-color-border-disabled); --krds-light-color-border-gray: var(--krds-high-contrast-color-border-gray); --krds-light-color-border-gray-dark: var(--krds-high-contrast-color-border-gray-dark); --krds-light-color-border-gray-darker: var(--krds-high-contrast-color-border-gray-darker); --krds-light-color-border-gray-light: var(--krds-high-contrast-color-border-gray-light); --krds-light-color-border-information: var(--krds-high-contrast-color-border-information); --krds-light-color-border-information-light: var(--krds-high-contrast-color-border-information-light); --krds-light-color-border-inverse: var(--krds-high-contrast-color-border-inverse); --krds-light-color-border-point: var(--krds-high-contrast-color-border-point); --krds-light-color-border-point-light: var(--krds-high-contrast-color-border-point-light); --krds-light-color-border-primary: var(--krds-high-contrast-color-border-primary); --krds-light-color-border-primary-light: var(--krds-high-contrast-color-border-primary-light); --krds-light-color-border-secondary: var(--krds-high-contrast-color-border-secondary); --krds-light-color-border-secondary-light: var(--krds-high-contrast-color-border-secondary-light); --krds-light-color-border-success: var(--krds-high-contrast-color-border-success); --krds-light-color-border-success-light: var(--krds-high-contrast-color-border-success-light); --krds-light-color-border-transparency: var(--krds-high-contrast-color-border-transparency); --krds-light-color-border-warning: var(--krds-high-contrast-color-border-warning); --krds-light-color-border-warning-light: var(--krds-high-contrast-color-border-warning-light); --krds-light-color-button-disabled-border: var(--krds-high-contrast-color-button-disabled-border); --krds-light-color-button-disabled-fill: var(--krds-high-contrast-color-button-disabled-fill); --krds-light-color-button-primary-fill: var(--krds-high-contrast-color-button-primary-fill); --krds-light-color-button-primary-fill-hover: var(--krds-high-contrast-color-button-primary-fill-hover); --krds-light-color-button-primary-fill-pressed: var(--krds-high-contrast-color-button-primary-fill-pressed); --krds-light-color-button-secondary-border: var(--krds-high-contrast-color-button-secondary-border); --krds-light-color-button-secondary-fill: var(--krds-high-contrast-color-button-secondary-fill); --krds-light-color-button-secondary-fill-hover: var(--krds-high-contrast-color-button-secondary-fill-hover); --krds-light-color-button-secondary-fill-pressed: var(--krds-high-contrast-color-button-secondary-fill-pressed); --krds-light-color-button-tertiary-border: var(--krds-high-contrast-color-button-tertiary-border); --krds-light-color-button-tertiary-fill: var(--krds-high-contrast-color-button-tertiary-fill); --krds-light-color-button-tertiary-fill-hover: var(--krds-high-contrast-color-button-tertiary-fill-hover); --krds-light-color-button-tertiary-fill-pressed: var(--krds-high-contrast-color-button-tertiary-fill-pressed); --krds-light-color-button-text-border: var(--krds-high-contrast-color-button-text-border); --krds-light-color-button-text-fill: var(--krds-high-contrast-color-button-text-fill); --krds-light-color-button-text-fill-hover: var(--krds-high-contrast-color-button-text-fill-hover); --krds-light-color-button-text-fill-pressed: var(--krds-high-contrast-color-button-text-fill-pressed); --krds-light-color-divider-error: var(--krds-high-contrast-color-divider-error); --krds-light-color-divider-gray: var(--krds-high-contrast-color-divider-gray); --krds-light-color-divider-gray-dark: var(--krds-high-contrast-color-divider-gray-dark); --krds-light-color-divider-gray-darker: var(--krds-high-contrast-color-divider-gray-darker); --krds-light-color-divider-gray-light: var(--krds-high-contrast-color-divider-gray-light); --krds-light-color-divider-inverse: var(--krds-high-contrast-color-divider-inverse); --krds-light-color-divider-point: var(--krds-high-contrast-color-divider-point); --krds-light-color-divider-primary: var(--krds-high-contrast-color-divider-primary); --krds-light-color-divider-primary-light: var(--krds-high-contrast-color-divider-primary-light); --krds-light-color-divider-secondary: var(--krds-high-contrast-color-divider-secondary); --krds-light-color-divider-secondary-light: var(--krds-high-contrast-color-divider-secondary-light); --krds-light-color-element-danger: var(--krds-high-contrast-color-element-danger); --krds-light-color-element-danger-lighter: var(--krds-high-contrast-color-element-danger-lighter); --krds-light-color-element-disabled-dark: var(--krds-high-contrast-color-element-disabled-dark); --krds-light-color-element-disabled-light: var(--krds-high-contrast-color-element-disabled-light); --krds-light-color-element-gray: var(--krds-high-contrast-color-element-gray); --krds-light-color-element-gray-dark: var(--krds-high-contrast-color-element-gray-dark); --krds-light-color-element-gray-light: var(--krds-high-contrast-color-element-gray-light); --krds-light-color-element-gray-lighter: var(--krds-high-contrast-color-element-gray-lighter); --krds-light-color-element-information: var(--krds-high-contrast-color-element-information); --krds-light-color-element-information-lighter: var(--krds-high-contrast-color-element-information-lighter); --krds-light-color-element-inverse: var(--krds-high-contrast-color-element-inverse); --krds-light-color-element-inverse-static: var(--krds-high-contrast-color-element-inverse-static); --krds-light-color-element-point: var(--krds-high-contrast-color-element-point); --krds-light-color-element-point-light: var(--krds-high-contrast-color-element-point-light); --krds-light-color-element-point-lighter: var(--krds-high-contrast-color-element-point-lighter); --krds-light-color-element-primary: var(--krds-high-contrast-color-element-primary); --krds-light-color-element-primary-light: var(--krds-high-contrast-color-element-primary-light); --krds-light-color-element-primary-lighter: var(--krds-high-contrast-color-element-primary-lighter); --krds-light-color-element-secondary: var(--krds-high-contrast-color-element-secondary); --krds-light-color-element-secondary-light: var(--krds-high-contrast-color-element-secondary-light); --krds-light-color-element-secondary-lighter: var(--krds-high-contrast-color-element-secondary-lighter); --krds-light-color-element-success: var(--krds-high-contrast-color-element-success); --krds-light-color-element-success-lighter: var(--krds-high-contrast-color-element-success-lighter); --krds-light-color-element-warning: var(--krds-high-contrast-color-element-warning); --krds-light-color-element-warning-lighter: var(--krds-high-contrast-color-element-warning-lighter); --krds-light-color-graphic-blue: var(--krds-high-contrast-color-graphic-blue); --krds-light-color-graphic-blue-dark: var(--krds-high-contrast-color-graphic-blue-dark); --krds-light-color-graphic-blue-darker: var(--krds-high-contrast-color-graphic-blue-darker); --krds-light-color-graphic-blue-subtle: var(--krds-high-contrast-color-graphic-blue-subtle); --krds-light-color-graphic-blue-subtler: var(--krds-high-contrast-color-graphic-blue-subtler); --krds-light-color-graphic-brand: var(--krds-high-contrast-color-graphic-brand); --krds-light-color-graphic-red: var(--krds-high-contrast-color-graphic-red); --krds-light-color-graphic-red-dark: var(--krds-high-contrast-color-graphic-red-dark); --krds-light-color-graphic-red-darker: var(--krds-high-contrast-color-graphic-red-darker); --krds-light-color-graphic-red-subtle: var(--krds-high-contrast-color-graphic-red-subtle); --krds-light-color-graphic-red-subtler: var(--krds-high-contrast-color-graphic-red-subtler); --krds-light-color-icon-danger: var(--krds-high-contrast-color-icon-danger); --krds-light-color-icon-danger-static: var(--krds-high-contrast-color-icon-danger-static); --krds-light-color-icon-disabled: var(--krds-high-contrast-color-icon-disabled); --krds-light-color-icon-disabled-on: var(--krds-high-contrast-color-icon-disabled-on); --krds-light-color-icon-gray: var(--krds-high-contrast-color-icon-gray); --krds-light-color-icon-gray-fill: var(--krds-high-contrast-color-icon-gray-fill); --krds-light-color-icon-gray-light: var(--krds-high-contrast-color-icon-gray-light); --krds-light-color-icon-gray-static: var(--krds-high-contrast-color-icon-gray-static); --krds-light-color-icon-information: var(--krds-high-contrast-color-icon-information); --krds-light-color-icon-information-static: var(--krds-high-contrast-color-icon-information-static); --krds-light-color-icon-inverse: var(--krds-high-contrast-color-icon-inverse); --krds-light-color-icon-inverse-static: var(--krds-high-contrast-color-icon-inverse-static); --krds-light-color-icon-point: var(--krds-high-contrast-color-icon-point); --krds-light-color-icon-point-static: var(--krds-high-contrast-color-icon-point-static); --krds-light-color-icon-primary: var(--krds-high-contrast-color-icon-primary); --krds-light-color-icon-primary-static: var(--krds-high-contrast-color-icon-primary-static); --krds-light-color-icon-secondary: var(--krds-high-contrast-color-icon-secondary); --krds-light-color-icon-secondary-static: var(--krds-high-contrast-color-icon-secondary-static); --krds-light-color-icon-success: var(--krds-high-contrast-color-icon-success); --krds-light-color-icon-success-static: var(--krds-high-contrast-color-icon-success-static); --krds-light-color-icon-warning: var(--krds-high-contrast-color-icon-warning); --krds-light-color-icon-warning-static: var(--krds-high-contrast-color-icon-warning-static); --krds-light-color-input-border: var(--krds-high-contrast-color-input-border); --krds-light-color-input-border-active: var(--krds-high-contrast-color-input-border-active); --krds-light-color-input-border-disabled: var(--krds-high-contrast-color-input-border-disabled); --krds-light-color-input-border-error: var(--krds-high-contrast-color-input-border-error); --krds-light-color-input-surface: var(--krds-high-contrast-color-input-surface); --krds-light-color-input-surface-disabled: var(--krds-high-contrast-color-input-surface-disabled); --krds-light-color-link-default: var(--krds-high-contrast-color-link-default); --krds-light-color-link-hover: var(--krds-high-contrast-color-link-hover); --krds-light-color-link-pressed: var(--krds-high-contrast-color-link-pressed); --krds-light-color-link-visited: var(--krds-high-contrast-color-link-visited); --krds-light-color-surface-danger-subtler: var(--krds-high-contrast-color-surface-danger-subtler); --krds-light-color-surface-disabled: var(--krds-high-contrast-color-surface-disabled); --krds-light-color-surface-gray-subtle: var(--krds-high-contrast-color-surface-gray-subtle); --krds-light-color-surface-gray-subtler: var(--krds-high-contrast-color-surface-gray-subtler); --krds-light-color-surface-information-subtler: var(--krds-high-contrast-color-surface-information-subtler); --krds-light-color-surface-inverse: var(--krds-high-contrast-color-surface-inverse); --krds-light-color-surface-inverse-static: var(--krds-high-contrast-color-surface-inverse-static); --krds-light-color-surface-point-subtler: var(--krds-high-contrast-color-surface-point-subtler); --krds-light-color-surface-primary-subtler: var(--krds-high-contrast-color-surface-primary-subtler); --krds-light-color-surface-secondary-subtler: var(--krds-high-contrast-color-surface-secondary-subtler); --krds-light-color-surface-success-subtler: var(--krds-high-contrast-color-surface-success-subtler); --krds-light-color-surface-warning-subtler: var(--krds-high-contrast-color-surface-warning-subtler); --krds-light-color-surface-white: var(--krds-high-contrast-color-surface-white); --krds-light-color-surface-white-static: var(--krds-high-contrast-color-surface-white-static); --krds-light-color-surface-white-subtle: var(--krds-high-contrast-color-surface-white-subtle); --krds-light-color-surface-white-subtler: var(--krds-high-contrast-color-surface-white-subtler); --krds-light-color-text-basic: var(--krds-high-contrast-color-text-basic); --krds-light-color-text-basic-inverse: var(--krds-high-contrast-color-text-basic-inverse); --krds-light-color-text-bolder: var(--krds-high-contrast-color-text-bolder); --krds-light-color-text-bolder-inverse: var(--krds-high-contrast-color-text-bolder-inverse); --krds-light-color-text-danger: var(--krds-high-contrast-color-text-danger); --krds-light-color-text-disabled: var(--krds-high-contrast-color-text-disabled); --krds-light-color-text-disabled-on: var(--krds-high-contrast-color-text-disabled-on); --krds-light-color-text-information: var(--krds-high-contrast-color-text-information); --krds-light-color-text-inverse-static: var(--krds-high-contrast-color-text-inverse-static); --krds-light-color-text-point: var(--krds-high-contrast-color-text-point); --krds-light-color-text-primary: var(--krds-high-contrast-color-text-primary); --krds-light-color-text-secondary: var(--krds-high-contrast-color-text-secondary); --krds-light-color-text-static: var(--krds-high-contrast-color-text-static); --krds-light-color-text-subtle: var(--krds-high-contrast-color-text-subtle); --krds-light-color-text-subtle-inverse: var(--krds-high-contrast-color-text-subtle-inverse); --krds-light-color-text-success: var(--krds-high-contrast-color-text-success); --krds-light-color-text-warning: var(--krds-high-contrast-color-text-warning); --krds-color-light-alpha-black0: var(--krds-color-high-contrast-alpha-black0); --krds-color-light-alpha-black10: var(--krds-color-high-contrast-alpha-black10); --krds-color-light-alpha-black100: var(--krds-color-high-contrast-alpha-black100); --krds-color-light-alpha-black25: var(--krds-color-high-contrast-alpha-black25); --krds-color-light-alpha-black50: var(--krds-color-high-contrast-alpha-black50); --krds-color-light-alpha-black75: var(--krds-color-high-contrast-alpha-black75); --krds-color-light-alpha-white0: var(--krds-color-high-contrast-alpha-white0); --krds-color-light-alpha-white10: var(--krds-color-high-contrast-alpha-white10); --krds-color-light-alpha-white100: var(--krds-color-high-contrast-alpha-white100); --krds-color-light-alpha-white25: var(--krds-color-high-contrast-alpha-white25); --krds-color-light-alpha-white50: var(--krds-color-high-contrast-alpha-white50); --krds-color-light-alpha-white75: var(--krds-color-high-contrast-alpha-white75); --krds-color-light-danger-10: var(--krds-color-high-contrast-danger-10); --krds-color-light-danger-20: var(--krds-color-high-contrast-danger-20); --krds-color-light-danger-30: var(--krds-color-high-contrast-danger-30); --krds-color-light-danger-40: var(--krds-color-high-contrast-danger-40); --krds-color-light-danger-5: var(--krds-color-high-contrast-danger-5); --krds-color-light-danger-50: var(--krds-color-high-contrast-danger-50); --krds-color-light-danger-60: var(--krds-color-high-contrast-danger-60); --krds-color-light-danger-70: var(--krds-color-high-contrast-danger-70); --krds-color-light-danger-80: var(--krds-color-high-contrast-danger-80); --krds-color-light-danger-90: var(--krds-color-high-contrast-danger-90); --krds-color-light-danger-95: var(--krds-color-high-contrast-danger-95); --krds-color-light-graphic-10: var(--krds-color-high-contrast-graphic-10); --krds-color-light-graphic-30: var(--krds-color-high-contrast-graphic-30); --krds-color-light-graphic-50: var(--krds-color-high-contrast-graphic-50); --krds-color-light-graphic-70: var(--krds-color-high-contrast-graphic-70); --krds-color-light-graphic-90: var(--krds-color-high-contrast-graphic-90); --krds-color-light-gray-0: var(--krds-color-high-contrast-gray-0); --krds-color-light-gray-10: var(--krds-color-high-contrast-gray-10); --krds-color-light-gray-100: var(--krds-color-high-contrast-gray-100); --krds-color-light-gray-20: var(--krds-color-high-contrast-gray-20); --krds-color-light-gray-30: var(--krds-color-high-contrast-gray-30); --krds-color-light-gray-40: var(--krds-color-high-contrast-gray-40); --krds-color-light-gray-5: var(--krds-color-high-contrast-gray-5); --krds-color-light-gray-50: var(--krds-color-high-contrast-gray-50); --krds-color-light-gray-60: var(--krds-color-high-contrast-gray-60); --krds-color-light-gray-70: var(--krds-color-high-contrast-gray-70); --krds-color-light-gray-80: var(--krds-color-high-contrast-gray-80); --krds-color-light-gray-90: var(--krds-color-high-contrast-gray-90); --krds-color-light-gray-95: var(--krds-color-high-contrast-gray-95); --krds-color-light-information-10: var(--krds-color-high-contrast-information-10); --krds-color-light-information-20: var(--krds-color-high-contrast-information-20); --krds-color-light-information-30: var(--krds-color-high-contrast-information-30); --krds-color-light-information-40: var(--krds-color-high-contrast-information-40); --krds-color-light-information-5: var(--krds-color-high-contrast-information-5); --krds-color-light-information-50: var(--krds-color-high-contrast-information-50); --krds-color-light-information-60: var(--krds-color-high-contrast-information-60); --krds-color-light-information-70: var(--krds-color-high-contrast-information-70); --krds-color-light-information-80: var(--krds-color-high-contrast-information-80); --krds-color-light-information-90: var(--krds-color-high-contrast-information-90); --krds-color-light-information-95: var(--krds-color-high-contrast-information-95); --krds-color-light-point-10: var(--krds-color-high-contrast-point-10); --krds-color-light-point-20: var(--krds-color-high-contrast-point-20); --krds-color-light-point-30: var(--krds-color-high-contrast-point-30); --krds-color-light-point-40: var(--krds-color-high-contrast-point-40); --krds-color-light-point-5: var(--krds-color-high-contrast-point-5); --krds-color-light-point-50: var(--krds-color-high-contrast-point-50); --krds-color-light-point-60: var(--krds-color-high-contrast-point-60); --krds-color-light-point-70: var(--krds-color-high-contrast-point-70); --krds-color-light-point-80: var(--krds-color-high-contrast-point-80); --krds-color-light-point-90: var(--krds-color-high-contrast-point-90); --krds-color-light-point-95: var(--krds-color-high-contrast-point-95); --krds-color-light-primary-10: var(--krds-color-high-contrast-primary-10); --krds-color-light-primary-20: var(--krds-color-high-contrast-primary-20); --krds-color-light-primary-30: var(--krds-color-high-contrast-primary-30); --krds-color-light-primary-40: var(--krds-color-high-contrast-primary-40); --krds-color-light-primary-5: var(--krds-color-high-contrast-primary-5); --krds-color-light-primary-50: var(--krds-color-high-contrast-primary-50); --krds-color-light-primary-60: var(--krds-color-high-contrast-primary-60); --krds-color-light-primary-70: var(--krds-color-high-contrast-primary-70); --krds-color-light-primary-80: var(--krds-color-high-contrast-primary-80); --krds-color-light-primary-90: var(--krds-color-high-contrast-primary-90); --krds-color-light-primary-95: var(--krds-color-high-contrast-primary-95); --krds-color-light-secondary-10: var(--krds-color-high-contrast-secondary-10); --krds-color-light-secondary-20: var(--krds-color-high-contrast-secondary-20); --krds-color-light-secondary-30: var(--krds-color-high-contrast-secondary-30); --krds-color-light-secondary-40: var(--krds-color-high-contrast-secondary-40); --krds-color-light-secondary-5: var(--krds-color-high-contrast-secondary-5); --krds-color-light-secondary-50: var(--krds-color-high-contrast-secondary-50); --krds-color-light-secondary-60: var(--krds-color-high-contrast-secondary-60); --krds-color-light-secondary-70: var(--krds-color-high-contrast-secondary-70); --krds-color-light-secondary-80: var(--krds-color-high-contrast-secondary-80); --krds-color-light-secondary-90: var(--krds-color-high-contrast-secondary-90); --krds-color-light-secondary-95: var(--krds-color-high-contrast-secondary-95); --krds-color-light-success-10: var(--krds-color-high-contrast-success-10); --krds-color-light-success-20: var(--krds-color-high-contrast-success-20); --krds-color-light-success-30: var(--krds-color-high-contrast-success-30); --krds-color-light-success-40: var(--krds-color-high-contrast-success-40); --krds-color-light-success-5: var(--krds-color-high-contrast-success-5); --krds-color-light-success-50: var(--krds-color-high-contrast-success-50); --krds-color-light-success-60: var(--krds-color-high-contrast-success-60); --krds-color-light-success-70: var(--krds-color-high-contrast-success-70); --krds-color-light-success-80: var(--krds-color-high-contrast-success-80); --krds-color-light-success-90: var(--krds-color-high-contrast-success-90); --krds-color-light-success-95: var(--krds-color-high-contrast-success-95); --krds-color-light-warning-10: var(--krds-color-high-contrast-warning-10); --krds-color-light-warning-20: var(--krds-color-high-contrast-warning-20); --krds-color-light-warning-30: var(--krds-color-high-contrast-warning-30); --krds-color-light-warning-40: var(--krds-color-high-contrast-warning-40); --krds-color-light-warning-5: var(--krds-color-high-contrast-warning-5); --krds-color-light-warning-50: var(--krds-color-high-contrast-warning-50); --krds-color-light-warning-60: var(--krds-color-high-contrast-warning-60); --krds-color-light-warning-70: var(--krds-color-high-contrast-warning-70); --krds-color-light-warning-80: var(--krds-color-high-contrast-warning-80); --krds-color-light-warning-90: var(--krds-color-high-contrast-warning-90); --krds-color-light-warning-95: var(--krds-color-high-contrast-warning-95); } } /* @generated:mode-aliases end */