/* Theme tokens */
:root,
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d1117;
  --fg: #e6edf3;
  --muted: #848d97;
  --muted-strong: #c9d1d9;
  --accent: #58a6ff;
  --accent-2: #3081f7;
  --accent-fg: #ffffff;
  --accent-soft: rgba(88, 166, 255, 0.15);
  --accent-strong: rgba(88, 166, 255, 0.7);
  --surface: rgba(22, 27, 34, 0.7);
  --surface-2: rgba(33, 38, 45, 0.7);
  --surface-alt: rgba(22, 27, 34, 0.6);
  --surface-header: rgba(13, 17, 23, 0.85);
  --surface-menu: rgba(22, 27, 34, 0.95);
  --surface-panel: rgba(22, 27, 34, 0.92);
  --surface-panel-strong: rgba(33, 38, 45, 0.96);
  --surface-muted: #161b22;
  --surface-cookie: rgba(22, 27, 34, 0.95);
  --surface-graph: #010409;
  --surface-canvas: rgba(13, 17, 23, 0.9);
  --border: #30363d;
  --border-soft: #21262d;
  --border-subtle: rgba(240, 246, 252, 0.1);
  --border-strong: #8b949e;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
  --shadow-soft: 0 16px 32px rgba(0, 0, 0, 0.35);
  --shadow-strong: 0 20px 60px rgba(0, 0, 0, 0.6);
  --shadow-card: 8px 8px 18px rgba(0, 0, 0, 0.25), -4px -4px 10px rgba(255, 255, 255, 0.02);
  --shadow-inset: rgba(0, 0, 0, 0.25);
  --hero-drop-shadow: drop-shadow(0 80px 160px rgba(0, 0, 0, 0.85));
  --btn-bg: #21262d;
  --btn-border: rgba(240, 246, 252, 0.1);
  --btn-fg: #c9d1d9;
  --btn-hover-bg: #30363d;
  --btn-outline-bg: #f0f6fc;
  --btn-outline-border: rgba(240, 246, 252, 0.1);
  --btn-outline-fg: #1f2328;
  --btn-outline-hover-bg: #d0d7de;
  --btn-outline-hover-border: rgba(240, 246, 252, 0.1);
  --btn-secondary-bg: #21262d;
  --btn-secondary-border: rgba(240, 246, 252, 0.1);
  --btn-secondary-fg: #c9d1d9;
  --btn-secondary-hover-bg: #30363d;
  --btn-secondary-hover-border: #8b949e;
  --btn-accent-hover-bg: #409eff;
  --btn-accent-hover-fg: var(--accent-fg);
  --btn-accent-hover-border: var(--accent);
  --btn-accent-hover-shadow: 0 10px 24px rgba(0, 0, 0, 0.35), 0 0 0 2px rgba(88, 166, 255, 0.2);
  --table-bg: rgba(240, 246, 252, 0.06);
  --table-row: transparent;
  --table-row-alt: rgba(172, 185, 200, 0.035);
  --table-divider: #21262d;
  --table-row-optional: rgba(86, 180, 255, 0.08);
  --table-row-optional-border: rgba(86, 180, 255, 0.45);
  --table-row-optional-hover: rgba(86, 180, 255, 0.12);
  --table-row-alternative: rgba(255, 198, 92, 0.08);
  --table-row-alternative-border: rgba(255, 198, 92, 0.5);
  --table-row-alternative-hover: rgba(255, 198, 92, 0.11);
  --table-row-choice: rgba(255, 255, 255, 0.04);
  --table-card-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03));
  --table-card-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  --table-card-inset: rgba(255, 255, 255, 0.04);
  --table-card-active-shadow: 0 14px 34px rgba(0, 0, 0, 0.42);
  --table-card-focus-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
  --badge-required-bg: rgba(255, 255, 255, 0.06);
  --badge-required-border: rgba(255, 255, 255, 0.16);
  --badge-required-fg: var(--muted);
  --badge-optional-bg: rgba(86, 180, 255, 0.18);
  --badge-optional-border: rgba(86, 180, 255, 0.4);
  --badge-optional-fg: #cfe9ff;
  --badge-alternative-bg: rgba(255, 198, 92, 0.18);
  --badge-alternative-border: rgba(255, 198, 92, 0.45);
  --badge-alternative-fg: #ffe3b3;
  --badge-choice-bg: rgba(186, 133, 255, 0.2);
  --badge-choice-border: rgba(186, 133, 255, 0.45);
  --badge-choice-fg: #ead7ff;
  --legend-required: rgba(255, 255, 255, 0.85);
  --legend-optional: #cfe9ff;
  --legend-choice: #ead7ff;
  --overlay: rgba(10, 12, 17, 0.72);
  --overlay-strong: rgba(0, 0, 0, 0.85);
  --viewer-stage-bg: radial-gradient(circle at top, rgba(20, 22, 33, 0.9), rgba(8, 9, 13, 0.95));
  --link-muted: #8da2b8;
  --cookie-text: #c7cbd1;
  --danger: #f2b3b3;
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --bg: #f5f6f8;
    --fg: #111317;
    --muted: rgba(17, 19, 23, 0.6);
    --muted-strong: rgba(17, 19, 23, 0.82);
    --accent: #7fb84c;
    --accent-2: #6ea03a;
    --accent-fg: #0f1115;
    --accent-soft: rgba(127, 184, 76, 0.2);
    --accent-strong: rgba(127, 184, 76, 0.55);
    --surface: #ffffff;
    --surface-2: #f0f2f5;
    --surface-alt: #f8f9fb;
    --surface-header: rgba(245, 246, 248, 0.92);
    --surface-menu: rgba(255, 255, 255, 0.98);
    --surface-panel: #ffffff;
    --surface-panel-strong: #f6f8fb;
    --surface-muted: #e4e6ea;
    --surface-cookie: rgba(255, 255, 255, 0.95);
    --surface-graph: #ffffff;
    --surface-canvas: #f1f3f6;
    --border: rgba(17, 19, 23, 0.12);
    --border-soft: rgba(17, 19, 23, 0.08);
    --border-subtle: rgba(17, 19, 23, 0.06);
    --border-strong: rgba(17, 19, 23, 0.28);
    --shadow: 0 30px 90px rgba(17, 19, 23, 0.12);
    --shadow-soft: 0 18px 40px rgba(17, 19, 23, 0.08);
    --shadow-strong: 0 22px 70px rgba(17, 19, 23, 0.18);
    --shadow-card: 6px 6px 16px rgba(17, 19, 23, 0.08), -4px -4px 10px rgba(255, 255, 255, 0.6);
    --shadow-inset: rgba(17, 19, 23, 0.12);
    --hero-drop-shadow: drop-shadow(0 60px 130px rgba(17, 19, 23, 0.18));
    --btn-bg: rgba(255, 255, 255, 0.7);
    --btn-border: rgba(17, 19, 23, 0.18);
    --btn-fg: rgba(17, 19, 23, 0.7);
    --btn-hover-bg: #ffffff;
    --btn-outline-bg: #ffffff;
    --btn-outline-border: rgba(17, 19, 23, 0.2);
    --btn-outline-fg: #111317;
    --btn-outline-hover-bg: #f1f3f6;
    --btn-outline-hover-border: rgba(17, 19, 23, 0.3);
    --btn-secondary-bg: #ffffff;
    --btn-secondary-border: rgba(17, 19, 23, 0.25);
    --btn-secondary-fg: #111317;
    --btn-secondary-hover-bg: rgba(127, 184, 76, 0.18);
    --btn-secondary-hover-border: rgba(127, 184, 76, 0.55);
    --btn-accent-hover-bg: var(--btn-hover-bg);
    --btn-accent-hover-fg: var(--accent-fg);
    --btn-accent-hover-border: var(--border-strong);
    --btn-accent-hover-shadow: none;
    --table-bg: #f1f3f6;
    --table-row: #ffffff;
    --table-row-alt: #f7f8fa;
    --table-divider: rgba(17, 19, 23, 0.08);
    --table-row-optional: rgba(86, 145, 208, 0.12);
    --table-row-optional-border: rgba(86, 145, 208, 0.4);
    --table-row-optional-hover: rgba(86, 145, 208, 0.18);
    --table-row-alternative: rgba(255, 198, 92, 0.2);
    --table-row-alternative-border: rgba(255, 198, 92, 0.5);
    --table-row-alternative-hover: rgba(255, 198, 92, 0.28);
    --table-row-choice: #f0f2f5;
    --table-card-bg: linear-gradient(180deg, #ffffff, #f4f6f9);
    --table-card-shadow: 0 10px 22px rgba(17, 19, 23, 0.12);
    --table-card-inset: rgba(255, 255, 255, 0.6);
    --table-card-active-shadow: 0 14px 26px rgba(17, 19, 23, 0.18);
    --table-card-focus-shadow: 0 18px 30px rgba(17, 19, 23, 0.2);
    --badge-required-bg: rgba(17, 19, 23, 0.06);
    --badge-required-border: rgba(17, 19, 23, 0.16);
    --badge-required-fg: rgba(17, 19, 23, 0.7);
    --badge-optional-bg: rgba(86, 145, 208, 0.18);
    --badge-optional-border: rgba(86, 145, 208, 0.45);
    --badge-optional-fg: #1f4f7a;
    --badge-alternative-bg: rgba(255, 198, 92, 0.25);
    --badge-alternative-border: rgba(255, 198, 92, 0.55);
    --badge-alternative-fg: #7a4a00;
    --badge-choice-bg: rgba(171, 133, 220, 0.2);
    --badge-choice-border: rgba(171, 133, 220, 0.5);
    --badge-choice-fg: #4a2a78;
    --legend-required: rgba(17, 19, 23, 0.85);
    --legend-optional: #1f4f7a;
    --legend-choice: #4a2a78;
    --overlay: rgba(233, 236, 241, 0.82);
    --overlay-strong: rgba(20, 22, 26, 0.7);
    --viewer-stage-bg: radial-gradient(circle at top, rgba(247, 249, 252, 0.95), rgba(230, 233, 238, 0.95));
    --link-muted: #5a6d85;
    --cookie-text: #56606c;
    --danger: #b23a3a;
  }
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f0f2f5;
  --fg: #1f2328;
  --muted: rgba(31, 35, 40, 0.65);
  --muted-strong: rgba(31, 35, 40, 0.85);
  --accent: #78a945;
  --accent-2: #699839;
  --accent-fg: #ffffff;
  --accent-soft: rgba(120, 169, 69, 0.15);
  --accent-strong: rgba(120, 169, 69, 0.5);
  --surface: #fafbfc;
  --surface-2: #f3f5f8;
  --surface-alt: #f8f9fb;
  --surface-header: rgba(240, 242, 245, 0.92);
  --surface-menu: rgba(250, 251, 252, 0.98);
  --surface-panel: #ffffff;
  --surface-panel-strong: #f6f8fb;
  --surface-muted: #e9ecf0;
  --surface-cookie: rgba(255, 255, 255, 0.95);
  --surface-graph: #f7f9fc;
  --surface-canvas: #f1f3f6;
  --border: rgba(31, 35, 40, 0.1);
  --border-soft: rgba(31, 35, 40, 0.07);
  --border-subtle: rgba(31, 35, 40, 0.05);
  --border-strong: rgba(31, 35, 40, 0.22);
  --shadow: 0 25px 80px rgba(31, 35, 40, 0.1);
  --shadow-soft: 0 15px 35px rgba(31, 35, 40, 0.07);
  --shadow-strong: 0 20px 60px rgba(31, 35, 40, 0.15);
  --shadow-card: 4px 4px 12px rgba(31, 35, 40, 0.07), -3px -3px 8px rgba(255, 255, 255, 0.7);
  --shadow-inset: rgba(31, 35, 40, 0.1);
  --hero-drop-shadow: drop-shadow(0 50px 110px rgba(31, 35, 40, 0.15));
  --btn-bg: rgba(250, 251, 252, 0.7);
  --btn-border: rgba(31, 35, 40, 0.15);
  --btn-fg: rgba(31, 35, 40, 0.75);
  --btn-hover-bg: #ffffff;
  --btn-outline-bg: #f6f8fa;
  --btn-outline-border: rgba(31, 35, 40, 0.15);
  --btn-outline-fg: #1f2328;
  --btn-outline-hover-bg: #f0f2f5;
  --btn-outline-hover-border: rgba(31, 35, 40, 0.25);
  --btn-secondary-bg: #fafbfc;
  --btn-secondary-border: rgba(31, 35, 40, 0.2);
  --btn-secondary-fg: #1f2328;
  --btn-secondary-hover-bg: rgba(120, 169, 69, 0.12);
  --btn-secondary-hover-border: rgba(120, 169, 69, 0.5);
  --btn-accent-hover-bg: var(--accent-2);
  --btn-accent-hover-fg: var(--accent-fg);
  --btn-accent-hover-border: var(--accent-2);
  --btn-accent-hover-shadow: 0 8px 20px rgba(120, 169, 69, 0.3);
  --table-bg: #f0f2f5;
  --table-row: #ffffff;
  --table-row-alt: #f8f9fb;
  --table-divider: rgba(31, 35, 40, 0.07);
  --table-row-optional: rgba(86, 145, 208, 0.1);
  --table-row-optional-border: rgba(86, 145, 208, 0.35);
  --table-row-optional-hover: rgba(86, 145, 208, 0.15);
  --table-row-alternative: rgba(255, 198, 92, 0.18);
  --table-row-alternative-border: rgba(255, 198, 92, 0.45);
  --table-row-alternative-hover: rgba(255, 198, 92, 0.25);
  --table-row-choice: #f0f2f5;
  --table-card-bg: linear-gradient(180deg, #fafbfc, #f4f6f9);
  --table-card-shadow: 0 8px 20px rgba(31, 35, 40, 0.1);
  --table-card-inset: rgba(255, 255, 255, 0.5);
  --table-card-active-shadow: 0 12px 24px rgba(31, 35, 40, 0.15);
  --table-card-focus-shadow: 0 16px 28px rgba(31, 35, 40, 0.18);
  --badge-required-bg: rgba(31, 35, 40, 0.05);
  --badge-required-border: rgba(31, 35, 40, 0.14);
  --badge-required-fg: rgba(31, 35, 40, 0.7);
  --badge-optional-bg: rgba(86, 145, 208, 0.15);
  --badge-optional-border: rgba(86, 145, 208, 0.4);
  --badge-optional-fg: #1f4f7a;
  --badge-alternative-bg: rgba(255, 198, 92, 0.22);
  --badge-alternative-border: rgba(255, 198, 92, 0.5);
  --badge-alternative-fg: #7a4a00;
  --badge-choice-bg: rgba(171, 133, 220, 0.18);
  --badge-choice-border: rgba(171, 133, 220, 0.45);
  --badge-choice-fg: #4a2a78;
  --legend-required: rgba(31, 35, 40, 0.85);
  --legend-optional: #1f4f7a;
  --legend-choice: #4a2a78;
  --overlay: rgba(233, 236, 241, 0.82);
  --overlay-strong: rgba(20, 22, 26, 0.7);
  --viewer-stage-bg: radial-gradient(circle at top, rgba(247, 249, 252, 0.95), rgba(230, 233, 238, 0.95));
  --link-muted: #5a6d85;
  --cookie-text: #56606c;
  --danger: #b23a3a;
}

@media (pointer: coarse), (max-width: 900px) {
  :root,
  html[data-theme="dark"] {
    --border: rgba(255, 255, 255, 0.2);
    --border-soft: rgba(255, 255, 255, 0.14);
    --border-subtle: rgba(255, 255, 255, 0.1);
    --btn-border: var(--border);
    --table-divider: var(--border-soft);
  }

  @media (prefers-color-scheme: light) {
    :root {
      --border: rgba(17, 19, 23, 0.18);
      --border-soft: rgba(17, 19, 23, 0.14);
      --border-subtle: rgba(17, 19, 23, 0.1);
      --btn-border: var(--border);
      --table-divider: var(--border-soft);
    }
  }

  html[data-theme="light"] {
    --border: rgba(17, 19, 23, 0.18);
    --border-soft: rgba(17, 19, 23, 0.14);
    --border-subtle: rgba(17, 19, 23, 0.1);
    --btn-border: var(--border);
    --table-divider: var(--border-soft);
  }
}

@media (max-width: 768px) {
  :root,
  html[data-theme="dark"] {
    --muted: rgba(249, 250, 251, 0.72);
    --muted-strong: rgba(249, 250, 251, 0.9);
    --border-soft: rgba(255, 255, 255, 0.16);
    --border-subtle: rgba(255, 255, 255, 0.12);
    --btn-outline-bg: #f4f5f7;
    --btn-outline-border: rgba(0, 0, 0, 0.25);
    --btn-outline-fg: #0b0d12;
    --btn-outline-hover-bg: #e6e9ee;
    --btn-outline-hover-border: rgba(0, 0, 0, 0.35);
    --badge-required-bg: rgba(255, 255, 255, 0.1);
    --badge-required-border: rgba(255, 255, 255, 0.24);
    --badge-required-fg: rgba(255, 255, 255, 0.9);
    --badge-optional-bg: rgba(86, 180, 255, 0.26);
    --badge-optional-border: rgba(86, 180, 255, 0.55);
    --badge-optional-fg: #e2f1ff;
    --badge-alternative-bg: rgba(255, 198, 92, 0.26);
    --badge-alternative-border: rgba(255, 198, 92, 0.6);
    --badge-alternative-fg: #ffe7bf;
    --badge-choice-bg: rgba(186, 133, 255, 0.28);
    --badge-choice-border: rgba(186, 133, 255, 0.6);
    --badge-choice-fg: #f0e1ff;
  }

  html[data-theme="light"] {
    --muted: rgba(17, 19, 23, 0.82);
    --muted-strong: rgba(17, 19, 23, 0.95);
    --border: rgba(17, 19, 23, 0.24);
    --border-soft: rgba(17, 19, 23, 0.28);
    --border-subtle: rgba(17, 19, 23, 0.2);
    --legend-required: rgba(17, 19, 23, 0.95);
    --legend-optional: #143b5f;
    --legend-choice: #351658;
    --btn-outline-bg: #ffffff;
    --btn-outline-border: rgba(17, 19, 23, 0.52);
    --btn-outline-fg: #0b0d12;
    --btn-outline-hover-bg: #e3e7ed;
    --btn-outline-hover-border: rgba(17, 19, 23, 0.62);
    --badge-required-bg: rgba(17, 19, 23, 0.18);
    --badge-required-border: rgba(17, 19, 23, 0.45);
    --badge-required-fg: rgba(17, 19, 23, 0.95);
    --badge-optional-bg: rgba(86, 145, 208, 0.35);
    --badge-optional-border: rgba(86, 145, 208, 0.75);
    --badge-optional-fg: #0f2c45;
    --badge-alternative-bg: rgba(255, 198, 92, 0.3);
    --badge-alternative-border: rgba(255, 198, 92, 0.65);
    --badge-alternative-fg: #5c3600;
    --badge-choice-bg: rgba(171, 133, 220, 0.38);
    --badge-choice-border: rgba(171, 133, 220, 0.78);
    --badge-choice-fg: #2f104f;
  }

  html[data-theme="light"] .nav-more-menu a {
    color: var(--fg);
  }

  html[data-theme="light"] .legend-note,
  html[data-theme="light"] .legend-desc {
    color: var(--muted-strong);
  }
}

@media (prefers-color-scheme: light) and (max-width: 768px) {
  :root {
    --muted: rgba(17, 19, 23, 0.82);
    --muted-strong: rgba(17, 19, 23, 0.95);
    --border: rgba(17, 19, 23, 0.24);
    --border-soft: rgba(17, 19, 23, 0.28);
    --border-subtle: rgba(17, 19, 23, 0.2);
    --legend-required: rgba(17, 19, 23, 0.95);
    --legend-optional: #143b5f;
    --legend-choice: #351658;
    --btn-outline-bg: #ffffff;
    --btn-outline-border: rgba(17, 19, 23, 0.52);
    --btn-outline-fg: #0b0d12;
    --btn-outline-hover-bg: #e3e7ed;
    --btn-outline-hover-border: rgba(17, 19, 23, 0.62);
    --badge-required-bg: rgba(17, 19, 23, 0.18);
    --badge-required-border: rgba(17, 19, 23, 0.45);
    --badge-required-fg: rgba(17, 19, 23, 0.95);
    --badge-optional-bg: rgba(86, 145, 208, 0.35);
    --badge-optional-border: rgba(86, 145, 208, 0.75);
    --badge-optional-fg: #0f2c45;
    --badge-alternative-bg: rgba(255, 198, 92, 0.3);
    --badge-alternative-border: rgba(255, 198, 92, 0.65);
    --badge-alternative-fg: #5c3600;
    --badge-choice-bg: rgba(171, 133, 220, 0.38);
    --badge-choice-border: rgba(171, 133, 220, 0.78);
    --badge-choice-fg: #2f104f;
  }

  :root .nav-more-menu a {
    color: var(--fg);
  }

  :root .legend-note,
  :root .legend-desc {
    color: var(--muted-strong);
  }
}