/* ============================================================================ HCT 색 팔레트 — 자동 생성 파일 (직접 수정하지 마세요) ---------------------------------------------------------------------------- 원본: tokens/palettes.json 생성: npm run tokens:build 사용법: 속성이 없으면 기본 팔레트(DEFAULT)가 그대로 적용됩니다. 기본 팔레트는 :root 에도 함께 걸립니다. 속성을 안 붙였을 때 어느 팔레트도 아닌 '반쯤 설정된' 상태가 되면, 사이드바만 밝고 그 위 로고는 어두운 면을 가정한 흰색이 얹혀 사라집니다. 실제로 이 패키지를 처음 설치한 프로젝트에서 그렇게 깨졌습니다. 속성을 붙이는 것을 잊어도 제품이 성립해야 합니다. 상태 색(성공·주의·위험·정보·검토)은 팔레트가 바뀌어도 그대로입니다. 의미를 나르는 색이라 제품 전체에서 고정되어야 합니다. ============================================================================ */ /* ── HCT — 로고색 강조 · 짙은 남색 사이드바 (기본 — 속성 없이도 적용됩니다) 강조색이 회사 로고색 #2F4A9C 입니다. 보고서 템플릿(hct-report-template)이 '로고색은 밝은 지면 대비 7.51:1 로 강조색 요건을 만족한다'고 적어 두었고, 같은 색을 쓰면 보고서와 화면이 한 가족으로 읽힙니다. 사이드바 남색은 같은 색상환에서 어둡게 내린 값입니다. */ :root, :root[data-palette="hct"] { --hct-neutral-0: #FFFFFF; --hct-neutral-25: #FCFDFE; --hct-neutral-50: #F7F9FC; --hct-neutral-100: #EFF3F8; --hct-neutral-200: #E3E9F1; --hct-neutral-300: #D0D9E5; --hct-neutral-400: #A7B3C4; --hct-neutral-500: #7C8899; --hct-neutral-600: #616D7E; --hct-neutral-700: #445062; --hct-neutral-800: #2E3847; --hct-neutral-900: #18202C; --hct-neutral-950: #0C1219; --hct-accent-50: #EFF2FA; --hct-accent-100: #DCE3F4; --hct-accent-200: #BAC8E8; --hct-accent-300: #8EA4D5; --hct-accent-400: #5D79BE; --hct-accent-500: #3E5BA9; --hct-accent-600: #2F4A9C; --hct-accent-700: #263C80; --hct-accent-800: #1F3166; --hct-accent-900: #1A2950; --color-sidebar-bg: #17264D; --color-sidebar-fg: #EBEFF8; --color-sidebar-fg-muted: #AAB7D2; --color-sidebar-fg-subtle: #8494B4; --color-sidebar-hover: #20325F; --color-sidebar-active-bg: #2F4A9C; --color-sidebar-active-fg: #FFFFFF; --color-sidebar-border: #22355F; --color-sidebar-badge-bg: #D02439; --color-sidebar-badge-fg: #FFFFFF; --color-sidebar-rail-bg: #101B39; } @media (prefers-color-scheme: dark) { :root:not([data-palette]):not([data-theme="light"]), :root[data-palette="hct"]:not([data-theme="light"]) { --color-bg-canvas: #0B0F16; --color-bg-surface: #131922; --color-bg-raised: #1B222D; --color-bg-sunken: #0E131A; --color-bg-hover: #1B222D; --color-bg-active: #232B37; --color-bg-sidebar: #0D1520; --color-bg-overlay: rgb(0 0 0 / 0.64); --color-text-primary: #E6EBF2; --color-text-secondary: #A5B0BF; --color-text-tertiary: #7D8896; --color-text-disabled: #525C69; --color-text-inverse: #0B0F16; --color-text-link: #8EA4D5; --color-border-subtle: #1F2733; --color-border-default: #2B3542; --color-border-strong: #45505F; --color-border-focus: #5D79BE; --color-accent-solid: #5D79BE; --color-accent-solid-hover: #8EA4D5; --color-accent-subtle: #141F3A; --color-accent-subtle-hover: #1A2949; --color-accent-text: #8EA4D5; --color-accent-border: #1F3166; --color-sidebar-bg: #0D1520; --color-sidebar-fg: #E6EBF2; --color-sidebar-fg-muted: #A5B0BF; --color-sidebar-fg-subtle: #7D8896; --color-sidebar-hover: #17202D; --color-sidebar-active-bg: #3E5BA9; --color-sidebar-active-fg: #FFFFFF; --color-sidebar-border: #1C2634; --color-sidebar-badge-bg: #D02439; --color-sidebar-badge-fg: #FFFFFF; --color-sidebar-rail-bg: #080D15; } } :root:not([data-palette])[data-theme="dark"], :root[data-palette="hct"][data-theme="dark"] { --color-bg-canvas: #0B0F16; --color-bg-surface: #131922; --color-bg-raised: #1B222D; --color-bg-sunken: #0E131A; --color-bg-hover: #1B222D; --color-bg-active: #232B37; --color-bg-sidebar: #0D1520; --color-bg-overlay: rgb(0 0 0 / 0.64); --color-text-primary: #E6EBF2; --color-text-secondary: #A5B0BF; --color-text-tertiary: #7D8896; --color-text-disabled: #525C69; --color-text-inverse: #0B0F16; --color-text-link: #8EA4D5; --color-border-subtle: #1F2733; --color-border-default: #2B3542; --color-border-strong: #45505F; --color-border-focus: #5D79BE; --color-accent-solid: #5D79BE; --color-accent-solid-hover: #8EA4D5; --color-accent-subtle: #141F3A; --color-accent-subtle-hover: #1A2949; --color-accent-text: #8EA4D5; --color-accent-border: #1F3166; --color-sidebar-bg: #0D1520; --color-sidebar-fg: #E6EBF2; --color-sidebar-fg-muted: #A5B0BF; --color-sidebar-fg-subtle: #7D8896; --color-sidebar-hover: #17202D; --color-sidebar-active-bg: #3E5BA9; --color-sidebar-active-fg: #FFFFFF; --color-sidebar-border: #1C2634; --color-sidebar-badge-bg: #D02439; --color-sidebar-badge-fg: #FFFFFF; --color-sidebar-rail-bg: #080D15; } /* ── 네이비 — 짙은 남색 사이드바 · 흰 콘텐츠 탐색은 짙은 남색, 작업 영역은 흰색으로 갈라놓습니다. 슬랙식 밝기 대비를 유지하되 색은 파랑 계열로 통일했습니다. 중성색에 자주·황토 기운이 없어 배경이 순수한 흰색으로 읽힙니다. */ :root[data-palette="navy"] { --hct-neutral-0: #FFFFFF; --hct-neutral-25: #FCFDFE; --hct-neutral-50: #F7F9FC; --hct-neutral-100: #EFF3F8; --hct-neutral-200: #E3E9F1; --hct-neutral-300: #D0D9E5; --hct-neutral-400: #A7B3C4; --hct-neutral-500: #7C8899; --hct-neutral-600: #616D7E; --hct-neutral-700: #445062; --hct-neutral-800: #2E3847; --hct-neutral-900: #18202C; --hct-neutral-950: #0C1219; --hct-accent-50: #EFF5FF; --hct-accent-100: #DCE8FE; --hct-accent-200: #BFD5FD; --hct-accent-300: #93B8FB; --hct-accent-400: #5F93F6; --hct-accent-500: #3573EC; --hct-accent-600: #1B5AD6; --hct-accent-700: #1747AE; --hct-accent-800: #173B8B; --hct-accent-900: #16336E; --color-sidebar-bg: #12253F; --color-sidebar-fg: #EAF0F8; --color-sidebar-fg-muted: #A9BAD0; --color-sidebar-fg-subtle: #8397B1; --color-sidebar-hover: #1B3455; --color-sidebar-active-bg: #1B5AD6; --color-sidebar-active-fg: #FFFFFF; --color-sidebar-border: #1E3A5C; --color-sidebar-badge-bg: #D02439; --color-sidebar-badge-fg: #FFFFFF; --color-sidebar-rail-bg: #0C1B2F; } @media (prefers-color-scheme: dark) { :root[data-palette="navy"]:not([data-theme="light"]) { --color-bg-canvas: #0B0F16; --color-bg-surface: #131922; --color-bg-raised: #1B222D; --color-bg-sunken: #0E131A; --color-bg-hover: #1B222D; --color-bg-active: #232B37; --color-bg-sidebar: #0D1520; --color-bg-overlay: rgb(0 0 0 / 0.64); --color-text-primary: #E6EBF2; --color-text-secondary: #A5B0BF; --color-text-tertiary: #7D8896; --color-text-disabled: #525C69; --color-text-inverse: #0B0F16; --color-text-link: #93B8FB; --color-border-subtle: #1F2733; --color-border-default: #2B3542; --color-border-strong: #45505F; --color-border-focus: #5F93F6; --color-accent-solid: #5F93F6; --color-accent-solid-hover: #93B8FB; --color-accent-subtle: #10233F; --color-accent-subtle-hover: #152D50; --color-accent-text: #93B8FB; --color-accent-border: #173B8B; --color-sidebar-bg: #0D1520; --color-sidebar-fg: #E6EBF2; --color-sidebar-fg-muted: #A5B0BF; --color-sidebar-fg-subtle: #7D8896; --color-sidebar-hover: #17202D; --color-sidebar-active-bg: #2E6BD8; --color-sidebar-active-fg: #FFFFFF; --color-sidebar-border: #1C2634; --color-sidebar-badge-bg: #D02439; --color-sidebar-badge-fg: #FFFFFF; --color-sidebar-rail-bg: #080D15; } } :root[data-palette="navy"][data-theme="dark"] { --color-bg-canvas: #0B0F16; --color-bg-surface: #131922; --color-bg-raised: #1B222D; --color-bg-sunken: #0E131A; --color-bg-hover: #1B222D; --color-bg-active: #232B37; --color-bg-sidebar: #0D1520; --color-bg-overlay: rgb(0 0 0 / 0.64); --color-text-primary: #E6EBF2; --color-text-secondary: #A5B0BF; --color-text-tertiary: #7D8896; --color-text-disabled: #525C69; --color-text-inverse: #0B0F16; --color-text-link: #93B8FB; --color-border-subtle: #1F2733; --color-border-default: #2B3542; --color-border-strong: #45505F; --color-border-focus: #5F93F6; --color-accent-solid: #5F93F6; --color-accent-solid-hover: #93B8FB; --color-accent-subtle: #10233F; --color-accent-subtle-hover: #152D50; --color-accent-text: #93B8FB; --color-accent-border: #173B8B; --color-sidebar-bg: #0D1520; --color-sidebar-fg: #E6EBF2; --color-sidebar-fg-muted: #A5B0BF; --color-sidebar-fg-subtle: #7D8896; --color-sidebar-hover: #17202D; --color-sidebar-active-bg: #2E6BD8; --color-sidebar-active-fg: #FFFFFF; --color-sidebar-border: #1C2634; --color-sidebar-badge-bg: #D02439; --color-sidebar-badge-fg: #FFFFFF; --color-sidebar-rail-bg: #080D15; } /* ── 아크틱 — 전체 화이트 · 파랑 강조 사이드바까지 밝게 가는 구성입니다. 화면 전체가 흰 종이처럼 읽히고 색은 강조와 상태에만 남습니다. 밝기 대비 대신 테두리로 영역을 나눕니다. */ :root[data-palette="arctic"] { --hct-neutral-0: #FFFFFF; --hct-neutral-25: #FCFDFE; --hct-neutral-50: #F7F9FC; --hct-neutral-100: #EFF3F8; --hct-neutral-200: #E3E9F1; --hct-neutral-300: #D0D9E5; --hct-neutral-400: #A7B3C4; --hct-neutral-500: #7C8899; --hct-neutral-600: #616D7E; --hct-neutral-700: #445062; --hct-neutral-800: #2E3847; --hct-neutral-900: #18202C; --hct-neutral-950: #0C1219; --hct-accent-50: #EFF5FF; --hct-accent-100: #DCE8FE; --hct-accent-200: #BFD5FD; --hct-accent-300: #93B8FB; --hct-accent-400: #5F93F6; --hct-accent-500: #3573EC; --hct-accent-600: #1B5AD6; --hct-accent-700: #1747AE; --hct-accent-800: #173B8B; --hct-accent-900: #16336E; --color-sidebar-bg: #F7F9FC; --color-sidebar-fg: #18202C; --color-sidebar-fg-muted: #445062; --color-sidebar-fg-subtle: #616D7E; --color-sidebar-hover: #EFF3F8; --color-sidebar-active-bg: #EFF5FF; --color-sidebar-active-fg: #1747AE; --color-sidebar-border: #E3E9F1; --color-sidebar-badge-bg: #D02439; --color-sidebar-badge-fg: #FFFFFF; --color-sidebar-rail-bg: #EFF3F8; } @media (prefers-color-scheme: dark) { :root[data-palette="arctic"]:not([data-theme="light"]) { --color-bg-canvas: #0B0F16; --color-bg-surface: #131922; --color-bg-raised: #1B222D; --color-bg-sunken: #0E131A; --color-bg-hover: #1B222D; --color-bg-active: #232B37; --color-bg-sidebar: #0D1520; --color-bg-overlay: rgb(0 0 0 / 0.64); --color-text-primary: #E6EBF2; --color-text-secondary: #A5B0BF; --color-text-tertiary: #7D8896; --color-text-disabled: #525C69; --color-text-inverse: #0B0F16; --color-text-link: #93B8FB; --color-border-subtle: #1F2733; --color-border-default: #2B3542; --color-border-strong: #45505F; --color-border-focus: #5F93F6; --color-accent-solid: #5F93F6; --color-accent-solid-hover: #93B8FB; --color-accent-subtle: #10233F; --color-accent-subtle-hover: #152D50; --color-accent-text: #93B8FB; --color-accent-border: #173B8B; --color-sidebar-bg: #0E131A; --color-sidebar-fg: #E6EBF2; --color-sidebar-fg-muted: #A5B0BF; --color-sidebar-fg-subtle: #7D8896; --color-sidebar-hover: #1B222D; --color-sidebar-active-bg: #10233F; --color-sidebar-active-fg: #93B8FB; --color-sidebar-border: #1F2733; --color-sidebar-badge-bg: #D02439; --color-sidebar-badge-fg: #FFFFFF; --color-sidebar-rail-bg: #0B0F16; } } :root[data-palette="arctic"][data-theme="dark"] { --color-bg-canvas: #0B0F16; --color-bg-surface: #131922; --color-bg-raised: #1B222D; --color-bg-sunken: #0E131A; --color-bg-hover: #1B222D; --color-bg-active: #232B37; --color-bg-sidebar: #0D1520; --color-bg-overlay: rgb(0 0 0 / 0.64); --color-text-primary: #E6EBF2; --color-text-secondary: #A5B0BF; --color-text-tertiary: #7D8896; --color-text-disabled: #525C69; --color-text-inverse: #0B0F16; --color-text-link: #93B8FB; --color-border-subtle: #1F2733; --color-border-default: #2B3542; --color-border-strong: #45505F; --color-border-focus: #5F93F6; --color-accent-solid: #5F93F6; --color-accent-solid-hover: #93B8FB; --color-accent-subtle: #10233F; --color-accent-subtle-hover: #152D50; --color-accent-text: #93B8FB; --color-accent-border: #173B8B; --color-sidebar-bg: #0E131A; --color-sidebar-fg: #E6EBF2; --color-sidebar-fg-muted: #A5B0BF; --color-sidebar-fg-subtle: #7D8896; --color-sidebar-hover: #1B222D; --color-sidebar-active-bg: #10233F; --color-sidebar-active-fg: #93B8FB; --color-sidebar-border: #1F2733; --color-sidebar-badge-bg: #D02439; --color-sidebar-badge-fg: #FFFFFF; --color-sidebar-rail-bg: #0B0F16; } /* ── 그래파이트 — 무채색 강조 · 따뜻한 중성색 강조색을 무채색으로 두어 화면의 모든 색이 오직 상태만 가리키게 합니다. 상태가 의미의 전부인 관리도구에 가장 정확한 선택입니다. */ :root[data-palette="graphite"] { --hct-neutral-0: #FFFFFF; --hct-neutral-25: #FCFBF9; --hct-neutral-50: #F7F6F3; --hct-neutral-100: #F0EEEA; --hct-neutral-200: #E6E3DC; --hct-neutral-300: #D7D3C9; --hct-neutral-400: #B2ADA1; --hct-neutral-500: #8A8479; --hct-neutral-600: #6E685E; --hct-neutral-700: #514C44; --hct-neutral-800: #39352F; --hct-neutral-900: #21201C; --hct-neutral-950: #131210; --hct-accent-50: #EFEADD; --hct-accent-100: #E3DCCA; --hct-accent-200: #CFC7B2; --hct-accent-300: #A69D88; --hct-accent-400: #6F695C; --hct-accent-500: #4A453C; --hct-accent-600: #33302A; --hct-accent-700: #26231E; --hct-accent-800: #1A1815; --hct-accent-900: #12100E; } @media (prefers-color-scheme: dark) { :root[data-palette="graphite"]:not([data-theme="light"]) { --color-bg-canvas: #0D0C0B; --color-bg-surface: #171614; --color-bg-raised: #211F1C; --color-bg-sunken: #110F0E; --color-bg-hover: #211F1C; --color-bg-active: #2B2825; --color-bg-sidebar: #110F0E; --color-bg-overlay: rgb(0 0 0 / 0.64); --color-text-primary: #EDEBE6; --color-text-secondary: #ADA79C; --color-text-tertiary: #857F74; --color-text-disabled: #57524A; --color-text-inverse: #171614; --color-text-link: #D8D1C0; --color-border-subtle: #262320; --color-border-default: #33302A; --color-border-strong: #4E4940; --color-border-focus: #B2ADA1; --color-accent-solid: #E7E2D6; --color-accent-solid-hover: #F5F1E8; --color-accent-subtle: #2A2621; --color-accent-subtle-hover: #35302A; --color-accent-text: #D8D1C0; --color-accent-border: #4E4940; } } :root[data-palette="graphite"][data-theme="dark"] { --color-bg-canvas: #0D0C0B; --color-bg-surface: #171614; --color-bg-raised: #211F1C; --color-bg-sunken: #110F0E; --color-bg-hover: #211F1C; --color-bg-active: #2B2825; --color-bg-sidebar: #110F0E; --color-bg-overlay: rgb(0 0 0 / 0.64); --color-text-primary: #EDEBE6; --color-text-secondary: #ADA79C; --color-text-tertiary: #857F74; --color-text-disabled: #57524A; --color-text-inverse: #171614; --color-text-link: #D8D1C0; --color-border-subtle: #262320; --color-border-default: #33302A; --color-border-strong: #4E4940; --color-border-focus: #B2ADA1; --color-accent-solid: #E7E2D6; --color-accent-solid-hover: #F5F1E8; --color-accent-subtle: #2A2621; --color-accent-subtle-hover: #35302A; --color-accent-text: #D8D1C0; --color-accent-border: #4E4940; } /* ── 플럼 — 어두운 자두색 사이드바 · 밝은 콘텐츠 탐색 영역과 작업 영역을 밝기로 갈라놓는 구성입니다. 사이드바가 어두워 '지금 어디에 있는가'가 항상 배경으로 깔리고, 콘텐츠는 밝아 데이터가 가장 진하게 남습니다. 라이트 테마에서도 사이드바는 어둡게 유지됩니다. */ :root[data-palette="plum"] { --hct-neutral-0: #FFFFFF; --hct-neutral-25: #FCFBFC; --hct-neutral-50: #F8F6F9; --hct-neutral-100: #F2EFF4; --hct-neutral-200: #E8E3EC; --hct-neutral-300: #D8D1DE; --hct-neutral-400: #B3A9BC; --hct-neutral-500: #8A7F94; --hct-neutral-600: #6E6379; --hct-neutral-700: #514757; --hct-neutral-800: #39313E; --hct-neutral-900: #211B25; --hct-neutral-950: #130F16; --hct-accent-50: #FBEFF7; --hct-accent-100: #F5DCEC; --hct-accent-200: #EBBBD9; --hct-accent-300: #DA8FC0; --hct-accent-400: #C25CA2; --hct-accent-500: #A63985; --hct-accent-600: #8B2A6E; --hct-accent-700: #702158; --hct-accent-800: #5A1B47; --hct-accent-900: #48163A; --color-sidebar-bg: #33143A; --color-sidebar-fg: #F4EDF6; --color-sidebar-fg-muted: #C3AFCB; --color-sidebar-fg-subtle: #A794B0; --color-sidebar-hover: #441D4D; --color-sidebar-active-bg: #8B2A6E; --color-sidebar-active-fg: #FFFFFF; --color-sidebar-border: #48244F; --color-sidebar-badge-bg: #D02439; --color-sidebar-badge-fg: #FFFFFF; --color-sidebar-rail-bg: #250F2B; } @media (prefers-color-scheme: dark) { :root[data-palette="plum"]:not([data-theme="light"]) { --color-bg-canvas: #0E0A10; --color-bg-surface: #181320; --color-bg-raised: #221B2B; --color-bg-sunken: #120D16; --color-bg-hover: #221B2B; --color-bg-active: #2C2436; --color-bg-sidebar: #170F1C; --color-bg-overlay: rgb(0 0 0 / 0.66); --color-text-primary: #EDE7F0; --color-text-secondary: #AEA3B6; --color-text-tertiary: #867B8E; --color-text-disabled: #575060; --color-text-inverse: #0E0A10; --color-text-link: #DA8FC0; --color-border-subtle: #251E2D; --color-border-default: #332A3C; --color-border-strong: #4E4459; --color-border-focus: #C25CA2; --color-accent-solid: #C25CA2; --color-accent-solid-hover: #DA8FC0; --color-accent-subtle: #2A1226; --color-accent-subtle-hover: #371730; --color-accent-text: #DA8FC0; --color-accent-border: #5A1B47; --color-sidebar-bg: #170F1C; --color-sidebar-fg: #EDE7F0; --color-sidebar-fg-muted: #AEA3B6; --color-sidebar-fg-subtle: #867B8E; --color-sidebar-hover: #241A2B; --color-sidebar-active-bg: #8B2A6E; --color-sidebar-active-fg: #FFFFFF; --color-sidebar-border: #2A2032; --color-sidebar-badge-bg: #D02439; --color-sidebar-badge-fg: #FFFFFF; --color-sidebar-rail-bg: #100A14; } } :root[data-palette="plum"][data-theme="dark"] { --color-bg-canvas: #0E0A10; --color-bg-surface: #181320; --color-bg-raised: #221B2B; --color-bg-sunken: #120D16; --color-bg-hover: #221B2B; --color-bg-active: #2C2436; --color-bg-sidebar: #170F1C; --color-bg-overlay: rgb(0 0 0 / 0.66); --color-text-primary: #EDE7F0; --color-text-secondary: #AEA3B6; --color-text-tertiary: #867B8E; --color-text-disabled: #575060; --color-text-inverse: #0E0A10; --color-text-link: #DA8FC0; --color-border-subtle: #251E2D; --color-border-default: #332A3C; --color-border-strong: #4E4459; --color-border-focus: #C25CA2; --color-accent-solid: #C25CA2; --color-accent-solid-hover: #DA8FC0; --color-accent-subtle: #2A1226; --color-accent-subtle-hover: #371730; --color-accent-text: #DA8FC0; --color-accent-border: #5A1B47; --color-sidebar-bg: #170F1C; --color-sidebar-fg: #EDE7F0; --color-sidebar-fg-muted: #AEA3B6; --color-sidebar-fg-subtle: #867B8E; --color-sidebar-hover: #241A2B; --color-sidebar-active-bg: #8B2A6E; --color-sidebar-active-fg: #FFFFFF; --color-sidebar-border: #2A2032; --color-sidebar-badge-bg: #D02439; --color-sidebar-badge-fg: #FFFFFF; --color-sidebar-rail-bg: #100A14; } /* ── 인디고 — 채도를 낮춘 남보라 · 중립 회색 기본 파랑보다 어둡고 보라 쪽으로 기울여, 정보(파랑)·검토(보라) 상태와 구분되면서도 익숙한 신뢰감을 유지합니다. */ :root[data-palette="indigo"] { --hct-neutral-0: #FFFFFF; --hct-neutral-25: #FCFCFD; --hct-neutral-50: #F8F8FA; --hct-neutral-100: #F1F1F4; --hct-neutral-200: #E7E7EC; --hct-neutral-300: #D7D7DF; --hct-neutral-400: #B2B2BD; --hct-neutral-500: #888894; --hct-neutral-600: #6C6C79; --hct-neutral-700: #4D4D5A; --hct-neutral-800: #353541; --hct-neutral-900: #1D1D26; --hct-neutral-950: #101017; --hct-accent-50: #F0F0FB; --hct-accent-100: #E1E1F6; --hct-accent-200: #C6C7EE; --hct-accent-300: #9C9EE0; --hct-accent-400: #7476CE; --hct-accent-500: #5456B9; --hct-accent-600: #42449E; --hct-accent-700: #373882; --hct-accent-800: #2C2D67; --hct-accent-900: #232450; } @media (prefers-color-scheme: dark) { :root[data-palette="indigo"]:not([data-theme="light"]) { --color-bg-canvas: #0C0C10; --color-bg-surface: #15151B; --color-bg-raised: #1E1E26; --color-bg-sunken: #101015; --color-bg-hover: #1E1E26; --color-bg-active: #27272F; --color-bg-sidebar: #101015; --color-bg-overlay: rgb(0 0 0 / 0.64); --color-text-primary: #E8E8ED; --color-text-secondary: #A8A8B4; --color-text-tertiary: #80808E; --color-text-disabled: #54545F; --color-text-inverse: #0C0C10; --color-text-link: #9C9EE0; --color-border-subtle: #232329; --color-border-default: #2F2F38; --color-border-strong: #4A4A55; --color-border-focus: #7476CE; --color-accent-solid: #8385D6; --color-accent-solid-hover: #9C9EE0; --color-accent-subtle: #1A1B33; --color-accent-subtle-hover: #22233F; --color-accent-text: #9C9EE0; --color-accent-border: #2C2D67; } } :root[data-palette="indigo"][data-theme="dark"] { --color-bg-canvas: #0C0C10; --color-bg-surface: #15151B; --color-bg-raised: #1E1E26; --color-bg-sunken: #101015; --color-bg-hover: #1E1E26; --color-bg-active: #27272F; --color-bg-sidebar: #101015; --color-bg-overlay: rgb(0 0 0 / 0.64); --color-text-primary: #E8E8ED; --color-text-secondary: #A8A8B4; --color-text-tertiary: #80808E; --color-text-disabled: #54545F; --color-text-inverse: #0C0C10; --color-text-link: #9C9EE0; --color-border-subtle: #232329; --color-border-default: #2F2F38; --color-border-strong: #4A4A55; --color-border-focus: #7476CE; --color-accent-solid: #8385D6; --color-accent-solid-hover: #9C9EE0; --color-accent-subtle: #1A1B33; --color-accent-subtle-hover: #22233F; --color-accent-text: #9C9EE0; --color-accent-border: #2C2D67; }