/* Canonical MicGraph/QuickGraph theme contract. App styles consume these
   semantic roles directly; palette changes belong here only. */
@font-face {
    font-family: "Figtree";
    src: url("fonts/figtree/figtree-latin-wght-normal.woff2") format("woff2");
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
}

@font-face {
    font-family: "Open Sans";
    src: url("fonts/open-sans/open-sans-latin-wght-normal.woff2") format("woff2");
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
}

:root {
    color-scheme: light;

    --brand-orange: #d86018;

    --ui-bg: #fff8f2;
    --ui-panel: #ffffff;
    --ui-panel-alt: #f7ebe2;
    --ui-control: #ffffff;
    --ui-graph-bg: #ffffff;
    --ui-overlay-bg: #f7ebe2;

    --ui-text: #253237;
    --ui-muted: #40565f;

    --ui-divider-color: #c6b2a7;
    --ui-divider-width: 1px;

    --ui-hover-bg: #f7dfd1;
    --ui-active-bg: var(--brand-orange);
    --ui-active-fg: #ffffff;

    --ui-header-bg: #253237;
    --ui-header-fg: #fff8f2;
    --ui-header-muted: #e8a074;

    --ui-scrollbar-track: #f7ebe2;
    --ui-scrollbar-thumb: #40565f;

    /* Alpha blacks work on both palettes: modal scrims, popover shadows, and
       dialog shadows. */
    --ui-backdrop: rgba(0, 0, 0, 0.5);
    --ui-shadow: rgba(0, 0, 0, 0.18);
    --ui-shadow-modal: rgba(0, 0, 0, 0.32);

    --semantic-pass: #2f6f42;
    --semantic-fail: #9c3f35;
    --semantic-warn: #8a5a12;
    --semantic-info: #4a6f82;

    --ui-radius: 0;
    --ui-control-height: 36px;
    --ui-font-figtree: "Figtree", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --ui-font-open-sans: "Open Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --ui-font-system: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --ui-font-selected: var(--ui-font-open-sans);
    --ui-font-primary: var(--ui-font-selected);
    --ui-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

:root[data-ui-font="figtree"] {
    --ui-font-selected: var(--ui-font-figtree);
}

:root[data-ui-font="open-sans"] {
    --ui-font-selected: var(--ui-font-open-sans);
}

:root[data-ui-font="system"] {
    --ui-font-selected: var(--ui-font-system);
}

:root.dark-mode,
body.dark-mode {
    color-scheme: dark;

    --ui-bg: #151d20;
    --ui-panel: #1a2428;
    --ui-panel-alt: #253237;
    --ui-control: #0d1214;
    --ui-graph-bg: #0d1214;
    --ui-overlay-bg: #253237;

    --ui-text: rgba(255, 255, 255, 0.82);
    --ui-muted: rgba(255, 255, 255, 0.62);

    --ui-divider-color: #40565f;

    --ui-hover-bg: #304148;

    --ui-header-bg: #0d1214;
    --ui-header-fg: rgba(255, 255, 255, 0.82);
    --ui-header-muted: #e8a074;

    --ui-scrollbar-track: #1a2428;
    --ui-scrollbar-thumb: #40565f;

    --semantic-pass: #70c487;
    --semantic-fail: #e17d70;
    --semantic-warn: #e1ae56;
    --semantic-info: #79a8bc;
}