/* ═══ 생성물 — 손으로 고치지 말 것 ═══
   원본: docs/design/tokens/*.json (W3C DTCG) → python3 docs/design/tokens_build.py build  (검사: --check, 문서: docs/design/TOKENS.md)
   구조: §1·§2 프리미티브(:root) → §3 시맨틱 모드 무관(:root) → §4 라이트·§5 다크(body[data-theme]) → §6 레거시 별칭(기존 CSS 이름 — 새 코드는 쓰지 말 것) → §7 타입 유틸
   규칙: 모드에 따라 값이 다른 토큰(과 그것을 참조하는 토큰)은 :root 가 아니라 body[data-theme] 두 블록에만 둔다 — 커스텀 프로퍼티는 선언한 요소에서
         var() 가 치환되므로 :root 에 두면 html 의 값(미정의)으로 굳는다. 리셋·body·스크롤바 규칙은 base.css */


/* §1 프리미티브 — 색 (화면은 직접 쓰지 않는다) */
:root {
  /* ── color: 프리미티브 색 — 순수 값만. 화면 CSS 는 이 이름을 직접 쓰지 않고 semantic 층(bg·text·border…)을 거친다. innored.source 가 붙은 단계는 기존 팔레트·CSS 리터럴을 그대로 앵커한 값(화면 변화 0 의 근거) ── */
  --color-white: #ffffff;
  --color-black: #000000;
  /* ── color.gray: midday(라이트) 중립 — 색상 약 210° 의 차가운 회색. 150·350·450 반 단계는 기존 씬 재질·리터럴을 정확히 보존하기 위한 것 ── */
  --color-gray-50: #f7f9fb;
  --color-gray-100: #f2f5f8;
  --color-gray-150: #eef1f4;
  --color-gray-200: #e6eaee;
  --color-gray-300: #dde3e9;
  --color-gray-350: #d5dbe2;
  --color-gray-400: #c5cbd3;
  --color-gray-450: #a7acb4;
  --color-gray-500: #838b94;
  --color-gray-600: #686f77;
  --color-gray-700: #4d535a;
  --color-gray-800: #33383e;
  --color-gray-900: #1d2126;
  /* ── color.night: evening(다크) 중립 — 남색 바탕(800~950)과 크림 잉크(50). 다크 팔레트는 회색이 아니라 밤 조명(시간대별 라이팅, WORKSPACE §9)이라 별도 램프 ── */
  --color-night-50: #f0ece4;
  --color-night-100: #e5dfd2;
  --color-night-200: #d2ccc0;
  --color-night-300: #b9b6c2;
  --color-night-400: #a8a5b2;
  --color-night-500: #807e8d;
  --color-night-600: #5b5c6c;
  --color-night-700: #3a3d4e;
  --color-night-750: #2e3140;
  --color-night-800: #2b2d3a;
  --color-night-850: #23252f;
  --color-night-900: #191b26;
  --color-night-950: #0e0f16;
  /* ── color.primary: innored 대표색 — 500 = #f91120. 보드의 유일한 포인트 컬러(WORKSPACE §9 "절제된 포인트 컬러 1개") ── */
  --color-primary-50: #fff4f4;
  --color-primary-100: #ffe6e7;
  --color-primary-200: #ffcccf;
  --color-primary-300: #ff96a0;
  --color-primary-400: #ff5a68;
  --color-primary-500: #f91120;
  --color-primary-600: #d40d19;
  --color-primary-700: #b10913;
  --color-primary-800: #8e050d;
  --color-primary-900: #6e0308;
  /* ── color.secondary: 보조 브랜드 청록 — 딜리노 맵·좌석 위젯 판 틴트. 포인트 컬러가 아니라 카드 틴트 부류(WIDGETS §4 색) ── */
  --color-secondary-50: #eefaf7;
  --color-secondary-100: #daf3ee;
  --color-secondary-200: #b4e7de;
  --color-secondary-300: #6fd3c4;
  --color-secondary-400: #51b9aa;
  --color-secondary-500: #2f9e8f;
  --color-secondary-600: #258275;
  --color-secondary-700: #1d6b61;
  --color-secondary-800: #15564d;
  --color-secondary-900: #0e413a;
  /* ── color.error: 오류·사용 중(busy). primary 와 같은 빨강 계열이라 50~200 이 거의 겹친다 — 의미로만 구분한다 ── */
  --color-error-50: #fff4f4;
  --color-error-100: #ffe6e6;
  --color-error-200: #ffcccd;
  --color-error-300: #fea7aa;
  --color-error-400: #ff6b78;
  --color-error-500: #e42939;
  --color-error-600: #d22030;
  --color-error-700: #ac1826;
  --color-error-800: #8b111c;
  --color-error-900: #6b0b13;
  /* ── color.warning: 경고·별점·포스트잇 노랑 ── */
  --color-warning-50: #fff6e0;
  --color-warning-100: #ffebb9;
  --color-warning-200: #ffd76a;
  --color-warning-300: #ffc94a;
  --color-warning-400: #ffbf2f;
  --color-warning-500: #f5b301;
  --color-warning-600: #cf9103;
  --color-warning-700: #ab730a;
  --color-warning-800: #8a5a10;
  --color-warning-900: #4a3c08;
  /* ── color.success: 성공·사용 가능(free) ── */
  --color-success-50: #effaf2;
  --color-success-100: #dcf4e2;
  --color-success-200: #b7e9c6;
  --color-success-300: #5fd08a;
  --color-success-400: #4dbf72;
  --color-success-500: #34a853;
  --color-success-600: #22913f;
  --color-success-700: #1b7f3b;
  --color-success-800: #105928;
  --color-success-900: #0a441c;
  /* ── color.info: 정보·링크 파랑 (요청서의 "primary blue" 예시는 보드 규칙상 포인트가 아니라 이 램프로 흡수) ── */
  --color-info-50: #f3f8ff;
  --color-info-100: #e8f3ff;
  --color-info-200: #c4ddff;
  --color-info-300: #8ab4f8;
  --color-info-400: #6ba5fe;
  --color-info-500: #3182f6;
  --color-info-600: #1b64da;
  --color-info-700: #1656be;
  --color-info-800: #104499;
  --color-info-900: #093377;
  /* ── color.glass: 유리 판 바탕 — 불투명 원색만. 알파(0.74/0.80)는 semantic surface.glass 에서 곱한다 ── */
  --color-glass-panel-light: #fcfdff;
  --color-glass-panel-dark: #1e202d;
  /* ── color.shadow: 그림자 원색 — 알파는 semantic shadow.color 에서 ── */
  --color-shadow-umbra: #3c5064;   /* 라이트 그림자(청회색) — 검정이 아니라 하늘색이 섞인 그늘 */
  /* ── color.scene: 사무실 씬 재질 중 램프에 못 넣는 값(이웃 단계와 1~2 차이) — 정확값 보존 ── */
  --color-scene-wall-light: #dde3ea;
  --color-scene-wall-dark: #1e202b;
  --color-scene-floor-line-dark: #2d303c;
  /* ── color.tint: 카드 틴트 원색 — .w-body 에 7% (WIDGETS §4). sched 는 accent, seat 는 secondary 라 여기 없음 ── */
  --color-tint-rooms: #4a90d9;
  --color-tint-todo: #c9a13f;
  --color-tint-perk: #d97b4a;
  --color-tint-lunch: #7aa84f;
  --color-tint-leave: #8b7fc2;
  --color-tint-leave-night: #b8afe6;
}

/* §2 프리미티브 — 간격·라운드·선·브레이크포인트(참고값)·타입·모션 */
:root {
  /* ── space: 간격 — 요청 스케일(0~120) + 보드 확장(6·10·14·28). 보드는 2px 스케일을 써서 6·10·14 가 가장 잦다(padding 8 ×51·12 ×47·10 ×44·6 ×37·14 ×37) ── */
  --space-0: 0px;
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;   /* 보드 확장 — 요청 스케일 밖, 기존 CSS 에서 잦은 값 */
  --space-8: 8px;
  --space-10: 10px;   /* 보드 확장 — 요청 스케일 밖, 기존 CSS 에서 잦은 값 */
  --space-12: 12px;
  --space-14: 14px;   /* 보드 확장 — 요청 스케일 밖, 기존 CSS 에서 잦은 값 */
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;   /* 보드 확장 — 요청 스케일 밖, 기존 CSS 에서 잦은 값 */
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;
  --space-120: 120px;
  /* ── radius: 라운드 — 요청 스케일 + 보드 확장(6·10·14·18·26). 알약은 full(9999) — 기존 CSS 의 999px 와 렌더 동일. 위젯 카드 26·독 24·입력·칩 12·팝오버 14·헤더 칩 18 ── */
  --radius-0: 0px;
  --radius-2: 2px;
  --radius-4: 4px;
  --radius-6: 6px;   /* 보드 확장 — 요청 스케일 밖, 기존 CSS 에서 잦은 값 */
  --radius-8: 8px;
  --radius-10: 10px;   /* 보드 확장 — 요청 스케일 밖, 기존 CSS 에서 잦은 값 */
  --radius-12: 12px;
  --radius-14: 14px;   /* 보드 확장 — 요청 스케일 밖, 기존 CSS 에서 잦은 값 */
  --radius-16: 16px;
  --radius-18: 18px;   /* 보드 확장 — 요청 스케일 밖, 기존 CSS 에서 잦은 값 */
  --radius-24: 24px;
  --radius-26: 26px;   /* 보드 확장 — 요청 스케일 밖, 기존 CSS 에서 잦은 값 */
  --radius-full: 9999px;   /* 완전 둥근 알약 — 기존 999px 와 같은 렌더 */
  /* ── border-width: 선 굵기 — 헤어라인 1(테두리 ×71) · 1.5(강조 테두리·점선) · 2(포커스 링) ── */
  --border-width-hairline: 1px;
  --border-width-medium: 1.5px;
  --border-width-bold: 2px;
  /* ── breakpoint: 브레이크포인트 — CSS 변수는 @media 안에서 못 쓰므로 JS·문서용 참고값. 보드가 실제 쓰는 경계는 board.* (responsive.css, max-width 기준) ── */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
  /* ── breakpoint.board: 보드 실제 경계(desktop-first max-width) ── */
  --breakpoint-board-narrow: 400px;   /* 아주 좁은 폰 */
  --breakpoint-board-phone: var(--breakpoint-sm);   /* 폰 ≤640 / PC ≥641 — 헤더 접힘·폰 보드 구성 */
  --breakpoint-board-tablet: 900px;   /* 태블릿 */
  --breakpoint-board-collapse: 1080px;   /* 보드 2열→1열·사무실 씬 축소 */
  --font-family-sans: "Google Sans", "Noto Sans KR", -apple-system, sans-serif;   /* 영문·숫자 Google Sans, 한글 Noto Sans KR(글리프 단위 폴백) — 셀프호스팅(assets/fonts). 시스템 키워드를 앞에 두면 기기마다 얼굴이 갈라진다(WORKSPACE §9). mono 는 폰트가 아니라 .mono(tabular-nums) */
  /* ── font.size: 당근 SEED 타입 그리드 t1~t11 — 유일한 크기 공급원, 그리드 밖 px 금지(특례는 시계 모드 80~160·인트로 인사 44~80 둘뿐) ── */
  --font-size-t1: 11px;
  --font-size-t2: 12px;
  --font-size-t3: 13px;
  --font-size-t4: 14px;
  --font-size-t5: 16px;
  --font-size-t6: 18px;
  --font-size-t7: 20px;
  --font-size-t8: 22px;
  --font-size-t9: 24px;
  --font-size-t10: 26px;
  --font-size-t11: 28px;
  /* ── font.line-height: SEED 행간 — size 와 짝(t1 15 … t11 38). 버튼·입력의 line-height 19/17px 고정은 폰트 메트릭 보정이라 토큰이 아님 ── */
  --line-height-t1: 15px;
  --line-height-t2: 16px;
  --line-height-t3: 18px;
  --line-height-t4: 19px;
  --line-height-t5: 22px;
  --line-height-t6: 24px;
  --line-height-t7: 27px;
  --line-height-t8: 30px;
  --line-height-t9: 32px;
  --line-height-t10: 35px;
  --line-height-t11: 38px;
  /* ── font.weight: SEED 는 bold 700 이지만 글라스 UI 라 600 으로 감량(의도). display 700 은 인트로 인사 한 곳만 ── */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 600;   /* 서브헤드·헤딩·타이틀·b/strong */
  --font-weight-display: 700;   /* 인트로 인사 전용 특례 */
  /* ── font.letter-spacing: 자간 — 18px↑ tight, 13~16px snug, 11px 대문자 섹션 라벨 caps. hero 는 인트로 인사(.ihello) 전용 ── */
  --letter-spacing-hero: -0.045em;
  --letter-spacing-tighter: -0.03em;
  --letter-spacing-tight: -0.02em;
  --letter-spacing-snug: -0.01em;
  --letter-spacing-normal: 0em;
  --letter-spacing-wide: 0.02em;
  --letter-spacing-wider: 0.04em;
  --letter-spacing-caps: 0.08em;
  --letter-spacing-caps-wide: 0.12em;   /* 8px 도면 캡션 */
  /* ── motion.duration: 속도는 두 단뿐(WORKSPACE §9) — 새 호버에 0.15~0.2s 선형을 쓰지 말 것 ── */
  --duration-hover: 0.32s;   /* 마이크로 인터랙션(호버·포커스) 공통 */
  --duration-theme: 0.6s;   /* 팔레트·테마 전환 — 화면 전체가 한 덩어리로 */
  --easing-standard: cubic-bezier(0.22, 1, 0.36, 1);   /* 부드러운 ease — 모든 전환 공통 곡선 */
}

/* §3 시맨틱 — 모드 무관(포커스 굵기·타입 역할·그림자 기하) */
:root {
  /* ── state: 상호작용 상태 중 색이 아닌 값(모드 무관). 색은 color.light/dark.json 의 state.* ── */
  --state-focus-ring-width: var(--border-width-bold);   /* outline 굵기 */
  --state-focus-ring-offset: var(--space-2);   /* 기본 outline-offset(밀집 행 1px·풀블리드 -1/-2px·CTA 3px 는 자리별 예외) */
  --state-disabled-opacity: 0.4;   /* 비활성 컨트롤 전체 불투명도 */
  /* ── type: 타이포 역할 — 각 속성은 프리미티브 참조. WORKSPACE §9 역할 매핑(캡션 t1 / 풋노트 t2 / 본문 t3 / 서브헤드 t4 Bold / 헤딩 t5 Bold / 타이틀 t7 Bold / 인사말 clamp(t8~t11) Bold). CSS 는 --type-{역할}-{family,size,line,weight,tracking} 다섯 변수와 .type-{역할} 유틸 ── */
  --type-display-large-family: var(--font-family-sans);   /* 인사말 상한(clamp(t8, 3vw, t11)) */
  --type-display-large-size: var(--font-size-t11);
  --type-display-large-line: var(--line-height-t11);
  --type-display-large-weight: var(--font-weight-bold);
  --type-display-large-tracking: var(--letter-spacing-tighter);
  --type-display-medium-family: var(--font-family-sans);   /* 큰 숫자·히어로 보조 */
  --type-display-medium-size: var(--font-size-t9);
  --type-display-medium-line: var(--line-height-t9);
  --type-display-medium-weight: var(--font-weight-bold);
  --type-display-medium-tracking: var(--letter-spacing-tight);
  --type-heading-1-family: var(--font-family-sans);   /* 타이틀 — 위젯 큰 숫자·앱 타일 이름 */
  --type-heading-1-size: var(--font-size-t7);
  --type-heading-1-line: var(--line-height-t7);
  --type-heading-1-weight: var(--font-weight-bold);
  --type-heading-1-tracking: var(--letter-spacing-tight);
  --type-heading-2-family: var(--font-family-sans);   /* 헤딩 — 헤더 워드마크 */
  --type-heading-2-size: var(--font-size-t5);
  --type-heading-2-line: var(--line-height-t5);
  --type-heading-2-weight: var(--font-weight-bold);
  --type-heading-2-tracking: var(--letter-spacing-snug);
  --type-heading-3-family: var(--font-family-sans);   /* 서브헤드 — 위젯 카드 제목 */
  --type-heading-3-size: var(--font-size-t4);
  --type-heading-3-line: var(--line-height-t4);
  --type-heading-3-weight: var(--font-weight-bold);
  --type-heading-3-tracking: var(--letter-spacing-snug);
  --type-heading-4-family: var(--font-family-sans);   /* 작은 서브헤드 */
  --type-heading-4-size: var(--font-size-t3);
  --type-heading-4-line: var(--line-height-t3);
  --type-heading-4-weight: var(--font-weight-bold);
  --type-heading-4-tracking: var(--letter-spacing-snug);
  --type-body-large-family: var(--font-family-sans);   /* 큰 본문 */
  --type-body-large-size: var(--font-size-t4);
  --type-body-large-line: var(--line-height-t4);
  --type-body-large-weight: var(--font-weight-regular);
  --type-body-large-tracking: var(--letter-spacing-snug);
  --type-body-medium-family: var(--font-family-sans);   /* 본문 */
  --type-body-medium-size: var(--font-size-t3);
  --type-body-medium-line: var(--line-height-t3);
  --type-body-medium-weight: var(--font-weight-regular);
  --type-body-medium-tracking: var(--letter-spacing-snug);
  --type-body-small-family: var(--font-family-sans);   /* 풋노트·빈 상태 문구 */
  --type-body-small-size: var(--font-size-t2);
  --type-body-small-line: var(--line-height-t2);
  --type-body-small-weight: var(--font-weight-regular);
  --type-body-small-tracking: var(--letter-spacing-normal);
  --type-caption-family: var(--font-family-sans);   /* 캡션 */
  --type-caption-size: var(--font-size-t1);
  --type-caption-line: var(--line-height-t1);
  --type-caption-weight: var(--font-weight-regular);
  --type-caption-tracking: var(--letter-spacing-normal);
  --type-overline-family: var(--font-family-sans);   /* 섹션 라벨 — 대문자 + 0.08em */
  --type-overline-size: var(--font-size-t1);
  --type-overline-line: var(--line-height-t1);
  --type-overline-weight: var(--font-weight-medium);
  --type-overline-tracking: var(--letter-spacing-caps);
  /* ── shadow: 엘리베이션 — 전부 shadow.color(모드별) 를 쓰고 offsetX 는 0. CSS 는 --shadow-{레벨}-{y,blur,spread,color} + 합성 --shadow-{레벨}. 음수 spread 로 그림자를 요소 밑으로 모으는 것이 보드의 문법 ── */
  --shadow-sm-y: 6px;
  --shadow-sm-blur: 16px;
  --shadow-sm-spread: -8px;
  --shadow-md-y: 10px;
  --shadow-md-blur: 24px;
  --shadow-md-spread: -14px;
  --shadow-lg-y: 24px;
  --shadow-lg-blur: 60px;
  --shadow-lg-spread: -20px;
  --shadow-xl-y: 30px;
  --shadow-xl-blur: 70px;
  --shadow-xl-spread: -20px;
  --shadow-card-ambient-y: 30px;
  --shadow-card-ambient-blur: 70px;
  --shadow-card-ambient-spread: -42px;
  --shadow-card-key-y: 4px;
  --shadow-card-key-blur: 14px;
  --shadow-card-key-spread: -10px;
}

/* §4 시맨틱 — 라이트(midday) */
body[data-theme="midday"] {
  /* ── accent: 포인트 — 보드는 primary 하나만 쓴다(§9). secondary 는 보조 브랜드 자리 ── */
  --accent-primary: var(--color-primary-500);   /* 내 회의 램프·진행 중 일정·편집 완료 칩·포커스 링 — 옛 --accent */
  --accent-secondary: var(--color-secondary-500);   /* 보조 브랜드(청록) — 보드에선 tint.seat 로만 소비 */
  --accent-on-accent: var(--color-white);   /* 포인트 판 위 글자 */
  --accent-perk-button: var(--color-gray-800);   /* 지각데이 사용하기 알약 — 그라데이션 윗색. 라이트는 잉크 알약(시안 A안 색 후보 3번 잉크, 발주자 26.09.30) */
  --accent-perk-button-deep: var(--color-gray-900);   /* 같은 알약 아랫색·글로우 */
  --accent-perk-button-text: var(--color-white);   /* 같은 알약 글자 */
  /* ── bg: 바탕 — 불투명 면 ── */
  --bg-primary: var(--color-gray-300);   /* body 바탕(옛 --sky-b) — 그 위에 오로라·유리가 얹힌다 */
  --bg-secondary: var(--color-gray-150);   /* 그라디언트 윗부분·PWA theme-color(옛 --sky-a) */
  --bg-tertiary: var(--color-gray-50);   /* 가장 밝은 불투명 면(옛 --roof) */
  --bg-inverse: var(--color-gray-900);   /* 잉크 반전 판 — 토스트·툴팁·잉크 버튼 */
  /* ── surface: 반투명 면 ── */
  --surface-glass: rgba(252, 253, 255, 0.74);   /* {color.glass.panel-light} × 0.74 — 유리 판 바탕(옛 --panel) — 카드는 다시 55%, 독 32%, 사용자화 알약 38% 로 섞는다(WIDGETS §4) */
  --surface-postit: var(--color-warning-200);   /* 메모 카드 종이(옛 --postit) — 두 모드 같음 */
  --text-primary: var(--color-gray-900);   /* 본문 잉크(옛 --ink) — 알파 사다리의 기준색 */
  --text-secondary: var(--color-gray-500);   /* 보조 글자(옛 --ink-soft) */
  --text-tertiary: rgba(29, 33, 38, 0.45);   /* {text.primary} × 0.45 — 지난 날짜·비활성 정보 */
  --text-disabled: rgba(29, 33, 38, 0.3);   /* {text.primary} × 0.3 — 비활성 컨트롤 글자 */
  --text-inverse: var(--color-gray-150);   /* bg.inverse 위 글자 */
  --icon-primary: var(--text-primary);
  --icon-secondary: var(--text-secondary);
  --icon-disabled: var(--text-disabled);
  /* ── border: 테두리 — 잉크 알파(기존 color-mix 사다리 6/10/30%) ── */
  --border-subtle: rgba(29, 33, 38, 0.06);   /* {text.primary} × 0.06 — 유리 판 헤어라인(.w::before) */
  --border-default: rgba(29, 33, 38, 0.1);   /* {text.primary} × 0.1 — 입력·칩 기본 테두리 */
  --border-strong: rgba(29, 33, 38, 0.3);   /* {text.primary} × 0.3 — 호버 테두리·점선 드롭 영역 */
  --border-focus: var(--accent-primary);   /* 포커스 테두리 */
  /* ── state: 상호작용 상태 — 오버레이 색. 굵기·오프셋·불투명도는 semantic/state.json ── */
  --state-hover: rgba(29, 33, 38, 0.08);   /* {text.primary} × 0.08 — 호버 오버레이(기존 :hover 배경 ink 8% ×11) */
  --state-active: rgba(29, 33, 38, 0.12);   /* {text.primary} × 0.12 — 눌림 오버레이 */
  --state-focus-ring: var(--accent-primary);   /* 포커스 링 — outline: 2px solid (약 60개 규칙 공통) */
  --state-focus-ring-soft: rgba(249, 17, 32, 0.12);   /* {accent.primary} × 0.12 — 넓은 입력의 포커스 후광(box-shadow 0 0 0 3px) */
  --state-disabled: var(--text-disabled);   /* 비활성 글자·아이콘 */
  /* ── glass: 리퀴드 글래스 림·광택 — 다크에서 감량 ── */
  --glass-rim: rgba(255, 255, 255, 0.85);   /* {color.white} × 0.85 — 윗모서리 림 라이트(--glass-rim, 기존 이름 그대로) */
  --glass-rim-side: rgba(255, 255, 255, 0.4675);   /* {glass.rim} × 0.55 — 왼쪽 림(rim 의 55%) */
  --glass-sheen: rgba(255, 255, 255, 0.32);   /* {color.white} × 0.32 — 사선 광택(--glass-sheen, 기존 이름 그대로) */
  --glass-edge: rgba(29, 33, 38, 0.05);   /* {text.primary} × 0.05 — 판 아래 모서리 그늘(inset 0 -1px) */
  /* ── scene: 사무실 3D 씬 재질(옛 --floor/--floor-line/--roof/--wall/--desk) ── */
  --scene-floor: var(--color-gray-200);
  --scene-floor-line: var(--color-gray-350);
  --scene-roof: var(--color-gray-50);
  --scene-wall: var(--color-scene-wall-light);
  --scene-desk: var(--color-gray-100);
  /* ── status: 의미색 — 포인트(accent)와 별개 ── */
  --status-success: var(--color-success-500);   /* 회의실 "사용 가능" 램프(옛 --ok) — 다크에서도 같은 값(발주자 지시) */
  --status-success-strong: var(--color-success-700);   /* 도면 빈자리 글자 */
  --status-error: var(--color-error-500);   /* 도면 사용 중 */
  --status-warning: var(--color-warning-500);   /* 별점 */
  --status-info: var(--color-info-600);   /* 링크·새 좌석 배지 */
  /* ── tint: 카드 틴트(.w-body 7%, 좌석 위젯 판 10%) ── */
  --tint-rooms: var(--color-tint-rooms);
  --tint-sched: var(--accent-primary);   /* 일정 카드 — 라이트는 포인트 그대로, 다크는 연하게 */
  --tint-todo: var(--color-tint-todo);
  --tint-perk: var(--color-tint-perk);
  --tint-lunch: var(--color-tint-lunch);
  --tint-seat: var(--accent-secondary);   /* 딜리노 맵·좌석 위젯 판 */
  --tint-leave: var(--color-tint-leave);   /* 휴가 카드(26.09.29) — 라벤더, 다크는 연한 단계 */
  --shadow-color: rgba(60, 80, 100, 0.22);   /* {color.shadow.umbra} × 0.22 — 바깥 그림자 색(옛 --shadow) — 모든 엘리베이션이 이 색을 쓴다 */
  /* ── shadow: 엘리베이션 — 전부 shadow.color(모드별) 를 쓰고 offsetX 는 0. CSS 는 --shadow-{레벨}-{y,blur,spread,color} + 합성 --shadow-{레벨}. 음수 spread 로 그림자를 요소 밑으로 모으는 것이 보드의 문법 ── */
  --shadow-sm-color: var(--shadow-color);
  --shadow-sm: 0 var(--shadow-sm-y) var(--shadow-sm-blur) var(--shadow-sm-spread) var(--shadow-sm-color);   /* 툴팁(.ws-tip) */
  --shadow-md-color: var(--shadow-color);
  --shadow-md: 0 var(--shadow-md-y) var(--shadow-md-blur) var(--shadow-md-spread) var(--shadow-md-color);   /* 카드 안 팝·좌석 인물 카드 */
  --shadow-lg-color: var(--shadow-color);
  --shadow-lg: 0 var(--shadow-lg-y) var(--shadow-lg-blur) var(--shadow-lg-spread) var(--shadow-lg-color);   /* 팝오버·사람 찾기 목록 */
  --shadow-xl-color: var(--shadow-color);
  --shadow-xl: 0 var(--shadow-xl-y) var(--shadow-xl-blur) var(--shadow-xl-spread) var(--shadow-xl-color);   /* 모달(.dlg) */
  --shadow-card-ambient-color: var(--shadow-color);
  --shadow-card-key-color: var(--shadow-color);
  --shadow-card: 0 var(--shadow-card-ambient-y) var(--shadow-card-ambient-blur) var(--shadow-card-ambient-spread) var(--shadow-card-ambient-color), 0 var(--shadow-card-key-y) var(--shadow-card-key-blur) var(--shadow-card-key-spread) var(--shadow-card-key-color);   /* 유리 카드·독·좌석 위젯 바깥 그림자(board.css .w / .wdg-dock) — 멀리 퍼지는 ambient + 바로 밑 key 두 겹 */
  --glass-inset: inset 0 1px 0 0 var(--glass-rim), inset 1px 0 0 0 var(--glass-rim-side), inset 0 -1px 0 0 var(--glass-edge);   /* 유리 판 inset 림(윗모서리 림 라이트·왼쪽 림·아래 그늘) — ::before 판의 box-shadow(WIDGETS §4 유리 판 규칙). 합성 변수만 낸다 */
}

/* §5 시맨틱 — 다크(evening) */
body[data-theme="evening"] {
  /* ── accent: 포인트 — 보드는 primary 하나만 쓴다(§9). secondary 는 보조 브랜드 자리 ── */
  --accent-primary: var(--color-primary-500);   /* 내 회의 램프·진행 중 일정·편집 완료 칩·포커스 링 — 옛 --accent */
  --accent-secondary: var(--color-secondary-500);   /* 보조 브랜드(청록) — 보드에선 tint.seat 로만 소비 */
  --accent-on-accent: var(--color-white);   /* 포인트 판 위 글자 */
  --accent-perk-button: var(--color-white);   /* 지각데이 사용하기 알약 — 그라데이션 윗색. 다크(evening)는 흰색 계열 알약에 잉크 글자 — 검은 카드 위 흰 버튼(발주자 26.09.30 다크는 흰색 계열로) */
  --accent-perk-button-deep: var(--color-gray-150);   /* 같은 알약 아랫색·글로우 */
  --accent-perk-button-text: var(--color-gray-900);   /* 같은 알약 글자 */
  /* ── bg: 바탕 — 불투명 면 ── */
  --bg-primary: var(--color-night-950);   /* body 바탕(옛 --sky-b) — 그 위에 오로라·유리가 얹힌다 */
  --bg-secondary: var(--color-night-900);   /* 그라디언트 윗부분·PWA theme-color(옛 --sky-a) */
  --bg-tertiary: var(--color-night-800);   /* 가장 밝은 불투명 면(옛 --roof) */
  --bg-inverse: var(--color-night-50);   /* 잉크 반전 판 — 토스트·툴팁·잉크 버튼 */
  /* ── surface: 반투명 면 ── */
  --surface-glass: rgba(30, 32, 45, 0.8);   /* {color.glass.panel-dark} × 0.8 — 유리 판 바탕(옛 --panel) — 카드는 다시 55%, 독 32%, 사용자화 알약 38% 로 섞는다(WIDGETS §4) */
  --surface-postit: var(--color-warning-200);   /* 메모 카드 종이(옛 --postit) — 두 모드 같음 */
  --text-primary: var(--color-night-50);   /* 본문 잉크(옛 --ink) — 알파 사다리의 기준색 */
  --text-secondary: var(--color-night-400);   /* 보조 글자(옛 --ink-soft) */
  --text-tertiary: rgba(240, 236, 228, 0.45);   /* {text.primary} × 0.45 — 지난 날짜·비활성 정보 */
  --text-disabled: rgba(240, 236, 228, 0.3);   /* {text.primary} × 0.3 — 비활성 컨트롤 글자 */
  --text-inverse: var(--color-night-900);   /* bg.inverse 위 글자 */
  --icon-primary: var(--text-primary);
  --icon-secondary: var(--text-secondary);
  --icon-disabled: var(--text-disabled);
  /* ── border: 테두리 — 잉크 알파(기존 color-mix 사다리 6/10/30%) ── */
  --border-subtle: rgba(240, 236, 228, 0.06);   /* {text.primary} × 0.06 — 유리 판 헤어라인(.w::before) */
  --border-default: rgba(240, 236, 228, 0.1);   /* {text.primary} × 0.1 — 입력·칩 기본 테두리 */
  --border-strong: rgba(240, 236, 228, 0.3);   /* {text.primary} × 0.3 — 호버 테두리·점선 드롭 영역 */
  --border-focus: var(--accent-primary);   /* 포커스 테두리 */
  /* ── state: 상호작용 상태 — 오버레이 색. 굵기·오프셋·불투명도는 semantic/state.json ── */
  --state-hover: rgba(240, 236, 228, 0.08);   /* {text.primary} × 0.08 — 호버 오버레이(기존 :hover 배경 ink 8% ×11) */
  --state-active: rgba(240, 236, 228, 0.12);   /* {text.primary} × 0.12 — 눌림 오버레이 */
  --state-focus-ring: var(--accent-primary);   /* 포커스 링 — outline: 2px solid (약 60개 규칙 공통) */
  --state-focus-ring-soft: rgba(249, 17, 32, 0.12);   /* {accent.primary} × 0.12 — 넓은 입력의 포커스 후광(box-shadow 0 0 0 3px) */
  --state-disabled: var(--text-disabled);   /* 비활성 글자·아이콘 */
  /* ── glass: 리퀴드 글래스 림·광택 — 다크에서 감량 ── */
  --glass-rim: rgba(255, 255, 255, 0.14);   /* {color.white} × 0.14 — 윗모서리 림 라이트(--glass-rim, 기존 이름 그대로) */
  --glass-rim-side: rgba(255, 255, 255, 0.077);   /* {glass.rim} × 0.55 — 왼쪽 림(rim 의 55%) */
  --glass-sheen: rgba(255, 255, 255, 0.05);   /* {color.white} × 0.05 — 사선 광택(--glass-sheen, 기존 이름 그대로) */
  --glass-edge: rgba(240, 236, 228, 0.05);   /* {text.primary} × 0.05 — 판 아래 모서리 그늘(inset 0 -1px) */
  /* ── scene: 사무실 3D 씬 재질(옛 --floor/--floor-line/--roof/--wall/--desk) ── */
  --scene-floor: var(--color-night-850);
  --scene-floor-line: var(--color-scene-floor-line-dark);
  --scene-roof: var(--color-night-800);
  --scene-wall: var(--color-scene-wall-dark);
  --scene-desk: var(--color-night-750);
  /* ── status: 의미색 — 포인트(accent)와 별개 ── */
  --status-success: var(--color-success-500);   /* 회의실 "사용 가능" 램프(옛 --ok) — 다크에서도 같은 값(발주자 지시) */
  --status-success-strong: var(--color-success-300);   /* 도면 빈자리 글자 */
  --status-error: var(--color-error-400);   /* 도면 사용 중 */
  --status-warning: var(--color-warning-300);   /* 별점 */
  --status-info: var(--color-info-300);   /* 링크·새 좌석 배지 */
  /* ── tint: 카드 틴트(.w-body 7%, 좌석 위젯 판 10%) ── */
  --tint-rooms: var(--color-tint-rooms);
  --tint-sched: var(--color-primary-300);   /* 일정 카드 — 라이트는 포인트 그대로, 다크는 연하게 */
  --tint-todo: var(--color-tint-todo);
  --tint-perk: var(--color-tint-perk);
  --tint-lunch: var(--color-tint-lunch);
  --tint-seat: var(--color-secondary-300);   /* 딜리노 맵·좌석 위젯 판 */
  --tint-leave: var(--color-tint-leave-night);   /* 휴가 카드(26.09.29) — 라벤더, 다크는 연한 단계 */
  --shadow-color: rgba(0, 0, 0, 0.5);   /* {color.black} × 0.5 — 바깥 그림자 색(옛 --shadow) — 모든 엘리베이션이 이 색을 쓴다 */
  /* ── shadow: 엘리베이션 — 전부 shadow.color(모드별) 를 쓰고 offsetX 는 0. CSS 는 --shadow-{레벨}-{y,blur,spread,color} + 합성 --shadow-{레벨}. 음수 spread 로 그림자를 요소 밑으로 모으는 것이 보드의 문법 ── */
  --shadow-sm-color: var(--shadow-color);
  --shadow-sm: 0 var(--shadow-sm-y) var(--shadow-sm-blur) var(--shadow-sm-spread) var(--shadow-sm-color);   /* 툴팁(.ws-tip) */
  --shadow-md-color: var(--shadow-color);
  --shadow-md: 0 var(--shadow-md-y) var(--shadow-md-blur) var(--shadow-md-spread) var(--shadow-md-color);   /* 카드 안 팝·좌석 인물 카드 */
  --shadow-lg-color: var(--shadow-color);
  --shadow-lg: 0 var(--shadow-lg-y) var(--shadow-lg-blur) var(--shadow-lg-spread) var(--shadow-lg-color);   /* 팝오버·사람 찾기 목록 */
  --shadow-xl-color: var(--shadow-color);
  --shadow-xl: 0 var(--shadow-xl-y) var(--shadow-xl-blur) var(--shadow-xl-spread) var(--shadow-xl-color);   /* 모달(.dlg) */
  --shadow-card-ambient-color: var(--shadow-color);
  --shadow-card-key-color: var(--shadow-color);
  --shadow-card: 0 var(--shadow-card-ambient-y) var(--shadow-card-ambient-blur) var(--shadow-card-ambient-spread) var(--shadow-card-ambient-color), 0 var(--shadow-card-key-y) var(--shadow-card-key-blur) var(--shadow-card-key-spread) var(--shadow-card-key-color);   /* 유리 카드·독·좌석 위젯 바깥 그림자(board.css .w / .wdg-dock) — 멀리 퍼지는 ambient + 바로 밑 key 두 겹 */
  --glass-inset: inset 0 1px 0 0 var(--glass-rim), inset 1px 0 0 0 var(--glass-rim-side), inset 0 -1px 0 0 var(--glass-edge);   /* 유리 판 inset 림(윗모서리 림 라이트·왼쪽 림·아래 그늘) — ::before 판의 box-shadow(WIDGETS §4 유리 판 규칙). 합성 변수만 낸다 */
}

/* §6 레거시 별칭 — 기존 CSS 가 쓰는 이름. 값은 전부 위 토큰 참조. 새 소비자를 만들지 말 것 */
:root {
  --fs-t1: var(--font-size-t1);
  --lh-t1: var(--line-height-t1);
  --fs-t2: var(--font-size-t2);
  --lh-t2: var(--line-height-t2);
  --fs-t3: var(--font-size-t3);
  --lh-t3: var(--line-height-t3);
  --fs-t4: var(--font-size-t4);
  --lh-t4: var(--line-height-t4);
  --fs-t5: var(--font-size-t5);
  --lh-t5: var(--line-height-t5);
  --fs-t6: var(--font-size-t6);
  --lh-t6: var(--line-height-t6);
  --fs-t7: var(--font-size-t7);
  --lh-t7: var(--line-height-t7);
  --fs-t8: var(--font-size-t8);
  --lh-t8: var(--line-height-t8);
  --fs-t9: var(--font-size-t9);
  --lh-t9: var(--line-height-t9);
  --fs-t10: var(--font-size-t10);
  --lh-t10: var(--line-height-t10);
  --fs-t11: var(--font-size-t11);
  --lh-t11: var(--line-height-t11);
  --fw-regular: var(--font-weight-regular);
  --fw-medium: var(--font-weight-medium);
  --fw-bold: var(--font-weight-bold);
  --fw-display: var(--font-weight-display);
  --hover: var(--duration-hover) var(--easing-standard);   /* transition: <prop> var(--hover) — 0.32s + 표준 곡선 */
  --ease: var(--easing-standard);
}
body[data-theme="midday"] {
  --accent: var(--accent-primary);
  --ok: var(--status-success);
  --postit: var(--surface-postit);
  --ink: var(--text-primary);
  --ink-soft: var(--text-secondary);
  --panel: var(--surface-glass);
  --sky-a: var(--bg-secondary);
  --sky-b: var(--bg-primary);
  --floor: var(--scene-floor);
  --floor-line: var(--scene-floor-line);
  --roof: var(--scene-roof);
  --wall: var(--scene-wall);
  --desk: var(--scene-desk);
  --shadow: var(--shadow-color);
}
body[data-theme="evening"] {
  --accent: var(--accent-primary);
  --ok: var(--status-success);
  --postit: var(--surface-postit);
  --ink: var(--text-primary);
  --ink-soft: var(--text-secondary);
  --panel: var(--surface-glass);
  --sky-a: var(--bg-secondary);
  --sky-b: var(--bg-primary);
  --floor: var(--scene-floor);
  --floor-line: var(--scene-floor-line);
  --roof: var(--scene-roof);
  --wall: var(--scene-wall);
  --desk: var(--scene-desk);
  --shadow: var(--shadow-color);
}

/* §7 타입 유틸 — 역할 한 벌을 클래스로. 롱핸드만(font 축약은 .mono 의 font-variant-numeric 을 지운다) */
.type-display-large { font-family: var(--type-display-large-family); font-size: var(--type-display-large-size); line-height: var(--type-display-large-line); font-weight: var(--type-display-large-weight); letter-spacing: var(--type-display-large-tracking); }
.type-display-medium { font-family: var(--type-display-medium-family); font-size: var(--type-display-medium-size); line-height: var(--type-display-medium-line); font-weight: var(--type-display-medium-weight); letter-spacing: var(--type-display-medium-tracking); }
.type-heading-1 { font-family: var(--type-heading-1-family); font-size: var(--type-heading-1-size); line-height: var(--type-heading-1-line); font-weight: var(--type-heading-1-weight); letter-spacing: var(--type-heading-1-tracking); }
.type-heading-2 { font-family: var(--type-heading-2-family); font-size: var(--type-heading-2-size); line-height: var(--type-heading-2-line); font-weight: var(--type-heading-2-weight); letter-spacing: var(--type-heading-2-tracking); }
.type-heading-3 { font-family: var(--type-heading-3-family); font-size: var(--type-heading-3-size); line-height: var(--type-heading-3-line); font-weight: var(--type-heading-3-weight); letter-spacing: var(--type-heading-3-tracking); }
.type-heading-4 { font-family: var(--type-heading-4-family); font-size: var(--type-heading-4-size); line-height: var(--type-heading-4-line); font-weight: var(--type-heading-4-weight); letter-spacing: var(--type-heading-4-tracking); }
.type-body-large { font-family: var(--type-body-large-family); font-size: var(--type-body-large-size); line-height: var(--type-body-large-line); font-weight: var(--type-body-large-weight); letter-spacing: var(--type-body-large-tracking); }
.type-body-medium { font-family: var(--type-body-medium-family); font-size: var(--type-body-medium-size); line-height: var(--type-body-medium-line); font-weight: var(--type-body-medium-weight); letter-spacing: var(--type-body-medium-tracking); }
.type-body-small { font-family: var(--type-body-small-family); font-size: var(--type-body-small-size); line-height: var(--type-body-small-line); font-weight: var(--type-body-small-weight); letter-spacing: var(--type-body-small-tracking); }
.type-caption { font-family: var(--type-caption-family); font-size: var(--type-caption-size); line-height: var(--type-caption-line); font-weight: var(--type-caption-weight); letter-spacing: var(--type-caption-tracking); }
.type-overline { font-family: var(--type-overline-family); font-size: var(--type-overline-size); line-height: var(--type-overline-line); font-weight: var(--type-overline-weight); letter-spacing: var(--type-overline-tracking); text-transform: uppercase; }