/*
 * Quickmap brand theme: "Glass" (direction 2; "Branch" lives on design-1-branch).
 *
 * The single source of colours, type, radii and shadows for every web page
 * (the app at /, the auth screens, support and legal pages). Pages style
 * themselves only through these tokens. Usage rules: the Quickmap brand guide,
 * https://claude.ai/artifact/6sfP11Y5Gzk2k8PUTQ1WUV
 *
 * Light is the primary theme. Dark applies when:
 *   - the OS prefers dark and the page hasn't opted into light (html.light / body.light), or
 *   - the page sets html.dark explicitly (the app's theme toggle does this).
 */

:root,
.light {
    /* ---- Brand primitives ---- */
    --qm-ink: #15171C;
    --qm-brand: #2A6EF5;        /* Quickmap blue: the one accent */
    --qm-brand-deep: #1D57C9;
    --qm-white: #FFFFFF;

    /* ---- Surfaces ---- */
    --bg: #E6ECF7;              /* canvas + page ground */
    --chrome: rgba(255, 255, 255, 0.52);          /* sidebar, app chrome */
    --surface: rgba(255, 255, 255, 0.78);         /* cards, panels, nodes */
    --node: rgba(255, 255, 255, 0.82);
    --node-selected: #DCE8FF;
    --grid: rgba(30, 41, 80, 0.08);            /* canvas dot grid */
    --toolbar-bg: rgba(255, 255, 255, 0.56);
    --backdrop: rgba(21, 23, 28, 0.28);

    /* ---- Lines + borders ---- */
    --border: rgba(30, 41, 80, 0.10);
    --node-border: rgba(30, 41, 80, 0.10);
    --line: #9AA6BA;            /* default connector */

    /* ---- Text ---- */
    --text: #121725;            /* 17.9:1 on --bg */
    --text-dim: #4E5669;        /* 5.6:1 on --bg, 5.2:1 on --chrome */

    /* ---- Accent ---- */
    --accent: #1D4ED8;          /* text, borders, focus rings: 5.9:1 on --bg, ≥5.1:1 over the glow */
    --accent-fill: #2A6EF5;     /* filled buttons; pair with --on-accent */
    --on-accent: #FFFFFF;       /* 4.5:1 on --accent-fill */
    --accent-soft: rgba(42, 110, 245, 0.13);
    --root: #2A6EF5;

    /* ---- Status (muted, status only) ---- */
    --success: #1B7D44;
    --warning: #B45309;
    --danger: #C93535;

    /* ---- Branch colours: the user's own node colours ---- */
    --qm-red: #E25D5D;
    --qm-orange: #E89339;
    --qm-green: #46B365;
    --qm-blue: #4A8DF0;
    --qm-purple: #A17ACD;

    /* ---- Elevation ---- */
    --node-shadow: 0 1px 2px rgba(21, 23, 28, 0.06);
    --node-shadow-strong: 0 6px 18px rgba(21, 23, 28, 0.10);
    --scrollbar-thumb: rgba(21, 23, 28, 0.20);
    --scrollbar-thumb-hover: rgba(21, 23, 28, 0.36);

    /* ---- Type ---- */
    --font-ui: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
    --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

    /* ---- Shape ---- */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius: 12px;              /* nodes, cards, inputs */
    --radius-lg: 16px;          /* panels, modals */
    --radius-pill: 999px;

    --glow-1: rgba(79, 140, 255, 0.50);
    --glow-2: rgba(45, 212, 191, 0.38);
    --glow-3: rgba(167, 139, 250, 0.40);
    --glass-edge: rgba(255, 255, 255, 0.85);
    color-scheme: light;
}

/* Dark: graphite-navy ground, same single accent (lifted for contrast). */
@media (prefers-color-scheme: dark) {
    :root:not(.light) {
        --bg: #0E1116;
        --chrome: rgba(20, 24, 33, 0.58);
        --surface: rgba(30, 34, 43, 0.82);
        --node: #1E222B;
        --node-selected: #1C3366;
        --grid: rgba(255, 255, 255, 0.05);
        --toolbar-bg: rgba(30, 34, 43, 0.55);
        --backdrop: rgba(0, 0, 0, 0.5);
        --border: rgba(120, 160, 255, 0.16);
        --node-border: #2C313C;
        --line: #3A4150;
        --text: #E6E8EE;
        --text-dim: #B3B9C6;
        --accent: #4F8CFF;
        --accent-fill: #2A6EF5;
        --on-accent: #FFFFFF;
        --accent-soft: rgba(79, 140, 255, 0.22);
        --root: #4F8CFF;
        --success: #3DBE6E;
        --warning: #E0A23A;
        --danger: #F06A6A;
        --node-shadow: 0 1px 0 rgba(255, 255, 255, 0.02), 0 4px 12px rgba(0, 0, 0, 0.28);
        --node-shadow-strong: 0 8px 20px rgba(0, 0, 0, 0.36);
        --scrollbar-thumb: rgba(255, 255, 255, 0.16);
        --scrollbar-thumb-hover: rgba(255, 255, 255, 0.28);
        --glow-1: rgba(52, 120, 246, 0.62);
        --glow-2: rgba(45, 212, 191, 0.30);
        --glow-3: rgba(99, 102, 241, 0.38);
        --glass-edge: rgba(160, 195, 255, 0.14);
        color-scheme: dark;
    }
}
.dark {
    --bg: #0E1116;
    --chrome: rgba(20, 24, 33, 0.58);
    --surface: rgba(30, 34, 43, 0.82);
    --node: #1E222B;
    --node-selected: #1C3366;
    --grid: rgba(255, 255, 255, 0.05);
    --toolbar-bg: rgba(30, 34, 43, 0.55);
    --backdrop: rgba(0, 0, 0, 0.5);
    --border: rgba(120, 160, 255, 0.16);
    --node-border: #2C313C;
    --line: #3A4150;
    --text: #E6E8EE;
    --text-dim: #B3B9C6;
    --accent: #4F8CFF;
    --accent-fill: #2A6EF5;
    --on-accent: #FFFFFF;
    --accent-soft: rgba(79, 140, 255, 0.22);
    --root: #4F8CFF;
    --success: #3DBE6E;
    --warning: #E0A23A;
    --danger: #F06A6A;
    --node-shadow: 0 1px 0 rgba(255, 255, 255, 0.02), 0 4px 12px rgba(0, 0, 0, 0.28);
    --node-shadow-strong: 0 8px 20px rgba(0, 0, 0, 0.36);
    --scrollbar-thumb: rgba(255, 255, 255, 0.16);
    --scrollbar-thumb-hover: rgba(255, 255, 255, 0.28);
    --glow-1: rgba(52, 120, 246, 0.62);
    --glow-2: rgba(45, 212, 191, 0.30);
    --glow-3: rgba(99, 102, 241, 0.38);
    --glass-edge: rgba(160, 195, 255, 0.14);
    color-scheme: dark;
}
/* An explicit light choice on <body> wins over a dark <html>. */
body.light {
    --bg: #E6ECF7;
    --chrome: rgba(255, 255, 255, 0.52);
    --surface: rgba(255, 255, 255, 0.78);
    --node: rgba(255, 255, 255, 0.82);
    --node-selected: #DCE8FF;
    --grid: rgba(30, 41, 80, 0.08);
    --toolbar-bg: rgba(255, 255, 255, 0.56);
    --backdrop: rgba(21, 23, 28, 0.28);
    --border: rgba(30, 41, 80, 0.10);
    --node-border: rgba(30, 41, 80, 0.10);
    --line: #9AA6BA;
    --text: #121725;
    --text-dim: #4E5669;
    --accent: #1D4ED8;
    --accent-fill: #2A6EF5;
    --on-accent: #FFFFFF;
    --accent-soft: rgba(42, 110, 245, 0.13);
    --root: #2A6EF5;
    --success: #1B7D44;
    --warning: #B45309;
    --danger: #C93535;
    --node-shadow: 0 1px 2px rgba(21, 23, 28, 0.06);
    --node-shadow-strong: 0 6px 18px rgba(21, 23, 28, 0.10);
    --scrollbar-thumb: rgba(21, 23, 28, 0.20);
    --scrollbar-thumb-hover: rgba(21, 23, 28, 0.36);
    --glow-1: rgba(79, 140, 255, 0.50);
    --glow-2: rgba(45, 212, 191, 0.38);
    --glow-3: rgba(167, 139, 250, 0.40);
    --glass-edge: rgba(255, 255, 255, 0.85);
    color-scheme: light;
}

/* ---- Shared brand pieces ---- */

/* The Spark-Node mark next to the "Quickmap" wordmark. */
.qm-lockup {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-ui);
    font-weight: 700; letter-spacing: -0.02em;
    color: var(--text); text-decoration: none;
}
.qm-lockup img, .qm-lockup svg { width: 22px; height: 22px; flex: 0 0 auto; }

/* Hashtags are always set in the mono face, in the accent colour. */
.qm-tag { font-family: var(--font-mono); color: var(--accent); font-size: 0.92em; }