:root {
    color-scheme: light;
    --color-bg: #edf2f4;
    --color-canvas: #f0f4f6;
    --color-surface: #fbfdfd;
    --color-surface-soft: #e4edef;
    --color-surface-strong: #d6e3e7;
    --color-ink: #17343e;
    --color-ink-soft: #49616d;
    --color-line: #c5d4db;
    --color-line-strong: #718994;
    --color-brand: #15596d;
    --color-brand-strong: #103f50;
    --color-brand-soft: #dcebf0;
    --color-accent: #1e7186;
    --color-accent-soft: #deedf2;
    --color-accent-strong: #155c70;
    --color-focus: #91612c;
    --color-danger: #a33d52;
    --color-chart: #102a34;
    --color-on-brand: #f2fbfd;
    --color-depth: #0b242d;
    --color-depth-raised: #102e38;
    --color-depth-ink: #e9f3f6;
    --color-depth-soft: #afc6cf;
    --color-depth-line: #385c6a;
    --color-depth-edge: #648996;
    --color-current: #83cbd8;
    --color-glimmer: #e5d3a6;
    --color-idea: #f2dfa3;
    --color-idea-hover: #faebbc;
    --color-idea-edge: #927237;
    --color-idea-ink: #806121;
    --color-on-idea: #17343e;
    --color-editor-bg: #0b242d;
    --color-editor-near: #123541;
    --color-canvas-ink: #bfd5df;
    --color-canvas-grid: #294e60;
    --color-canvas-band: #133744;
    --color-edge: #79b9cd;
    --color-selection: #e5d3a6;
    --color-node-fill: #f5f9fb;
    --color-node-ink: #17343e;
    --color-node-edge: #8faab7;
    --color-node-section: #dcebf0;
    --color-node-root: #164b5c;
    --color-node-root-ink: #f0f8fa;
    --color-critical-bg: #f9e7ec;
    --color-critical-ink: #742d40;
    --color-critical-line: #bd6179;
    --color-warning-bg: #fff2dd;
    --color-warning-ink: #765125;
    --color-warning-line: #b28a4d;
    --color-good-bg: #deeee7;
    --color-good-ink: #285847;
    --color-good-line: #7ea592;
    --shadow-small: 0 2px 7px rgb(8 35 48 / 7%);
    --shadow-float: 0 14px 36px rgb(5 25 38 / 22%);
    --radius-small: 2px;
    --radius-medium: 2px;
    --radius: 2px;
    --font-display: "Yu Gothic UI", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    --font-mono: "Cascadia Code", Consolas, monospace;
    --topbar-height: 4rem;
    font-family: "Yu Gothic UI", "Hiragino Kaku Gothic ProN", Meiryo, system-ui, sans-serif;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
}

.depth-surface {
    color-scheme: dark;
    --color-bg: var(--color-depth);
    --color-surface: var(--color-depth-raised);
    --color-surface-soft: #153a46;
    --color-ink: var(--color-depth-ink);
    --color-ink-soft: var(--color-depth-soft);
    --color-line: var(--color-depth-line);
    --color-line-strong: var(--color-depth-edge);
    --color-brand: #a6dce7;
    --color-brand-strong: var(--color-current);
    --color-brand-soft: #19424f;
    --color-on-brand: #0b2934;
    --color-focus: var(--color-glimmer);
    --color-idea-ink: var(--color-idea);
    --color-danger: #f3a3b1;
    color: var(--color-ink);
}

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    min-width: 320px;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: var(--color-bg);
    color: var(--color-ink);
}

body,
button,
input,
textarea,
select {
    font: inherit;
}

button,
input,
textarea,
select {
    color: inherit;
}

button {
    -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
a:focus-visible,
[tabindex]:focus-visible,
[contenteditable]:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
}

.visually-hidden {
    position: absolute !important;
    overflow: hidden !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
}

.skip-link {
    position: fixed;
    z-index: 1000;
    top: 0.5rem;
    left: 0.5rem;
    padding: 0.6rem 0.85rem;
    transform: translateY(-160%);
    border-radius: var(--radius-small);
    background: var(--color-brand-strong);
    color: var(--color-on-brand);
}

.skip-link:focus {
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --color-bg: #091e27;
        --color-canvas: #0c242e;
        --color-surface: #122f3a;
        --color-surface-soft: #183c48;
        --color-surface-strong: #214956;
        --color-ink: #e6f1f5;
        --color-ink-soft: #a8c3cf;
        --color-line: #2d5362;
        --color-line-strong: #668995;
        --color-brand: #80cadb;
        --color-brand-strong: #ade5ed;
        --color-brand-soft: #1b4654;
        --color-accent: #9ed9e7;
        --color-accent-soft: #1e4857;
        --color-accent-strong: #b8e8f0;
        --color-focus: #e5ca90;
        --color-danger: #f194a5;
        --color-on-brand: #092a35;
        --color-idea-ink: var(--color-idea);
        --color-node-fill: #153d4c;
        --color-node-ink: #e3f0f5;
        --color-node-edge: #6294a7;
        --color-node-section: #234f5f;
        --color-critical-bg: #482d3b;
        --color-critical-ink: #ffe5eb;
        --color-critical-line: #e294a5;
        --color-warning-bg: #3e3425;
        --color-warning-ink: #eed0a2;
        --color-warning-line: #be9a63;
        --color-good-bg: #1e403b;
        --color-good-ink: #c3e3d2;
        --color-good-line: #6f9f91;
        --shadow-small: 0 4px 16px rgb(0 0 0 / 25%);
        --shadow-float: 0 18px 55px rgb(0 0 0 / 48%);
    }
}