:root {
  color-scheme: dark light;
  --bg: #131416;
  --surface: #18191d;
  --surface-raised: #232428;
  --bgH: rgba(255, 255, 255, 0.035);
  --bdr: rgba(255, 255, 255, 0.06);
  --bdr-strong: rgba(255, 255, 255, 0.16);
  --t1: rgba(228, 230, 240, 0.87);
  --t2: rgba(200, 205, 218, 0.56);
  --t3: rgba(180, 185, 200, 0.34);
  --inverse-bg: #f6f5ef;
  --inverse-text: rgba(15, 16, 20, 0.92);
  --ok: #22c55e;
  --warn: #eab308;
  --err: #ef4444;
  --accent-primary: #b7f06a;
  --shadow-menu: 0 20px 50px rgba(0, 0, 0, 0.34);
  --field-bg: #101114;
  --field-text: rgba(228, 230, 240, 0.87);
  --field-placeholder: rgba(180, 185, 200, 0.34);
  --card-bg: #111216;
  --card-bg-strong: #101114;
  --control-bg: rgba(255, 255, 255, 0.025);
  --control-hover: rgba(255, 255, 255, 0.045);
  --media-border: rgba(255, 255, 255, 0.08);
  --link-underline: rgba(255, 255, 255, 0.24);
  --link-underline-hover: #ffffff;
  --link-hover-text: #ffffff;
  --primary-button-bg: rgba(228, 230, 240, 0.87);
  --primary-button-text: #131416;
  --primary-button-hover-bg: #ffffff;
  --primary-button-hover-text: #131416;
  --disabled-text: rgba(180, 185, 200, 0.34);
  --focus-ring: rgba(255, 255, 255, 0.16);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f6f5ef;
    --surface: #ffffff;
    --surface-raised: #eceae2;
    --bgH: rgba(19, 20, 22, 0.045);
    --bdr: rgba(19, 20, 22, 0.10);
    --bdr-strong: rgba(19, 20, 22, 0.22);
    --t1: rgba(19, 20, 22, 0.90);
    --t2: rgba(42, 44, 50, 0.68);
    --t3: rgba(65, 68, 78, 0.58);
    --inverse-bg: #131416;
    --inverse-text: rgba(228, 230, 240, 0.90);
    --shadow-menu: 0 20px 50px rgba(19, 20, 22, 0.16);
    --field-bg: #ffffff;
    --field-text: rgba(19, 20, 22, 0.90);
    --field-placeholder: rgba(65, 68, 78, 0.52);
    --card-bg: #ffffff;
    --card-bg-strong: #fffdf8;
    --control-bg: rgba(19, 20, 22, 0.035);
    --control-hover: rgba(19, 20, 22, 0.065);
    --media-border: rgba(19, 20, 22, 0.12);
    --link-underline: rgba(19, 20, 22, 0.24);
    --link-underline-hover: rgba(19, 20, 22, 0.86);
    --link-hover-text: rgba(19, 20, 22, 0.94);
    --primary-button-bg: rgba(19, 20, 22, 0.88);
    --primary-button-text: #f6f5ef;
    --primary-button-hover-bg: rgba(19, 20, 22, 0.96);
    --primary-button-hover-text: #ffffff;
    --disabled-text: rgba(65, 68, 78, 0.50);
    --focus-ring: rgba(113, 94, 23, 0.42);
  }
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #131416;
  --surface: #18191d;
  --surface-raised: #232428;
  --bgH: rgba(255, 255, 255, 0.035);
  --bdr: rgba(255, 255, 255, 0.06);
  --bdr-strong: rgba(255, 255, 255, 0.16);
  --t1: rgba(228, 230, 240, 0.87);
  --t2: rgba(200, 205, 218, 0.56);
  --t3: rgba(180, 185, 200, 0.34);
  --inverse-bg: #f6f5ef;
  --inverse-text: rgba(15, 16, 20, 0.92);
  --shadow-menu: 0 20px 50px rgba(0, 0, 0, 0.34);
  --field-bg: #101114;
  --field-text: rgba(228, 230, 240, 0.87);
  --field-placeholder: rgba(180, 185, 200, 0.34);
  --card-bg: #111216;
  --card-bg-strong: #101114;
  --control-bg: rgba(255, 255, 255, 0.025);
  --control-hover: rgba(255, 255, 255, 0.045);
  --media-border: rgba(255, 255, 255, 0.08);
  --link-underline: rgba(255, 255, 255, 0.24);
  --link-underline-hover: #ffffff;
  --link-hover-text: #ffffff;
  --primary-button-bg: rgba(228, 230, 240, 0.87);
  --primary-button-text: #131416;
  --primary-button-hover-bg: #ffffff;
  --primary-button-hover-text: #131416;
  --disabled-text: rgba(180, 185, 200, 0.34);
  --focus-ring: rgba(255, 255, 255, 0.16);
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f6f5ef;
  --surface: #ffffff;
  --surface-raised: #eceae2;
  --bgH: rgba(19, 20, 22, 0.045);
  --bdr: rgba(19, 20, 22, 0.10);
  --bdr-strong: rgba(19, 20, 22, 0.22);
  --t1: rgba(19, 20, 22, 0.90);
  --t2: rgba(42, 44, 50, 0.68);
  --t3: rgba(65, 68, 78, 0.58);
  --inverse-bg: #131416;
  --inverse-text: rgba(228, 230, 240, 0.90);
  --shadow-menu: 0 20px 50px rgba(19, 20, 22, 0.16);
  --field-bg: #ffffff;
  --field-text: rgba(19, 20, 22, 0.90);
  --field-placeholder: rgba(65, 68, 78, 0.52);
  --card-bg: #ffffff;
  --card-bg-strong: #fffdf8;
  --control-bg: rgba(19, 20, 22, 0.035);
  --control-hover: rgba(19, 20, 22, 0.065);
  --media-border: rgba(19, 20, 22, 0.12);
  --link-underline: rgba(19, 20, 22, 0.24);
  --link-underline-hover: rgba(19, 20, 22, 0.86);
  --link-hover-text: rgba(19, 20, 22, 0.94);
  --primary-button-bg: rgba(19, 20, 22, 0.88);
  --primary-button-text: #f6f5ef;
  --primary-button-hover-bg: rgba(19, 20, 22, 0.96);
  --primary-button-hover-text: #ffffff;
  --disabled-text: rgba(65, 68, 78, 0.50);
  --focus-ring: rgba(113, 94, 23, 0.42);
}