:root {
  color-scheme: dark;

  --color-bg: #111111;
  --color-bg-soft: #151815;
  --color-panel: #1c1c1c;
  --color-panel-strong: #222620;
  --color-surface: #222620;
  --color-surface-raised: #1c1c1c;
  --color-text: #fafafa;
  --color-muted: #c9c9c9;
  --color-subtle: #92998b;
  --color-line: #4e3820;
  --color-accent: #d6b15e;
  --color-accent-strong: #e6c777;
  --color-accent-ink: #17130a;
  --color-brand-secondary: #7f9b7a;
  --color-brand-secondary-strong: #a8c49c;
  --color-brand-secondary-ink: #0f1710;
  --color-bar: var(--color-brand-secondary);
  --color-bar-strong: var(--color-brand-secondary-strong);
  --color-focus: #93c8ad;
  --color-danger: #e07a6f;

  --shadow-soft: 0 18px 50px rgba(0, 0, 0, 0.32);
  --shadow-tight: 0 10px 24px rgba(0, 0, 0, 0.22);
  --shadow-glow: 0 0 14px rgba(214, 177, 94, 0.16), 0 0 26px rgba(127, 155, 122, 0.06), inset 0 0 8px rgba(214, 177, 94, 0.06);
  --shadow-halo: 0 0 0 1px rgba(214, 177, 94, 0.18), 0 0 14px rgba(214, 177, 94, 0.13), 0 0 24px rgba(127, 155, 122, 0.08);
  --shadow-card-halo: 0 0 16px rgba(127, 155, 122, 0.045);
  --shadow-surface: inset 0 0 30px rgba(127, 155, 122, 0.035);
  --shadow-bar-glow: 0 0 12px rgba(127, 155, 122, 0.2);
  --shadow-link-glow: 0 0 6px rgba(214, 177, 94, 0.32);
  --shadow-footer: 0 -10px 34px rgba(0, 0, 0, 0.12);
  --shadow-control-hover: 0 0 14px rgba(214, 177, 94, 0.28), 0 0 26px rgba(214, 177, 94, 0.14);

  --radius: 8px;
  --max-width: 1080px;
  --content-width: 720px;
  --page-gutter: clamp(20px, 4vw, 40px);
  --header-height: 74px;
  --theme-transition: 220ms ease;
  --hover-transition: 160ms ease;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;

    --color-bg: #fbfaf4;
    --color-bg-soft: #eef1e8;
    --color-panel: #ffffff;
    --color-panel-strong: #eef1e8;
    --color-surface: #c9d8c1;
    --color-surface-raised: #f7f8f1;
    --color-text: #1a1a1a;
    --color-muted: #4d554d;
    --color-subtle: #71796a;
    --color-line: #d8cfbc;
    --color-accent: #80611f;
    --color-accent-strong: #634817;
    --color-accent-ink: #fff9e8;
    --color-brand-secondary: #6f8f6e;
    --color-brand-secondary-strong: #4f704e;
    --color-brand-secondary-ink: #f6fbf3;
    --color-bar: var(--color-brand-secondary);
    --color-bar-strong: var(--color-brand-secondary-strong);
    --color-focus: #267d70;
    --color-danger: #a5443d;

    --shadow-soft: 0 18px 46px rgba(43, 49, 36, 0.14);
    --shadow-tight: 0 10px 22px rgba(43, 49, 36, 0.12);
    --shadow-glow: 0 0 12px rgba(199, 155, 59, 0.13), 0 0 22px rgba(111, 143, 110, 0.07), inset 0 0 8px rgba(199, 155, 59, 0.06);
    --shadow-halo: 0 0 0 1px rgba(199, 155, 59, 0.16), 0 0 14px rgba(199, 155, 59, 0.1), 0 0 22px rgba(111, 143, 110, 0.08);
    --shadow-card-halo: 0 0 14px rgba(111, 143, 110, 0.055);
    --shadow-surface: inset 0 0 28px rgba(111, 143, 110, 0.055);
    --shadow-bar-glow: 0 0 10px rgba(79, 112, 78, 0.18);
    --shadow-link-glow: 0 0 6px rgba(199, 155, 59, 0.24);
    --shadow-footer: 0 -10px 32px rgba(43, 49, 36, 0.08);
    --shadow-control-hover: 0 0 14px rgba(199, 155, 59, 0.24), 0 0 26px rgba(111, 143, 110, 0.12);
  }
}

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

  --color-bg: #111111;
  --color-bg-soft: #151815;
  --color-panel: #1c1c1c;
  --color-panel-strong: #222620;
  --color-surface: #222620;
  --color-surface-raised: #1c1c1c;
  --color-text: #fafafa;
  --color-muted: #c9c9c9;
  --color-subtle: #92998b;
  --color-line: #4e3820;
  --color-accent: #d6b15e;
  --color-accent-strong: #e6c777;
  --color-accent-ink: #17130a;
  --color-brand-secondary: #7f9b7a;
  --color-brand-secondary-strong: #a8c49c;
  --color-brand-secondary-ink: #0f1710;
  --color-bar: var(--color-brand-secondary);
  --color-bar-strong: var(--color-brand-secondary-strong);
  --color-focus: #93c8ad;
  --color-danger: #e07a6f;

  --shadow-soft: 0 18px 50px rgba(0, 0, 0, 0.32);
  --shadow-tight: 0 10px 24px rgba(0, 0, 0, 0.22);
  --shadow-glow: 0 0 14px rgba(214, 177, 94, 0.16), 0 0 26px rgba(127, 155, 122, 0.06), inset 0 0 8px rgba(214, 177, 94, 0.06);
  --shadow-halo: 0 0 0 1px rgba(214, 177, 94, 0.18), 0 0 14px rgba(214, 177, 94, 0.13), 0 0 24px rgba(127, 155, 122, 0.08);
  --shadow-card-halo: 0 0 16px rgba(127, 155, 122, 0.045);
  --shadow-surface: inset 0 0 30px rgba(127, 155, 122, 0.035);
  --shadow-bar-glow: 0 0 12px rgba(127, 155, 122, 0.2);
  --shadow-link-glow: 0 0 6px rgba(214, 177, 94, 0.32);
  --shadow-footer: 0 -10px 34px rgba(0, 0, 0, 0.12);
  --shadow-control-hover: 0 0 14px rgba(214, 177, 94, 0.28), 0 0 26px rgba(214, 177, 94, 0.14);
}

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

  --color-bg: #fbfaf4;
  --color-bg-soft: #eef1e8;
  --color-panel: #ffffff;
  --color-panel-strong: #eef1e8;
  --color-surface: #c9d8c1;
  --color-surface-raised: #f7f8f1;
  --color-text: #1a1a1a;
  --color-muted: #4d554d;
  --color-subtle: #71796a;
  --color-line: #d8cfbc;
  --color-accent: #80611f;
  --color-accent-strong: #634817;
  --color-accent-ink: #fff9e8;
  --color-brand-secondary: #6f8f6e;
  --color-brand-secondary-strong: #4f704e;
  --color-brand-secondary-ink: #f6fbf3;
  --color-bar: var(--color-brand-secondary);
  --color-bar-strong: var(--color-brand-secondary-strong);
  --color-focus: #267d70;
  --color-danger: #a5443d;

  --shadow-soft: 0 18px 46px rgba(43, 49, 36, 0.14);
  --shadow-tight: 0 10px 22px rgba(43, 49, 36, 0.12);
  --shadow-glow: 0 0 12px rgba(199, 155, 59, 0.13), 0 0 22px rgba(111, 143, 110, 0.07), inset 0 0 8px rgba(199, 155, 59, 0.06);
  --shadow-halo: 0 0 0 1px rgba(199, 155, 59, 0.16), 0 0 14px rgba(199, 155, 59, 0.1), 0 0 22px rgba(111, 143, 110, 0.08);
  --shadow-card-halo: 0 0 14px rgba(111, 143, 110, 0.055);
  --shadow-surface: inset 0 0 28px rgba(111, 143, 110, 0.055);
  --shadow-bar-glow: 0 0 10px rgba(79, 112, 78, 0.18);
  --shadow-link-glow: 0 0 6px rgba(199, 155, 59, 0.24);
  --shadow-footer: 0 -10px 32px rgba(43, 49, 36, 0.08);
  --shadow-control-hover: 0 0 14px rgba(199, 155, 59, 0.24), 0 0 26px rgba(111, 143, 110, 0.12);
}