/* Shared flat palette. UI accent is generated from project.extra.strio_accent. */
body[data-md-color-scheme] {
  --strio-palette-accent: #9D6B35;
  --strio-palette-accent-hover: #956432;
  --strio-palette-accent-on: #FFFFFF;
  --strio-palette-focus: var(--strio-palette-accent);
  --strio-palette-border-strong: #757575;
  --strio-palette-success: #258374;
  --strio-palette-warning: #9D6B35;
  --strio-palette-danger: #BB5560;
  --strio-palette-selection-background: var(--strio-palette-accent);
  --strio-palette-selection-text: var(--strio-palette-accent-on);
  --strio-palette-link-decoration: var(--strio-palette-accent);
}

body[data-md-color-scheme="default"] {
  --strio-palette-surface: #FFFFFF;
  --strio-palette-surface-raised: #F5F6F5;
  --strio-palette-text: #222623;
  --strio-palette-text-muted: #5C625F;
  --strio-palette-border: #D8DCDA;
  /* Coopr's subtle surface; GitHub-inspired syntax shades meet 5:1. */
  --strio-palette-code-surface: #F8F8F8;
  --strio-palette-code-text: #1F2328;
  --strio-palette-code-keyword: #B34753;
  --strio-palette-code-string: #22776A;
  --strio-palette-code-number: #8F6130;
  --strio-palette-code-constant: #8F6130;
  --strio-palette-code-function: #775F9F;
  --strio-palette-code-name: #8F6130;
  --strio-palette-code-variable: #1F2328;
  --strio-palette-code-special: #416BAB;
  --strio-palette-code-operator: #B34753;
  --strio-palette-code-punctuation: #1F2328;
  --strio-palette-code-comment: #636C76;
  --strio-palette-code-generic: #1F2328;
  --strio-palette-code-error: #B34753;
  --strio-palette-link-text: var(--strio-palette-text);
}

body[data-md-color-scheme="slate"] {
  --strio-palette-surface: #151515;
  --strio-palette-surface-raised: #202020;
  --strio-palette-text: #E7ECE8;
  --strio-palette-text-muted: #B8BEBA;
  --strio-palette-border: #3C403D;
  /* Coopr's raised surface; softer Vesper-inspired syntax shades meet 7:1. */
  --strio-palette-code-surface: #202020;
  --strio-palette-code-text: #E7ECE8;
  --strio-palette-code-keyword: #D79AA1;
  --strio-palette-code-string: #36BEA8;
  --strio-palette-code-number: #CFA270;
  --strio-palette-code-constant: #CFA270;
  --strio-palette-code-function: #B2A4C8;
  --strio-palette-code-name: #CFA270;
  --strio-palette-code-variable: #E7ECE8;
  --strio-palette-code-special: #8FACD5;
  --strio-palette-code-operator: #D79AA1;
  --strio-palette-code-punctuation: #E7ECE8;
  --strio-palette-code-comment: #8B8B8B;
  --strio-palette-code-generic: #E7ECE8;
  --strio-palette-code-error: #D79AA1;
  --strio-palette-link-text: var(--strio-palette-text);
}

/* Native search keeps its existing variables, CSS and JavaScript. */
body[data-md-color-scheme] { background: var(--strio-palette-surface); }
body[data-md-color-scheme] :is(.md-content, .md-sidebar--primary, .md-sidebar--secondary, .strio-footer) {
  --md-default-bg-color: var(--strio-palette-surface);
  --md-default-fg-color: var(--strio-palette-text);
  --md-default-fg-color--light: var(--strio-palette-text-muted);
  --md-default-fg-color--lighter: var(--strio-palette-text-muted);
  --md-default-fg-color--lightest: var(--strio-palette-border);
  --md-typeset-a-color: var(--strio-palette-link-text);
  --md-code-fg-color: var(--strio-palette-code-text);
  --md-code-bg-color: var(--strio-palette-code-surface);
  --md-code-hl-keyword-color: var(--strio-palette-code-keyword);
  --md-code-hl-string-color: var(--strio-palette-code-string);
  --md-code-hl-number-color: var(--strio-palette-code-number);
  --md-code-hl-constant-color: var(--strio-palette-code-constant);
  --md-code-hl-function-color: var(--strio-palette-code-function);
  --md-code-hl-name-color: var(--strio-palette-code-name);
  --md-code-hl-variable-color: var(--strio-palette-code-variable);
  --md-code-hl-special-color: var(--strio-palette-code-special);
  --md-code-hl-operator-color: var(--strio-palette-code-operator);
  --md-code-hl-punctuation-color: var(--strio-palette-code-punctuation);
  --md-code-hl-comment-color: var(--strio-palette-code-comment);
  --md-code-hl-generic-color: var(--strio-palette-code-generic);
  --md-code-hl-error-color: var(--strio-palette-code-error);
  --strio-button-bg: var(--strio-palette-accent);
  --strio-button-fg: var(--strio-palette-accent-on);
  --strio-button-muted-bg: var(--strio-palette-surface-raised);
  --strio-button-muted-fg: var(--strio-palette-text);
  --strio-button-ring: var(--strio-palette-focus);
  --strio-control-focus: var(--strio-palette-focus);
  color: var(--strio-palette-text);
}
/* Content borders use the palette; popup frames retain the shared soft ring. */
body[data-md-color-scheme] .md-content {
  --strio-surface-ring: var(--strio-palette-border);
}
body[data-md-color-scheme] .md-sidebar--primary .md-nav--primary {
  --md-default-fg-color: var(--strio-palette-text);
  --md-default-fg-color--lightest: var(--strio-palette-surface-raised);
  --md-accent-fg-color: var(--strio-palette-text);
  --md-accent-fg-color--transparent: var(--strio-palette-surface-raised);
}
body[data-md-color-scheme] .md-content .md-typeset { --md-typeset-a-color: var(--strio-palette-link-text); }
body[data-md-color-scheme] .md-content a:not(.md-button, .headerlink, .strio-tutorial, .md-footer__link, .md-path__link, .md-nav__link) {
  color: var(--strio-palette-link-text);
  text-decoration-color: var(--strio-palette-link-decoration);
}
body[data-md-color-scheme] .md-content .md-button--primary,
body[data-md-color-scheme] .md-content .md-button--primary:focus {
  color: var(--strio-palette-accent-on);
  background: var(--strio-palette-accent);
  opacity: 1;
}
body[data-md-color-scheme] .md-content .md-button--primary:hover {
  color: var(--strio-palette-accent-on);
  background: var(--strio-palette-accent-hover);
  opacity: 1;
}
body[data-md-color-scheme] .md-content .strio-container-link { border-color: var(--strio-palette-border-strong); }
body[data-md-color-scheme] :is(.md-content, .md-sidebar--primary, .md-sidebar--secondary, .strio-footer) :is(a, button, summary, label):focus-visible {
  outline-color: var(--strio-palette-focus);
}
body[data-md-color-scheme] :is(.md-content, .md-sidebar--primary, .md-sidebar--secondary, .strio-footer) ::selection {
  background: var(--strio-palette-selection-background);
  color: var(--strio-palette-selection-text);
}

body[data-md-color-scheme] .md-content .tabbed-set { --md-accent-fg-color: var(--strio-palette-text); }
body[data-md-color-scheme] .md-content .tabbed-labels::before { background: var(--strio-palette-accent); }
body[data-md-color-scheme] :is(.md-header__option, .md-header .md-source, .md-header__button.md-icon:not([for="__search"])) { --strio-control-focus: var(--strio-palette-focus); }