/*
 * Customer Dashboard 색 토큰 정의 파일.
 * 컴포넌트 CSS(app.css)에는 색 값을 직접 쓰지 않고 이 파일의 토큰만 쓴다.
 * 지원 브라우저에서는 모든 값이 `light-dark(밝은 모드, 어두운 모드)` 한 줄로 정의된다. 모드는 html 요소의 color-scheme으로 정해진다.
 * `light-dark()`를 모르는 브라우저에는 아래 @supports not 블록이 같은 값을 밝은·어두운 모드별로 제공한다.
 *   data-theme="light" → 밝은 모드, "dark" → 어두운 모드, "system"(또는 값 없음) → 운영체제 설정을 따른다.
 *   서버가 첫 HTML의 data-theme에 저장된 선택을 그려 주므로 화면이 그려진 뒤 색이 바뀌지 않는다.
 * 값을 바꾸면 customer-dashboard/tests의 대비 테스트가 모든 짝(글자 4.5:1, 상태 점·컨트롤 경계·포커스 3:1)을 다시 계산한다.
 * 값의 근거와 사용 규칙은 docs/design-product/customer-dashboard.md의 `화면 정보 구조와 디자인` 절에 있다.
 * 이름은 Admin Dashboard(Epic #200)와 같은 규칙이다. on-danger·hover·selected는 Customer 전용이다.
 */
:root {
    color-scheme: light dark;
}

@supports (color: light-dark(#000000, #ffffff)) {
    :root {
        --page: light-dark(#ffffff, #09090b);
        --surface: light-dark(#ffffff, #0d0d10);
        --surface-muted: light-dark(#fafaf9, #111114);
        --sidebar: light-dark(#f5f5f3, #0d0d10);
        --text: light-dark(#171717, #ededef);
        --text-muted: light-dark(#666666, #a1a1aa);
        /* border는 장식용 구분선 전용이다. 입력창·버튼·점선 상자의 경계에는 border-strong을 쓴다. */
        --border: light-dark(#ebebe8, #1f1f23);
        --border-strong: light-dark(#7c7c77, #71717b);
        /* primary는 강조색이 아니라 흑백 대비다. 주 동작 버튼의 면 색이다. */
        --primary: light-dark(#171717, #ededef);
        --on-primary: light-dark(#ffffff, #09090b);
        /* success·warning·danger는 상태 점·아이콘·테두리에 쓴다. 상태 글자는 text를 쓴다(danger는 오류 문구 글자로도 쓴다). */
        --success: light-dark(#16834f, #3dd68c);
        --warning: light-dark(#855600, #f6d77a);
        --danger: light-dark(#a12c22, #f2a0a8);
        --on-danger: light-dark(#ffffff, #09090b);
        --focus: light-dark(#2457d6, #7aa7ff);
        --code-background: light-dark(#f3f3f1, #121215);
        --hover: light-dark(#ecece9, #17171b);
        --selected: light-dark(#e9e9e6, #1e1e23);
    }
}

/* light-dark() 미지원 브라우저도 저장된 밝은·어두운·시스템 테마를 안전하게 표시한다. */
@supports not (color: light-dark(#000000, #ffffff)) {
    :root {
        color-scheme: light;
        --page: #ffffff;
        --surface: #ffffff;
        --surface-muted: #fafaf9;
        --sidebar: #f5f5f3;
        --text: #171717;
        --text-muted: #666666;
        --border: #ebebe8;
        --border-strong: #7c7c77;
        --primary: #171717;
        --on-primary: #ffffff;
        --success: #16834f;
        --warning: #855600;
        --danger: #a12c22;
        --on-danger: #ffffff;
        --focus: #2457d6;
        --code-background: #f3f3f1;
        --hover: #ecece9;
        --selected: #e9e9e6;
    }

    html[data-theme="dark"] {
        color-scheme: dark;
        --page: #09090b;
        --surface: #0d0d10;
        --surface-muted: #111114;
        --sidebar: #0d0d10;
        --text: #ededef;
        --text-muted: #a1a1aa;
        --border: #1f1f23;
        --border-strong: #71717b;
        --primary: #ededef;
        --on-primary: #09090b;
        --success: #3dd68c;
        --warning: #f6d77a;
        --danger: #f2a0a8;
        --on-danger: #09090b;
        --focus: #7aa7ff;
        --code-background: #121215;
        --hover: #17171b;
        --selected: #1e1e23;
    }

    @media (prefers-color-scheme: dark) {
        html[data-theme="system"],
        html:not([data-theme]) {
            color-scheme: dark;
            --page: #09090b;
            --surface: #0d0d10;
            --surface-muted: #111114;
            --sidebar: #0d0d10;
            --text: #ededef;
            --text-muted: #a1a1aa;
            --border: #1f1f23;
            --border-strong: #71717b;
            --primary: #ededef;
            --on-primary: #09090b;
            --success: #3dd68c;
            --warning: #f6d77a;
            --danger: #f2a0a8;
            --on-danger: #09090b;
            --focus: #7aa7ff;
            --code-background: #121215;
            --hover: #17171b;
            --selected: #1e1e23;
        }
    }
}

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