/* Mist 디자인 언어 — 토큰
 *
 * 생성된 파일이다. 손으로 고치지 마라 — 고칠 곳은 테마 SCSS 이고,
 * `python tools/gen-mist-tokens.py` 가 이 파일을 다시 찍는다.
 *
 * 원천: Clevi.App.Components/src/Clevi.App.Components/themes/clevi-mist-{light,dark}-base.scss
 * 읽는 법: Clevi.App.Components/docs/mist-design-language.md
 *
 * 여기 있는 것은 **언어 토큰뿐**이다. 컴포넌트 배선(입력 상태 재매핑,
 * 사이드바/헤더 매핑, 페이지네이터 등)은 스택마다 다르므로 빠져 있다.
 *
 * 지면은 `color-scheme` 하나가 가른다 — :root 가 `light dark` 라 시스템 설정을
 * 따르고, 명시 토글은 `[data-mist]` 로 `only light` / `only dark` 를 얹어 이긴다.
 */

:root {
    color-scheme: light dark;

    /* 액센트 — 유일한 색 */
    --clc-primary: light-dark(#6B45EE, #BDA8FA);
    --clc-on-primary: light-dark(#FFFFFF, #2A1A5E);

    /* 잉크 3단 — 본문 / 보조 / 삼차 */
    --clv-text-primary: light-dark(#1A1922, #F0EFF4);
    --clv-text-secondary: light-dark(#5C5A68, #B9B7C4);
    --clv-text-tertiary: light-dark(#7F7D8A, #7E7C8A);

    /* 의미색 — 액센트와 같은 뒤집기(라이트=진한 색+흰 잉크 / 다크=밝은 색+진한 잉크) */
    --clc-success: light-dark(#12794A, #7FDCA6);
    --clc-on-success: light-dark(#FFFFFF, #05331C);
    --clc-warning: light-dark(#F2A50C, #F5C453);
    --clc-on-warning: light-dark(#241800, #331F00);
    --clc-danger: light-dark(#C43C31, #FF9E92);
    --clc-on-danger: light-dark(#FFFFFF, #4E140E);
    --clc-info: light-dark(#1D63C8, #9FC7FF);
    --clc-on-info: light-dark(#FFFFFF, #0A2A57);
    --clc-error: light-dark(#C43C31, #FF9E92);
    --clc-on-error: light-dark(#FFFFFF, #4E140E);
    --clc-warning-ink-base: light-dark(#9C6900, #F5C453);

    /* 밝기 변형의 두 끝 — `-light` 는 지면 쪽, `-dark`/`-darker` 는 지면 반대. 램프는 이 둘에서 파생된다 */
    --clc-shade-ground: light-dark(#FFFFFF, #141318);
    --clc-shade-ground-ink: light-dark(#1A1922, #F0EFF4);
    --clc-shade-far: light-dark(#16151C, #FFFFFF);
    --clc-shade-far-ink: light-dark(#FFFFFF, #1A1922);

    /* 중립 액션 채움 — 지면과의 명도차 순서(비활성 < 워시 < quiet). neutral 만 재질에서 파생 */
    --clc-mist-disabled-fill: light-dark(rgba(20, 16, 40, 0.028), rgba(255, 255, 255, 0.03));
    --clc-mist-disabled-ink: light-dark(#6A6875, #7E7C8A);
    --clc-mist-disabled-ink-contrast: light-dark(#75737F, #7E7C8A);
    --clc-mist-action-quiet-wash: light-dark(rgba(20, 16, 40, 0.035), rgba(255, 255, 255, 0.035));
    --clc-mist-action-quiet-fill: light-dark(rgba(20, 16, 40, 0.05), rgba(255, 255, 255, 0.055));
    --clc-mist-action-contrast-fill: light-dark(#1A1922, #EDECF2);
    --clc-mist-action-contrast-ink: light-dark(#FBFBFD, #1A1922);

    /* L0 캔버스 — 평평한 바닥 한 색(불투명) */
    --clc-body-background-color: light-dark(#ECEBEF, #141318);

    /* 재질 — 층마다 하나, `-static` 은 흐림 없는 대체값 */
    --clc-material-shell: light-dark(rgba(250, 250, 252, 0.60), rgba(25, 24, 32, 0.55));
    --clc-material-shell-static: light-dark(rgba(250, 250, 252, 0.88), rgba(25, 24, 32, 0.92));
    --clc-material-paper: light-dark(rgba(255, 255, 255, 0.82), rgba(33, 32, 42, 0.85));
    --clc-material-paper-raised: light-dark(rgba(255, 255, 255, 0.94), rgba(48, 46, 60, 0.92));
    --clc-material-chrome: light-dark(rgba(255, 255, 255, 0.72), rgba(48, 46, 60, 0.72));
    --clc-material-chrome-static: light-dark(rgba(255, 255, 255, 0.96), rgba(48, 46, 60, 0.96));
    --clc-material-veil: light-dark(rgba(252, 252, 254, 0.68), rgba(38, 37, 48, 0.62));
    --clc-material-veil-static: light-dark(rgba(252, 252, 254, 0.95), rgba(38, 37, 48, 0.96));
    --clc-material-scrim: light-dark(rgba(24, 18, 46, 0.24), rgba(0, 0, 0, 0.24));
    --clc-material-scrim-static: light-dark(rgba(24, 18, 46, 0.46), rgba(0, 0, 0, 0.62));

    /* 입력 재질 (L2⁻) — 라이트는 어둡게, 다크는 밝게 판다 */
    --clc-material-field: light-dark(rgba(20, 16, 40, 0.07), rgba(255, 255, 255, 0.09));
    --clc-material-field-strong: light-dark(rgba(20, 16, 40, 0.11), rgba(255, 255, 255, 0.14));
    --clc-material-field-raised: light-dark(#FFFFFF, #302E3C);

    /* 선과 빛 */
    --clc-material-hairline: light-dark(rgba(22, 18, 38, 0.09), rgba(255, 255, 255, 0.08));
    --clc-material-hairline-strong: light-dark(rgba(22, 18, 38, 0.16), rgba(255, 255, 255, 0.15));
    --clc-material-specular: light-dark(rgba(255, 255, 255, 0.60), rgba(255, 255, 255, 0.08));

    /* 프리즘 램프 — 보라 → 파랑 → 청록 → 분홍 → 보라 */
    --clv-prism-1: light-dark(#8A62FF, #A78BFF);
    --clv-prism-2: light-dark(#008DDC, #6FB8F2);
    --clv-prism-3: light-dark(#009D7B, #6FD8B8);
    --clv-prism-4: light-dark(#D445A3, #F09FCE);

    /* 강조 프리즘 램프 — 청보라 h288 → 보라 h308 → 난초 h330, 액센트 호만 */
    --clv-emphasis-prism-1: light-dark(#8565FF, #ADA3FF);
    --clv-emphasis-prism-2: light-dark(#AB54E9, #CD93FF);
    --clv-emphasis-prism-3: light-dark(#C54EBE, #E989E1);

    /* 지오메트리 — 컴포넌트 라이브러리의 기본 반경 */
    --clc-border-radius: 6px;

    /* 흐림 — `-lite` 는 강등 ⓪(Gecko)이 쓰는 얕은 반경 — 두 지면 같은 값이다. 흐림은 지면을 안 탄다. */
    --clc-material-blur-shell: blur(32px) saturate(1.4);
    --clc-material-blur-shell-lite: blur(16px) saturate(1.3);
    --clc-material-blur-chrome: blur(20px) saturate(1.4);
    --clc-material-blur-chrome-lite: blur(12px) saturate(1.3);
    --clc-material-blur-veil: blur(44px) saturate(1.6);
    --clc-material-blur-veil-lite: blur(22px) saturate(1.4);
    --clc-material-blur-scrim: blur(14px) saturate(1.1);
    --clc-material-blur-scrim-lite: blur(8px) saturate(1.05);

    /* 밝기 변형 — 표면과 그 위 잉크를 함께 이식한다 */
    --clc-primary-lighter: color-mix(in srgb, var(--clc-primary) var(--clc-shade-wash), transparent);
    --clc-on-primary-lighter: var(--clc-primary-dark);
    --clc-primary-light: color-mix(in srgb, var(--clc-primary) 34%, var(--clc-shade-ground));
    --clc-on-primary-light: var(--clc-shade-ground-ink);
    --clc-primary-dark: color-mix(in srgb, var(--clc-primary) 78%, var(--clc-shade-far));
    --clc-on-primary-dark: var(--clc-shade-far-ink);
    --clc-primary-darker: color-mix(in srgb, var(--clc-primary) 52%, var(--clc-shade-far));
    --clc-on-primary-darker: var(--clc-shade-far-ink);
    --clc-success-lighter: color-mix(in srgb, var(--clc-success) var(--clc-shade-wash), transparent);
    --clc-on-success-lighter: var(--clc-success-dark);
    --clc-success-light: color-mix(in srgb, var(--clc-success) 34%, var(--clc-shade-ground));
    --clc-on-success-light: var(--clc-shade-ground-ink);
    --clc-success-dark: color-mix(in srgb, var(--clc-success) 78%, var(--clc-shade-far));
    --clc-on-success-dark: var(--clc-shade-far-ink);
    --clc-success-darker: color-mix(in srgb, var(--clc-success) 52%, var(--clc-shade-far));
    --clc-on-success-darker: var(--clc-shade-far-ink);
    --clc-warning-lighter: color-mix(in srgb, var(--clc-warning) var(--clc-shade-wash), transparent);
    --clc-on-warning-lighter: var(--clc-warning-dark);
    --clc-warning-light: color-mix(in srgb, var(--clc-warning) 34%, var(--clc-shade-ground));
    --clc-on-warning-light: var(--clc-shade-ground-ink);
    --clc-warning-dark: color-mix(in srgb, var(--clc-warning-ink-base, var(--clc-warning)) 78%, var(--clc-shade-far));
    --clc-on-warning-dark: var(--clc-shade-far-ink);
    --clc-warning-darker: color-mix(in srgb, var(--clc-warning-ink-base, var(--clc-warning)) 52%, var(--clc-shade-far));
    --clc-on-warning-darker: var(--clc-shade-far-ink);
    --clc-danger-lighter: color-mix(in srgb, var(--clc-danger) var(--clc-shade-wash), transparent);
    --clc-on-danger-lighter: var(--clc-danger-dark);
    --clc-danger-light: color-mix(in srgb, var(--clc-danger) 34%, var(--clc-shade-ground));
    --clc-on-danger-light: var(--clc-shade-ground-ink);
    --clc-danger-dark: color-mix(in srgb, var(--clc-danger) 78%, var(--clc-shade-far));
    --clc-on-danger-dark: var(--clc-shade-far-ink);
    --clc-danger-darker: color-mix(in srgb, var(--clc-danger) 52%, var(--clc-shade-far));
    --clc-on-danger-darker: var(--clc-shade-far-ink);
    --clc-error-lighter: color-mix(in srgb, var(--clc-error) var(--clc-shade-wash), transparent);
    --clc-on-error-lighter: var(--clc-error-dark);
    --clc-error-light: color-mix(in srgb, var(--clc-error) 34%, var(--clc-shade-ground));
    --clc-on-error-light: var(--clc-shade-ground-ink);
    --clc-error-dark: color-mix(in srgb, var(--clc-error) 78%, var(--clc-shade-far));
    --clc-on-error-dark: var(--clc-shade-far-ink);
    --clc-error-darker: color-mix(in srgb, var(--clc-error) 52%, var(--clc-shade-far));
    --clc-on-error-darker: var(--clc-shade-far-ink);
    --clc-info-lighter: color-mix(in srgb, var(--clc-info) var(--clc-shade-wash), transparent);
    --clc-on-info-lighter: var(--clc-info-dark);
    --clc-info-light: color-mix(in srgb, var(--clc-info) 34%, var(--clc-shade-ground));
    --clc-on-info-light: var(--clc-shade-ground-ink);
    --clc-info-dark: color-mix(in srgb, var(--clc-info) 78%, var(--clc-shade-far));
    --clc-on-info-dark: var(--clc-shade-far-ink);
    --clc-info-darker: color-mix(in srgb, var(--clc-info) 52%, var(--clc-shade-far));
    --clc-on-info-darker: var(--clc-shade-far-ink);

    /* 중립 액션 — 뜬 종이 칸만 재질에서 파생된다 */
    --clc-mist-action-neutral-fill: var(--clc-material-paper-raised);
    --clc-mist-action-neutral-ink: var(--clv-text-primary, var(--clc-text-color));

    /* 의미색 잉크와 워시 — 의미색에서 파생되므로 색을 바꾸면 따라온다 */
    --clc-mist-ink-primary: color-mix(in srgb, var(--clc-primary) 85%, var(--clv-text-primary));
    --clc-mist-ink-success: color-mix(in srgb, var(--clc-success) 85%, var(--clv-text-primary));
    --clc-mist-ink-warning: color-mix(in srgb, var(--clc-warning-ink-base, var(--clc-warning)) 85%, var(--clv-text-primary));
    --clc-mist-ink-danger: color-mix(in srgb, var(--clc-danger) 75%, var(--clv-text-primary));
    --clc-mist-ink-error: color-mix(in srgb, var(--clc-error) 75%, var(--clv-text-primary));
    --clc-mist-ink-info: color-mix(in srgb, var(--clc-info) 85%, var(--clv-text-primary));
    --clc-mist-wash-primary: color-mix(in srgb, var(--clc-primary) 10%, transparent);
    --clc-mist-wash-success: color-mix(in srgb, var(--clc-success) 10%, transparent);
    --clc-mist-wash-warning: color-mix(in srgb, var(--clc-warning) 10%, transparent);
    --clc-mist-wash-danger: color-mix(in srgb, var(--clc-danger) 10%, transparent);
    --clc-mist-wash-error: color-mix(in srgb, var(--clc-error) 10%, transparent);
    --clc-mist-wash-info: color-mix(in srgb, var(--clc-info) 10%, transparent);

    /* 반경 사다리 — 이름이 숫자가 아니라 자리인 이유는 명명 규칙 5항 */
    --clc-mist-radius-chip: 8px;
    --clc-mist-radius-field: 10px;
    --clc-mist-radius-surface: 14px;
    --clc-mist-radius-dialog: 20px;
    --clc-mist-radius-pill: 999px;

    /* 모션 — 시간 둘(state/material)과 곡선 하나, 두 지면 같은 값 */
    --clc-mist-duration-state: 140ms;
    --clc-mist-duration-material: 420ms;
    --clc-mist-ease: ease-out;
    --clc-mist-duration-oneshot: 240ms;
    --clc-mist-ease-oneshot: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* 프리즘 튜닝 — 켜짐 스위치 `--clv-prism-on` 은 값이 아니라 상태라 여기 없다.
       빛은 세 겹이다: 심지(core, 경계에 붙은 얇은 띠) · 꼬리(tail, 멀리까지 옅어지는 두꺼운 띠) ·
       결(glint, 둘레를 흐르는 밝은 자리). width 는 각 띠가 표면 밖으로 나가는 폭, blur 는 녹이는 정도,
       blend 는 빛 겹의 합성(다크 plus-lighter — 겹치면 흰빛 쪽으로 밝아진다),
       ring-floor 는 링의 골(0% = 선이 끊어짐, 100% = 끊기지 않는 한 줄),
       steps 는 한 바퀴의 스텝 수다(회전이 빨라지는 자리에서 함께 낮춘다).
       지면이 갈린 값(라이트 지면 보정)은 아래 지면별 블록에 있다. */
    --clv-prism-core-width: 3px;
    --clv-prism-core-blur: 3px;
    --clv-prism-tail-width: 20px;
    --clv-prism-tail-blur: 30px;
    --clv-prism-glint-bloom: 10px;
    --clv-prism-glint-blur: 9px;
    --clv-prism-glint-drift: 1.9;
    --clv-prism-sheen-strength: 60%;
    --clv-prism-sheen-sweep: 196%;
    --clv-prism-ring-width: 1px;
    --clv-prism-radius: 28px;
    --clv-prism-spin: 34s;
    --clv-prism-steps: 240;

    /* 강조 프리즘 튜닝 — "다음은 여기"(가이드 강조). 켜짐 `--clv-emphasis-prism-on` 과
       각도 `--clv-emphasis-prism-angle` 은 값이 아니라 상태라 여기 없다.
       floor 는 띠 골의 알파 바닥(AI 프리즘 ring-floor 와 같은 개념), arrive 는 도착할 때
       한 번 스치는 길이(반복 없음), radius 는 대상 반경이라 소비처가 덮는다.
       지면이 갈린 값(세기)은 아래 지면별 블록에 있다. */
    --clv-emphasis-prism-spread: 12px;
    --clv-emphasis-prism-blur: 12px;
    --clv-emphasis-prism-saturate: 1.35;
    --clv-emphasis-prism-floor: 45%;
    --clv-emphasis-prism-arrive: 1.4s;
    --clv-emphasis-prism-radius: 12px;

    /* 상태 — 호버는 깊이, 포커스는 빛. 소비처는 조립된 `-shadow` 하나만 읽는다. */
    --clc-mist-focus-bloom: color-mix(in srgb, var(--clc-primary) 26%, transparent);
    --clc-mist-focus-wash: color-mix(in srgb, var(--clc-primary) 9%, var(--clc-material-field-strong));
    --clc-mist-focus-shadow: 0 0 12px 2px var(--clc-mist-focus-bloom);
}

/* 지면별 블록 — `light-dark()` 로 못 접는 값들. 아래 세 블록은 한 벌이다 —
   값을 고치면 셋 다 고쳐야 한다.
   · 워시 세기: <percentage> 라 light-dark() 에 들어가지 못한다. 지면마다 다른
     유일한 눈금이다 — 어두운 지면에서 같은 세기로 읽히려면 더 진하게 섞는다.
   · 그림자: 색만이 아니라 **기하가 다르다**(다크가 더 멀리·더 진하게 깔린다).
     베일 그림자(L3, 한 겹)만은 기하가 같고 알파만 갈린다.
   · 프리즘 지면 보정: 흰 지면은 결을 램프 원색으로 돌리고(흰빛 0) 세기를 올린다 —
     흰빛 섞기는 흰 지면과 같은 방향이라 결 층이 지각 문턱 아래로 내려가기 때문.
   · 강조 프리즘 세기: 라이트는 1 로 끝까지 올린다 — 밝은 딤 위에서는 번짐이 어두운
     쪽으로만 보여, 다크(0.86)보다 세야 두 웅덩이가 바닥에 묻히지 않는다.
   · 고대비 광대의 지면 눈금: 심지 혼합은 액센트를 지면 **반대쪽**으로 미는 비율이라
     라이트에서는 밀 필요가 없고(100%), 광대 두 겹의 알파는 어두운 지면에서 더 세다.
     모드 밖에서는 아무도 읽지 않는다 — 아래 고대비 블록이 읽는 값이다. */
:root {
    --clc-shade-wash: 13%;
    --clc-material-elevation-0: 0 1px 2px rgba(20, 14, 45, 0.08);
    --clc-material-elevation-1: 0 1px 2px rgba(20, 14, 45, 0.05), 0 6px 20px rgba(20, 14, 45, 0.07);
    --clc-material-elevation-2: 0 2px 4px rgba(20, 14, 45, 0.06), 0 14px 36px rgba(20, 14, 45, 0.10);
    --clc-material-veil-shadow: 0 25px 45px 0 rgba(0, 0, 0, 0.17);
    --clc-material-shell-shadow: 0 1px 2px rgba(20, 14, 45, 0.04), 0 8px 28px rgba(20, 14, 45, 0.06);
    --clc-material-field-raised-shadow: 0 4px 14px rgba(20, 14, 45, 0.12), 0 1px 3px rgba(20, 14, 45, 0.08);
    --clv-prism-core-strength: 0.5;
    --clv-prism-core-floor: 16%;
    --clv-prism-tail-strength: 0.2;
    --clv-prism-glint-strength: 0.3;
    --clv-prism-white: 0%;
    --clv-prism-saturate: 1.45;
    --clv-prism-blend: normal;
    --clv-prism-ring-strength: 0.7;
    --clv-prism-ring-floor: 10%;
    --clv-emphasis-prism-strength: 1;
    --clc-mist-focus-ring-core-mix: 100%;
    --clc-mist-focus-ring-band-a1: 22%;
    --clc-mist-focus-ring-band-a2: 8%;
}
[data-mist="light"] {
    --clc-shade-wash: 13%;
    --clc-material-elevation-0: 0 1px 2px rgba(20, 14, 45, 0.08);
    --clc-material-elevation-1: 0 1px 2px rgba(20, 14, 45, 0.05), 0 6px 20px rgba(20, 14, 45, 0.07);
    --clc-material-elevation-2: 0 2px 4px rgba(20, 14, 45, 0.06), 0 14px 36px rgba(20, 14, 45, 0.10);
    --clc-material-veil-shadow: 0 25px 45px 0 rgba(0, 0, 0, 0.17);
    --clc-material-shell-shadow: 0 1px 2px rgba(20, 14, 45, 0.04), 0 8px 28px rgba(20, 14, 45, 0.06);
    --clc-material-field-raised-shadow: 0 4px 14px rgba(20, 14, 45, 0.12), 0 1px 3px rgba(20, 14, 45, 0.08);
    --clv-prism-core-strength: 0.5;
    --clv-prism-core-floor: 16%;
    --clv-prism-tail-strength: 0.2;
    --clv-prism-glint-strength: 0.3;
    --clv-prism-white: 0%;
    --clv-prism-saturate: 1.45;
    --clv-prism-blend: normal;
    --clv-prism-ring-strength: 0.7;
    --clv-prism-ring-floor: 10%;
    --clv-emphasis-prism-strength: 1;
    --clc-mist-focus-ring-core-mix: 100%;
    --clc-mist-focus-ring-band-a1: 22%;
    --clc-mist-focus-ring-band-a2: 8%;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-mist="light"]) {
        --clc-shade-wash: 18%;
        --clc-material-elevation-0: 0 1px 2px rgba(0, 0, 0, 0.40);
        --clc-material-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 22px rgba(0, 0, 0, 0.28);
        --clc-material-elevation-2: 0 2px 4px rgba(0, 0, 0, 0.40), 0 16px 40px rgba(0, 0, 0, 0.35);
        --clc-material-veil-shadow: 0 25px 45px 0 rgba(0, 0, 0, 0.70);
        --clc-material-shell-shadow: 0 1px 2px rgba(0, 0, 0, 0.30), 0 8px 28px rgba(0, 0, 0, 0.25);
        --clc-material-field-raised-shadow: 0 4px 14px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.30);
        --clv-prism-core-strength: 0.63;
        --clv-prism-core-floor: 10%;
        --clv-prism-tail-strength: 0.30;
        --clv-prism-glint-strength: 0.37;
        --clv-prism-white: 30%;
        --clv-prism-saturate: 1.5;
        --clv-prism-blend: plus-lighter;
        --clv-prism-ring-strength: 0.6;
        --clv-prism-ring-floor: 0%;
        --clv-emphasis-prism-strength: 0.86;
        --clc-mist-focus-ring-core-mix: 80%;
        --clc-mist-focus-ring-band-a1: 30%;
        --clc-mist-focus-ring-band-a2: 12%;
    }
}
[data-mist="dark"] {
    --clc-shade-wash: 18%;
    --clc-material-elevation-0: 0 1px 2px rgba(0, 0, 0, 0.40);
    --clc-material-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 22px rgba(0, 0, 0, 0.28);
    --clc-material-elevation-2: 0 2px 4px rgba(0, 0, 0, 0.40), 0 16px 40px rgba(0, 0, 0, 0.35);
    --clc-material-veil-shadow: 0 25px 45px 0 rgba(0, 0, 0, 0.70);
    --clc-material-shell-shadow: 0 1px 2px rgba(0, 0, 0, 0.30), 0 8px 28px rgba(0, 0, 0, 0.25);
    --clc-material-field-raised-shadow: 0 4px 14px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.30);
    --clv-prism-core-strength: 0.63;
    --clv-prism-core-floor: 10%;
    --clv-prism-tail-strength: 0.30;
    --clv-prism-glint-strength: 0.37;
    --clv-prism-white: 30%;
    --clv-prism-saturate: 1.5;
    --clv-prism-blend: plus-lighter;
    --clv-prism-ring-strength: 0.6;
    --clv-prism-ring-floor: 0%;
    --clv-emphasis-prism-strength: 0.86;
    --clc-mist-focus-ring-core-mix: 80%;
    --clc-mist-focus-ring-band-a1: 30%;
    --clc-mist-focus-ring-band-a2: 12%;
}

/* 지면 토글 — `only` 가 시스템 설정을 이긴다 */
[data-mist="light"] { color-scheme: only light; }
[data-mist="dark"] { color-scheme: only dark; }

/* 고대비 모드 — 사용자가 켜는 한 단. 기본 화면은 그대로 두고(포커스는 블룸과 자리 워시),
   대비가 더 필요한 사람이 **모드를 켠다** — WCAG G174 의 "충분한 대비로 전환하는 컨트롤
   제공"이 이 한 단이다.
   스위치는 `html` 의 `data-clevi-contrast` 속성이다 — `high` 켬 · `standard` 끔 ·
   없음/`auto` 는 OS 설정(`prefers-contrast: more`)을 따름. 아래 두 블록은 지면 토글과
   같은 모양의 한 벌이다(명시 토글 + 시스템 설정) — 값을 고치면 둘 다 고쳐야 한다.
   모드가 바꾸는 것은 셋뿐이다: 포커스가 단색 광대로, 파인 자리와 꺼진 선택 컨트롤에
   3:1 경계가, 삼차 잉크가 보조 잉크로. 비활성 잉크는 따라 올리지 않는다.
   광대의 해부 — 틈(rim) 2px 는 **불투명 지면색**이다(반투명이면 심지가 비쳐 안쪽 대비가
   무너진다). 심지(core) 1.25px 가 식별 책임(3:1)을 지고, 광대(band) 두 겹이 그 바깥으로
   번진다. 그림자 심지는 1.25px 이고 outline 형은 1px 인데, Chromium 이 outline 두께를
   CSS px 정수로 **내림**하기 때문이다.
   이 블록이 재정의하는 것은 토큰뿐이다 — 행(메뉴·목록·탭·내비)을 안쪽 outline 으로 옮기는
   요소 규칙은 각 스택이 자기 선택자로 쓴다(`-inset` · `-inset-offset` · `-row-wash` 가 그 값). */
:root[data-clevi-contrast="high"] {
    /* (a) 포커스 = 단색 광대. 소비처는 여전히 조립된 `--clc-mist-focus-shadow` 하나만 읽는다 */
    --clc-mist-focus-ring-core-width: 1.25px;
    --clc-mist-focus-ring-gap: 2px;
    --clc-mist-focus-ring-reach: calc(var(--clc-mist-focus-ring-gap) + var(--clc-mist-focus-ring-core-width));
    --clc-mist-focus-ring-core: color-mix(in srgb, var(--clc-primary) var(--clc-mist-focus-ring-core-mix, 100%), var(--clc-shade-far));
    --clc-mist-focus-ring-rim: var(--clc-shade-ground);
    --clc-mist-focus-ring-band-inner: color-mix(in srgb, var(--clc-primary) var(--clc-mist-focus-ring-band-a1, 22%), transparent);
    --clc-mist-focus-ring-band-outer: color-mix(in srgb, var(--clc-primary) var(--clc-mist-focus-ring-band-a2, 8%), transparent);
    --clc-mist-focus-shadow: 0 0 0 var(--clc-mist-focus-ring-gap) var(--clc-mist-focus-ring-rim), 0 0 0 var(--clc-mist-focus-ring-reach) var(--clc-mist-focus-ring-core), 0 0 5px var(--clc-mist-focus-ring-reach) var(--clc-mist-focus-ring-band-inner), 0 0 18px calc(var(--clc-mist-focus-ring-reach) + 0.5px) var(--clc-mist-focus-ring-band-outer);
    /* (a') outline 형 심지 — 잘리는 컨테이너 안의 행과 인라인 링크가 쓴다 */
    --clc-mist-focus-ring-width: 1px;
    --clc-mist-focus-ring: var(--clc-mist-focus-ring-width) solid var(--clc-mist-focus-ring-core);
    --clc-mist-focus-ring-inset: var(--clc-mist-focus-ring-width) solid var(--clc-mist-ink-primary);
    --clc-mist-focus-ring-inset-offset: -3px;
    --clc-mist-focus-ring-row-wash: var(--clc-mist-wash-primary);
    /* (b) 컨트롤 경계 3:1 — 꺼진 선택 컨트롤과 파인 자리에 두른다 */
    --clc-mist-contrast-boundary: var(--clv-text-secondary);
    /* (c) 삼차 잉크를 보조 잉크로. 비활성은 따라 올리지 않고 모드 전용 값으로 갈아 끼운다 */
    --clv-text-tertiary: var(--clv-text-secondary);
    --clc-mist-disabled-ink: var(--clc-mist-disabled-ink-contrast);
}
@media (prefers-contrast: more) {
    :root:not([data-clevi-contrast="standard"]) {
        /* (a) 포커스 = 단색 광대. 소비처는 여전히 조립된 `--clc-mist-focus-shadow` 하나만 읽는다 */
        --clc-mist-focus-ring-core-width: 1.25px;
        --clc-mist-focus-ring-gap: 2px;
        --clc-mist-focus-ring-reach: calc(var(--clc-mist-focus-ring-gap) + var(--clc-mist-focus-ring-core-width));
        --clc-mist-focus-ring-core: color-mix(in srgb, var(--clc-primary) var(--clc-mist-focus-ring-core-mix, 100%), var(--clc-shade-far));
        --clc-mist-focus-ring-rim: var(--clc-shade-ground);
        --clc-mist-focus-ring-band-inner: color-mix(in srgb, var(--clc-primary) var(--clc-mist-focus-ring-band-a1, 22%), transparent);
        --clc-mist-focus-ring-band-outer: color-mix(in srgb, var(--clc-primary) var(--clc-mist-focus-ring-band-a2, 8%), transparent);
        --clc-mist-focus-shadow: 0 0 0 var(--clc-mist-focus-ring-gap) var(--clc-mist-focus-ring-rim), 0 0 0 var(--clc-mist-focus-ring-reach) var(--clc-mist-focus-ring-core), 0 0 5px var(--clc-mist-focus-ring-reach) var(--clc-mist-focus-ring-band-inner), 0 0 18px calc(var(--clc-mist-focus-ring-reach) + 0.5px) var(--clc-mist-focus-ring-band-outer);
        /* (a') outline 형 심지 — 잘리는 컨테이너 안의 행과 인라인 링크가 쓴다 */
        --clc-mist-focus-ring-width: 1px;
        --clc-mist-focus-ring: var(--clc-mist-focus-ring-width) solid var(--clc-mist-focus-ring-core);
        --clc-mist-focus-ring-inset: var(--clc-mist-focus-ring-width) solid var(--clc-mist-ink-primary);
        --clc-mist-focus-ring-inset-offset: -3px;
        --clc-mist-focus-ring-row-wash: var(--clc-mist-wash-primary);
        /* (b) 컨트롤 경계 3:1 — 꺼진 선택 컨트롤과 파인 자리에 두른다 */
        --clc-mist-contrast-boundary: var(--clv-text-secondary);
        /* (c) 삼차 잉크를 보조 잉크로. 비활성은 따라 올리지 않고 모드 전용 값으로 갈아 끼운다 */
        --clv-text-tertiary: var(--clv-text-secondary);
        --clc-mist-disabled-ink: var(--clc-mist-disabled-ink-contrast);
    }
}