/* ============ Light (Standard) ============ */
:root,
:root[data-theme="light"] {
  color-scheme: light;

  --bg: #f3f5f9;
  --bg-sunken: #e9edf4;
  --surface-muted: #f8f9fc;
  --surface: #ffffff;
  --surface-2: #eef1f6;
  --surface-3: #e3e8f0;
  --surface-raised: #ffffff;
  --surface-raised-hover: #eef1f6;
  --input-bg: #ffffff;
  --header-bg: rgba(243, 245, 249, 0.85);
  --backdrop: rgba(26, 36, 56, 0.45);
  --glass: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(26, 36, 56, 0.08);

  --border: #dfe4ec;
  --border-strong: #c5cedc;
  --border-control: #848ea1;
  --border-raised: #dfe4ec;

  --heading: #1a2438;
  --text: #1f242e;
  --text-muted: #586174;
  --text-faint: #6a7488;
  --text-disabled: #9aa3b3;

  --accent: #1a2438;
  --accent-hover: #24324c;
  --accent-active: #121a2b;
  --on-accent: #ffffff;
  --on-accent-muted: #9aa8c3;
  --accent-subtle: rgba(26, 36, 56, 0.07);
  --accent-border: rgba(26, 36, 56, 0.22);
  --focus-ring: rgba(26, 36, 56, 0.18);

  --highlight: rgba(245, 185, 90, 0.45);
  --selection: rgba(245, 185, 90, 0.45);

  --link: #2c5ad6;
  --link-hover: #1e44b0;

  --info: #2c5ad6;
  --info-subtle: rgba(44, 90, 214, 0.09);
  --info-border: rgba(44, 90, 214, 0.28);
  --success: #0b7352;
  --success-subtle: rgba(11, 115, 82, 0.09);
  --success-border: rgba(11, 115, 82, 0.28);
  --warning: #a84b0f;
  --warning-subtle: rgba(168, 75, 15, 0.09);
  --warning-border: rgba(168, 75, 15, 0.28);
  --danger: #b93333;
  --danger-subtle: rgba(185, 51, 51, 0.09);
  --danger-subtle-hover: rgba(185, 51, 51, 0.15);
  --danger-border: rgba(185, 51, 51, 0.28);

  --knob: #ffffff;
  --skeleton-base: #eef1f6;
  --skeleton-shine: #f8f9fc;
  --tooltip-bg: #1a2438;
  --tooltip-text: #ffffff;
  --toast-bg: #1a2438;
  --toast-text: #e6ebf5;
  --toast-border: transparent;
  --toast-icon-success: #3fd0a0;
  --toast-icon-error: #f47a7a;
  --toast-icon-info: #7aa2ff;
  --code-bg: #1a2438;
  --code-border: transparent;
  --code-text: #e6ebf5;
  --code-selector: #f5b95a;
  --code-property: #7aa2ff;
  --code-comment: #8a98b5;
  --footer-bg: #1a2438;
  --footer-border: transparent;
  --footer-text: #9aa8c3;
  --footer-link: #ffffff;
  --footer-link-hover: #f5b95a;
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23586174' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

  --chart-1: #1a2438;
  --chart-2: #2c5ad6;
  --chart-3: #0f8a63;
  --chart-4: #b7791a;
  --chart-5: #7c4dcc;
  --chart-6: #0e8fb0;

  --shadow-1: 0 1px 2px rgba(26, 36, 56, 0.06), 0 1px 3px rgba(26, 36, 56, 0.04);
  --shadow-2: 0 2px 6px rgba(26, 36, 56, 0.06), 0 16px 40px -12px rgba(26, 36, 56, 0.22);
}

/* ============ Dark ============ */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #1a2438;
  --bg-sunken: #151d2d;
  --surface-muted: #1f2b42;
  --surface: #232f48;
  --surface-2: #2d3b58;
  --surface-3: #384868;
  --surface-raised: #2d3b58;
  --surface-raised-hover: #384868;
  --input-bg: #151d2d;
  --header-bg: rgba(26, 36, 56, 0.82);
  --backdrop: rgba(8, 12, 22, 0.62);
  --glass: rgba(255, 255, 255, 0.05);
  --glass-border: rgba(255, 255, 255, 0.09);

  --border: #33415e;
  --border-strong: #46577a;
  --border-control: #6b7a99;
  --border-raised: #46577a;

  --heading: #e6ebf5;
  --text: #e6ebf5;
  --text-muted: #9aa8c3;
  --text-faint: #8a98b5;
  --text-disabled: #66738f;

  --accent: #f5b95a;
  --accent-hover: #f8ca80;
  --accent-active: #f3a935;
  --on-accent: #1a2438;
  --on-accent-muted: #3d4459;
  --accent-subtle: rgba(245, 185, 90, 0.14);
  --accent-border: rgba(245, 185, 90, 0.30);
  --focus-ring: rgba(245, 185, 90, 0.28);

  --highlight: rgba(245, 185, 90, 0.28);
  --selection: rgba(245, 185, 90, 0.40);

  --link: #7aa2ff;
  --link-hover: #a8c1ff;

  --info: #7aa2ff;
  --info-subtle: rgba(122, 162, 255, 0.12);
  --info-border: rgba(122, 162, 255, 0.35);
  --success: #3fd0a0;
  --success-subtle: rgba(63, 208, 160, 0.12);
  --success-border: rgba(63, 208, 160, 0.35);
  --warning: #ff8f4d;
  --warning-subtle: rgba(255, 143, 77, 0.12);
  --warning-border: rgba(255, 143, 77, 0.35);
  --danger: #f47a7a;
  --danger-subtle: rgba(244, 122, 122, 0.12);
  --danger-subtle-hover: rgba(244, 122, 122, 0.22);
  --danger-border: rgba(244, 122, 122, 0.35);

  --knob: #e6ebf5;
  --skeleton-base: #2d3b58;
  --skeleton-shine: #384868;
  --tooltip-bg: #e6ebf5;
  --tooltip-text: #1a2438;
  --toast-bg: #2d3b58;
  --toast-text: #e6ebf5;
  --toast-border: #46577a;
  --toast-icon-success: #3fd0a0;
  --toast-icon-error: #f47a7a;
  --toast-icon-info: #7aa2ff;
  --code-bg: #151d2d;
  --code-border: #33415e;
  --code-text: #e6ebf5;
  --code-selector: #f5b95a;
  --code-property: #7aa2ff;
  --code-comment: #8a98b5;
  --footer-bg: #1a2438;
  --footer-border: #33415e;
  --footer-text: #9aa8c3;
  --footer-link: #e6ebf5;
  --footer-link-hover: #f5b95a;
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa8c3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

  --chart-1: #f5b95a;
  --chart-2: #7aa2ff;
  --chart-3: #3fd0a0;
  --chart-4: #c49bff;
  --chart-5: #5cc8e6;
  --chart-6: #f28fc4;

  --shadow-1: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 1px 2px rgba(5, 10, 20, 0.35);
  --shadow-2: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 16px 40px -12px rgba(5, 10, 20, 0.7);
}

::selection {
  background: var(--selection);
  color: var(--heading);
}

::-moz-selection {
  background: var(--selection);
  color: var(--heading);
}
html { scrollbar-color: var(--border-strong) var(--bg); }