/*
 * segler.org brand for Axe: the roundel and the sail.
 *
 * The palette is the Segler application icon's, as excelano.com/segler already
 * carries it: roundel blue, sail cream, hull near-black. Blue carries links and
 * the nav; the sand of the mainsail is the highlight role, a mark on a surface
 * and never body text.
 *
 * Variables only. The site's own rules are in site.css, loaded after axe.css.
 *
 * This file layers after axe/default.css and mirrors all four theme contexts,
 * because theme.js writes data-theme onto the root and a bare :root override
 * would lose to default.css's higher-specificity [data-theme] blocks.
 *
 * Author: David M. Anderson
 * Built with AI assistance (Claude, Anthropic)
 */

:root,
[data-theme="light"] {
    --color-bg:           #f3f6fb;
    --color-surface:      #ffffff;
    --color-text:         #16202e;
    --color-text-muted:   #566275;
    --color-border:       #d6dfec;
    --color-accent:          #34507a;
    --color-accent-hover:    #243a5c;
    --color-highlight:       #cfc094;
    --color-highlight-hover: #7d6d40;
    --color-nav-bg:       #243a5c;
    --color-nav-text:     #f2eee4;

    --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-bg:           #0a111b;
        --color-surface:      #16202d;
        --color-text:         #e4e9f0;
        --color-text-muted:   #94a2b3;
        --color-border:       #26323f;
        --color-accent:          #9db8e0;
        --color-accent-hover:    #b9cdea;
        --color-highlight:       #e6dcc0;
        --color-highlight-hover: #f2eee4;
        --color-nav-bg:       #0f1827;
        --color-nav-text:     #ebebeb;
    }
}

[data-theme="dark"] {
    --color-bg:           #0a111b;
    --color-surface:      #16202d;
    --color-text:         #e4e9f0;
    --color-text-muted:   #94a2b3;
    --color-border:       #26323f;
    --color-accent:          #9db8e0;
    --color-accent-hover:    #b9cdea;
    --color-highlight:       #e6dcc0;
    --color-highlight-hover: #f2eee4;
    --color-nav-bg:       #0f1827;
    --color-nav-text:     #ebebeb;
}