/* formulaML brand colors — mirrors app/static/css/base/_colors.css */
:root {
    --fml-primary: #358abf;
    --fml-primary-dark: #0478c0;
    --fml-accent: #f27406;
    --fml-accent-dark: #e06900;
}

[data-md-color-scheme="default"] {
    --md-primary-fg-color:        var(--fml-primary);
    --md-primary-fg-color--light: var(--fml-primary);
    --md-primary-fg-color--dark:  var(--fml-primary-dark);
    --md-accent-fg-color:         var(--fml-accent);
    --md-accent-fg-color--transparent: rgba(242, 116, 6, 0.1);
    --md-typeset-a-color:         var(--fml-primary-dark);
}

[data-md-color-scheme="slate"] {
    --md-primary-fg-color:        var(--fml-primary);
    --md-primary-fg-color--light: var(--fml-primary);
    --md-primary-fg-color--dark:  var(--fml-primary-dark);
    --md-accent-fg-color:         var(--fml-accent);
    --md-accent-fg-color--transparent: rgba(242, 116, 6, 0.15);
    --md-typeset-a-color:         var(--fml-primary);
}

/* Fluent object-handle icons (overrides/.icons/fluent/*.svg) hard-code
   fill="#212121" on their <path>, so they stay near-black under the slate
   palette and become invisible on dark backgrounds. Override that one
   fill to currentColor so the icons follow the active palette's
   foreground in both schemes. Targeting the exact attribute value keeps
   real twemoji emojis (which use multi-coloured paths) untouched. #30 */
.md-typeset .twemoji svg path[fill="#212121"] {
    fill: currentColor;
}