/* 製図用紙と測量のインクを基調にした共通トークン。地図・データの色とは分ける。 */
:root {
    color-scheme: light;
    --color-canvas: #efeee8;
    --color-surface: #fffefa;
    --color-surface-alt: #f5f4ee;
    --color-surface-hover: #e9ece5;
    --color-text: #243b36;
    --color-muted: #59665e;
    --color-line: #d5d9cf;
    --color-line-strong: #7b897e;
    --color-primary: #246052;
    --color-primary-fill: #246052;
    --color-primary-fill-hover: #184b40;
    --color-primary-soft: #e7efe7;
    --color-danger: #a53f32;
    --color-danger-fill: #a53f32;
    --color-danger-hover: #843026;
    --color-focus: #a04c25;
    --color-data: #246052;
    --color-data-soft: #e7efe7;
    --color-layer: #34665e;
    --color-layer-soft: #e8efea;
    --color-zone: #52683b;
    --color-zone-soft: #edf0e2;
    --color-marker: #9b4b31;
    --color-marker-soft: #f7ece4;
    --color-measure: #3f6470;
    --color-measure-soft: #e8eff0;
    --color-print: #575f58;
    --color-print-soft: #eeefea;
    --color-edited: #fff1cd;
    --color-error-soft: #fae8e3;
    --color-warning: #79501b;
    --color-warning-soft: #fcf2d9;
    --color-brand-ink: #173f3b;
    --color-brand-paper: #f6f4eb;
    --color-brand-point: #cb704b;
    --shadow-panel: 0 3px 12px rgb(29 51 40 / 10%);
    --shadow-drawer: 8px 0 32px rgb(20 37 30 / 18%);
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --header-height: 68px;
    font-family: "Segoe UI", "Yu Gothic UI", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    font-synthesis: none;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --color-canvas: #17221e;
    --color-surface: #202f28;
    --color-surface-alt: #28382f;
    --color-surface-hover: #34473c;
    --color-text: #f0f1e8;
    --color-muted: #b9c5b9;
    --color-line: #44594a;
    --color-line-strong: #829785;
    --color-primary: #a4d7be;
    --color-primary-fill: #356d57;
    --color-primary-fill-hover: #2d5d4b;
    --color-primary-soft: #2a4537;
    --color-danger: #f0ab98;
    --color-danger-fill: #9a4034;
    --color-danger-hover: #843026;
    --color-focus: #f1bc86;
    --color-data: #a4d7be;
    --color-data-soft: #2a4537;
    --color-layer: #add4c5;
    --color-layer-soft: #2a4237;
    --color-zone: #c6d89a;
    --color-zone-soft: #35432b;
    --color-marker: #efb89d;
    --color-marker-soft: #4a352b;
    --color-measure: #b2d1d9;
    --color-measure-soft: #2a3e42;
    --color-print: #c8d0bf;
    --color-print-soft: #353d32;
    --color-edited: #514326;
    --color-error-soft: #4a2c25;
    --color-warning: #eed29b;
    --color-warning-soft: #453c26;
    --shadow-panel: 0 3px 12px rgb(0 0 0 / 18%);
    --shadow-drawer: 8px 0 32px rgb(0 0 0 / 32%);
}

:root[data-theme="contrast"] {
    --color-canvas: #ffffff;
    --color-surface: #ffffff;
    --color-surface-alt: #ffffff;
    --color-surface-hover: #ffff00;
    --color-text: #000000;
    --color-muted: #202020;
    --color-line: #000000;
    --color-line-strong: #000000;
    --color-primary: #00543e;
    --color-primary-fill: #00543e;
    --color-primary-fill-hover: #003928;
    --color-primary-soft: #ffffff;
    --color-danger: #8b0000;
    --color-danger-fill: #8b0000;
    --color-danger-hover: #620000;
    --color-focus: #9f4300;
    --color-data: #00543e;
    --color-data-soft: #ffffff;
    --color-layer: #00543e;
    --color-layer-soft: #ffffff;
    --color-zone: #304b00;
    --color-zone-soft: #ffffff;
    --color-marker: #7a3200;
    --color-marker-soft: #ffffff;
    --color-measure: #00505b;
    --color-measure-soft: #ffffff;
    --color-print: #202020;
    --color-print-soft: #ffffff;
    --color-edited: #ffff00;
    --color-error-soft: #ffffff;
    --color-warning: #663b00;
    --color-warning-soft: #ffffff;
    --shadow-panel: none;
    --shadow-drawer: none;
}

* { box-sizing: border-box; }
html, body, #app { width: 100%; min-width: 0; min-height: 100%; margin: 0; }
body { min-height: 100vh; overflow: hidden; color: var(--color-text); background: var(--color-canvas); }
button, input, select, textarea { font: inherit; }
button, select, input[type="checkbox"], input[type="radio"], input[type="file"] { cursor: pointer; }
input[type="checkbox"], input[type="radio"], progress { accent-color: var(--color-primary-fill); }
button:disabled, input:disabled, select:disabled, textarea:disabled { cursor: not-allowed; opacity: .52; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
}
button { border: 0; }
a { color: var(--color-primary); text-underline-offset: .2em; }
h1, h2, h3 { line-height: 1.4; text-wrap: pretty; }
h1, h2, h3, p { margin-top: 0; }
button, input, select, textarea { border-radius: var(--radius-sm); }
.brand-wordmark { display: block; }
.brand-wordmark--dark { display: none !important; }
:root[data-theme="dark"] .brand-wordmark--light { display: none !important; }
:root[data-theme="dark"] .brand-wordmark--dark { display: block !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.fatal-error { display: grid; place-content: center; gap: .5rem; min-height: 100vh; padding: 2rem; text-align: center; }
.fatal-error h1 { margin-bottom: 0; }
.boot-mask { position: fixed; z-index: 1000; inset: 0; display: grid; place-content: center; gap: 1.25rem; justify-items: center; color: var(--color-muted); background: var(--color-surface-alt); font-size: .85rem; }
.boot-mask__logo { width: min(260px, 70vw); height: auto; }
.boot-mask__spinner { width: 24px; height: 24px; border: 2px solid var(--color-line); border-top-color: var(--color-primary); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

:root[data-theme="contrast"] button,
:root[data-theme="contrast"] input,
:root[data-theme="contrast"] select,
:root[data-theme="contrast"] textarea,
:root[data-theme="contrast"] .side-panel { border-width: 2px; }

@media (prefers-reduced-motion: reduce) { .boot-mask__spinner { animation: none; } }