@import '_layout.css';
@import '_button.css';
@import '_editor.css';
@import '_sidebar.css';

:root {
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        'Segoe UI',
        sans-serif;
    color: #172033;
    background: #f5f7fb;
    font-synthesis: none;
    --background: #f5f7fb;
    --surface: #ffffff;
    --surface-raised: #f8fafc;
    --sidebar: #fbfcfe;
    --border: #e3e8f0;
    --text-strong: #111827;
    --text: #263247;
    --text-muted: #64748b;
    --text-subtle: #94a3b8;
    --accent: #525252;
    --accent-solid: #525252;
    --accent-soft: #f5f5f5;
    --success: #16a34a;
    --success-soft: #dcfce7;
    --warning: #d97706;
    --warning-soft: #fef3c7;
    --danger: #dc2626;
    --danger-soft: #fee2e2;
    --shadow: 0 1px 2px rgb(15 23 42 / 0.04), 0 8px 24px rgb(15 23 42 / 0.04);

    /* 기존 정적 컴포넌트 스타일을 현재 테마 변수에 연결한다. */
    --bg-primary: var(--background);
    --bg-surface: var(--surface);
    --bg-card: var(--surface-raised);
    --border-color: var(--border);
    --text-primary: var(--text-strong);
    --text-body: var(--text);
    --text-sub: var(--text-subtle);
    --success-color: var(--success);
    --success-bg: var(--success-soft);
    --warning-color: var(--warning);
    --warning-bg: var(--warning-soft);
    --danger-color: var(--danger);
    --danger-bg: var(--danger-soft);
    --info-color: var(--accent);
    --info-bg: var(--accent-soft);
}

html.dark {
    color-scheme: dark;
    color: #dce5f3;
    background: #0b1120;
    --background: #0b1120;
    --surface: #111827;
    --surface-raised: #172033;
    --sidebar: #0f172a;
    --border: #253047;
    --text-strong: #f8fafc;
    --text: #dce5f3;
    --text-muted: #94a3b8;
    --text-subtle: #64748b;
    --accent: #a3a3a3;
    --accent-solid: #525252;
    --accent-soft: rgb(163 163 163 / 0.14);
    --success: #4ade80;
    --success-soft: rgb(34 197 94 / 0.14);
    --warning: #fbbf24;
    --warning-soft: rgb(245 158 11 / 0.14);
    --danger: #f87171;
    --danger-soft: rgb(239 68 68 / 0.14);
    --shadow: 0 1px 2px rgb(0 0 0 / 0.16), 0 12px 30px rgb(0 0 0 / 0.12);
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-width: 320px;
    min-height: 100%;
}

body {
    background: var(--background);
    color: var(--text);
}

button,
a {
    font: inherit;
}

button:focus-visible,
a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}