/* 매일유틸 디자인 토큰 — 색상은 여기서만 정의한다.
   메인 페이지(index.css)와 도구 페이지(common.css)가 모두 이 파일을 참조하므로
   여기 한 곳만 고치면 사이트 전체에 반영된다. */

:root {
    --accent-color: #1F5673;
    --accent-light: #EAEEF1;
    --accent-hover: #164055;
    --primary-color: #17181B;
    --secondary-color: #4B5058;
    --success-color: #1F7A5C;
    --danger-color: #C0392F;
    --warning-color: #B77A1B;
    --bg-primary: #F5F4F1;
    --bg-surface: #FFFFFF;
    --text-primary: #17181B;
    --text-secondary: #4B5058;
    --text-muted: #898E95;
    --border-color: #E3E1DB;
    --border-hover: #C6C3BA;
    --accent-color-alt: #E3E1DB;
    --on-accent: #FFFFFF;          /* accent 배경 위의 글자색 */
    --on-status: #FFFFFF;          /* 성공/경고/실패 배경 위의 글자색 (양쪽 테마 동일) */

    /* 상태 메시지 (오류/성공 안내 박스) */
    --danger-bg: #FEE2E2;
    --danger-text: #DC2626;
    --danger-border: #FECACA;
    --success-bg: #D1FAE5;
    --success-text: #059669;
    --success-border: #A7F3D0;

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
    --shadow-md: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 2px 8px 0 rgba(0, 0, 0, 0.07);
}

body.dark-mode {
    --accent-color: #8CB8D6;
    --accent-hover: #A6CBE4;
    --accent-light: #1C2A33;
    --bg-primary: #141416;
    --bg-surface: #1B1D20;
    --text-primary: #F0EFEC;
    --text-secondary: #A8ADB4;
    --text-muted: #787D84;
    --border-color: #2A2D31;
    --border-hover: #3B3F45;
    --primary-color: #F0EFEC;
    --accent-color-alt: #2A2D31;
    --on-accent: #10171C;

    --danger-bg: #7F1D1D;
    --danger-text: #FCA5A5;
    --danger-border: #991B1B;
    --success-bg: #064E3B;
    --success-text: #6EE7B7;
    --success-border: #065F46;

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 1px 3px 0 rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 2px 8px 0 rgba(0, 0, 0, 0.4);
}