/*
 * 공통 색 역할(024 FR-015~FR-020, 45). 화면은 이 이름만 쓰고 색 값은 여기에만 둔다. 이름은 세 팀원이 같이 쓰고 값만 바꿀 수 있다.
 * 테마 결정: <html data-theme="light|dark">가 있으면 그것, 없으면(시스템 설정·스크립트 꺼짐) 기기 설정(prefers-color-scheme).
 * 테마가 바뀔 때 색 애니메이션은 넣지 않는다(FR-013). 이미지·프로필 사진은 다크에서도 그대로 둔다(FR-019).
 * 공통 목록 밖 역할(--color-brand-soft, --color-highlight, --color-warning-*, --color-success-*, --color-danger-*,
 * --color-surface-muted, --color-overlay, --color-shadow, --color-on-fill, 시안(10-08)의 --color-like·tag·hero·accent·cat·google)은
 * 이 서비스의 확장이다.
 */
:root {
    color-scheme: light dark;
    --color-bg: #FBF7F1;
    --color-surface: #FFFFFF;
    --color-text: #2E2A26;
    --color-text-muted: #6B6259;
    --color-border: #ECE4D8;
    --color-brand: #3D6B55;
    --color-brand-fill: #456F5B;
    --color-danger: #B4323F;
    --color-thumb-empty: #F3ECE2;
    --color-code-bg: #F7F3EC;
    --color-focus: #3D6B55;
    --color-brand-soft: #E5EFE8;
    --color-highlight: #FFF1C2;
    --color-warning-border: #C29100;
    --color-warning-text: #7D4E00;
    --color-success: #2B8A3E;
    --color-success-soft: #EBFBEE;
    --color-success-strong: #8CE99A;
    --color-danger-soft: #FDECEE;
    --color-danger-strong: #FFA8A8;
    --color-danger-fill: #C2414E;
    --color-surface-muted: #F5EFE6;
    --color-overlay: rgba(0, 0, 0, .65);
    --color-shadow: rgba(80, 60, 40, .08);
    --color-on-fill: #FFFFFF;
    /* 시안(10-08): 크림 배경·세이지 버튼·둥근 카드 */
    --color-like: #C93A4B;
    --color-tag-bg: #EAF0F7;
    --color-tag-text: #3A5378;
    --color-hero-from: #FFF4E4;
    --color-cat-art-bg: #FCF2E6;
    --color-hero-to: #FBE6D6;
    --color-accent: #D9823F;
    /* 입력 칸·버튼 테두리: 바탕과 3:1 이상(45 §4) */
    --color-control-border: #958A7E;
    /* 031 잔디 진하기 0~4(세이지) */
    --color-grass-0: #EDE6DB; --color-grass-1: #CFE3D3; --color-grass-2: #9CC5A8; --color-grass-3: #5E9B77; --color-grass-4: #3D6B55;
    --color-chip0-bg: #F3E9D8; --color-chip0-text: #7A5A2B;
    --color-chip1-bg: #E3ECFA; --color-chip1-text: #2B5797;
    --color-chip2-bg: #ECE6FA; --color-chip2-text: #5B3FA0;
    --color-chip3-bg: #FCE7E9; --color-chip3-text: #9C2F44;
    /* 그림 색(라이트·다크 같음): 로고 발자국·고양이 그림·Google 로고 */
    --color-google-blue: #4285F4;
    --color-google-green: #34A853;
    --color-google-yellow: #FBBC05;
    --color-google-red: #EA4335;
    /* 코드 문법 강조(highlight.js) — 코드 배경 위 대비 4.5:1 이상 */
    --code-keyword: #A61E4D;
    --code-string: #237032;
    --code-number: #1864AB;
    --code-comment: #5C636A;
    --code-title: #6741D9;
    --code-type: #A35200;
    --code-meta: #0B7285;
    /* 기본 프로필 아이콘 8색: 흰 글자와 4.5:1 이상, 라이트·다크 같음(FR-020) */
    --avatar-c0: #0B5CAD;
    --avatar-c1: #1A7F37;
    --avatar-c2: #8250DF;
    --avatar-c3: #BF3989;
    --avatar-c4: #9A6700;
    --avatar-c5: #CF222E;
    --avatar-c6: #0E7490;
    --avatar-c7: #57606A;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-bg: #121212;
        --color-surface: #1E1C1A;
        --color-text: #EDE7DF;
        --color-text-muted: #B5ABA0;
        --color-border: #36312C;
        --color-brand: #9BCBB1;
        --color-brand-fill: #3F6A55;
        --color-danger: #FF8A8A;
        --color-thumb-empty: #2A2622;
        --color-code-bg: #1A1917;
        --color-focus: #9BCBB1;
        --color-brand-soft: #1F2E26;
        --color-highlight: #3D3200;
        --color-warning-border: #8F6D00;
        --color-warning-text: #FFD43B;
        --color-success: #69DB7C;
        --color-success-soft: #12301A;
        --color-success-strong: #2B6A3A;
        --color-danger-soft: #3B1A1E;
        --color-danger-strong: #7A2E2E;
        --color-danger-fill: #C2414E;
        --color-surface-muted: #262320;
        --color-overlay: rgba(0, 0, 0, .7);
        --color-shadow: rgba(0, 0, 0, .5);
        --color-like: #FF7A88;
        --color-tag-bg: #24303D;
        --color-tag-text: #B9CDE6;
        --color-hero-from: #2A2420;
        --color-cat-art-bg: #FCF2E6;
        --color-hero-to: #1E1A17;
        --color-accent: #E8A56C;
        --color-control-border: #736B62;
        --color-grass-0: #2A2622; --color-grass-1: #23412F; --color-grass-2: #2F6145; --color-grass-3: #4A8A64; --color-grass-4: #7FC09A;
        --color-chip0-bg: #33291D; --color-chip0-text: #E8CFA6;
        --color-chip1-bg: #22303F; --color-chip1-text: #B9CDE6;
        --color-chip2-bg: #2C2640; --color-chip2-text: #CFC2F2;
        --color-chip3-bg: #3A2229; --color-chip3-text: #F2B8C2;
        --code-keyword: #F783AC;
        --code-string: #8CE99A;
        --code-number: #74C0FC;
        --code-comment: #ADB5BD;
        --code-title: #B197FC;
        --code-type: #FFC078;
        --code-meta: #66D9E8;
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --color-bg: #121212;
    --color-surface: #1E1C1A;
    --color-text: #EDE7DF;
    --color-text-muted: #B5ABA0;
    --color-border: #36312C;
    --color-brand: #9BCBB1;
    --color-brand-fill: #3F6A55;
    --color-danger: #FF8A8A;
    --color-thumb-empty: #2A2622;
    --color-code-bg: #1A1917;
    --color-focus: #9BCBB1;
    --color-brand-soft: #1F2E26;
    --color-highlight: #3D3200;
    --color-warning-border: #8F6D00;
    --color-warning-text: #FFD43B;
    --color-success: #69DB7C;
    --color-success-soft: #12301A;
    --color-success-strong: #2B6A3A;
    --color-danger-soft: #3B1A1E;
    --color-danger-strong: #7A2E2E;
    --color-danger-fill: #C2414E;
    --color-surface-muted: #262320;
    --color-overlay: rgba(0, 0, 0, .7);
    --color-shadow: rgba(0, 0, 0, .5);
    --color-like: #FF7A88;
    --color-tag-bg: #24303D;
    --color-tag-text: #B9CDE6;
    --color-hero-from: #2A2420;
    --color-cat-art-bg: #FCF2E6;
    --color-hero-to: #1E1A17;
    --color-accent: #E8A56C;
    --color-control-border: #736B62;
    --color-grass-0: #2A2622; --color-grass-1: #23412F; --color-grass-2: #2F6145; --color-grass-3: #4A8A64; --color-grass-4: #7FC09A;
    --color-chip0-bg: #33291D; --color-chip0-text: #E8CFA6;
    --color-chip1-bg: #22303F; --color-chip1-text: #B9CDE6;
    --color-chip2-bg: #2C2640; --color-chip2-text: #CFC2F2;
    --color-chip3-bg: #3A2229; --color-chip3-text: #F2B8C2;
    --code-keyword: #F783AC;
    --code-string: #8CE99A;
    --code-number: #74C0FC;
    --code-comment: #ADB5BD;
    --code-title: #B197FC;
    --code-type: #FFC078;
    --code-meta: #66D9E8;
}

:root[data-theme="light"] {
    color-scheme: light;
}

/* 포커스는 색 역할로(키보드 사용자) */
:focus-visible { outline-color: var(--color-focus); }

/* 테마 전환 버튼: 스크립트가 있을 때만 보인다(FR-011) */
.theme-toggle { background: none; border: 1px solid var(--color-border); border-radius: 999px; padding: 0 8px; color: var(--color-text);
    cursor: pointer; font: inherit; line-height: 1.8; }