/* =========================================================================
 * NWF Interactive — Theme Tokens
 * -------------------------------------------------------------------------
 * Faithful copy of onegrid/web/css/tokens.css (mirrors gui/themes
 * default.json dark + bright_theme.json light). The :root[data-theme] split
 * lets the header toggle flip every color with a single attribute change.
 * =======================================================================*/

:root[data-theme="dark"] {
    --dark-one: #1b1e23;
    --dark-two: #1e2229;
    --dark-three: #21252d;
    --dark-four: #272c36;

    --bg-one: #2c313c;
    --bg-two: #343b48;
    --bg-three: #3c4454;

    --icon-color: #c3ccdf;
    --icon-hover: #dce1ec;
    --icon-pressed: #6c99f4;
    --icon-active: #f5f6f9;

    --context-color: #568af2;
    --context-hover: #6c99f4;
    --context-pressed: #3f6fd1;

    --text-title: #dce1ec;
    --text-foreground: #8a95aa;
    --text-description: #4f5b6e;
    --text-active: #dce1ec;

    --white: #f5f6f9;
    --pink: #ff007f;
    --green: #00ff7f;
    --red: #ff5555;
    --yellow: #f1fa8c;

    --row-hover: #3f4a63;
    --table-outline: #0a0c10;

    --header-divider: #3c4454;
    --text-on-highlight: #1e2229;

    --shadow-card: 0 6px 18px rgba(0, 0, 0, 0.35);
    --shadow-focus: 0 0 0 3px rgba(86, 138, 242, 0.35);
    color-scheme: dark;
}

:root[data-theme="light"] {
    --dark-one: #1b1e23;
    --dark-two: #1e2229;
    --dark-three: #21252d;
    --dark-four: #272c36;

    --bg-one: #d3e0f7;
    --bg-two: #e2e9f7;
    --bg-three: #eff1f7;

    --icon-color: #6c7c96;
    --icon-hover: #8cb8ff;
    --icon-pressed: #6c99f4;
    --icon-active: #8cb8ff;

    --context-color: #568af2;
    --context-hover: #6c99f4;
    --context-pressed: #4b5469;

    --text-title: #606c85;
    --text-foreground: #6b7894;
    --text-description: #7887a6;
    --text-active: #8797ba;

    --white: #f5f6f9;
    --pink: #ff007f;
    --green: #00ff7f;
    --red: #ff5555;
    --yellow: #f1fa8c;

    --row-hover: #c4d2f0;
    --table-outline: #8a97ae;

    --header-divider: #8a97ae;
    --text-on-highlight: #1e2229;

    --shadow-card: 0 4px 14px rgba(72, 88, 118, 0.18);
    --shadow-focus: 0 0 0 3px rgba(86, 138, 242, 0.28);
    color-scheme: light;
}

/* ---------- Scale / rhythm tokens (identical across themes) ------------- */
:root {
    --radius-shell: 8px;
    --radius-card: 10px;
    --radius-pill: 999px;

    --space-1: 4px;
    --space-2: 4px;
    --space-3: 12px;
    --space-4: 8px;
    --space-5: 14px;
    --space-6: 24px;
    --space-8: 32px;

    --header-height: 45px;
    --footer-height: 25px;

    --font-family: "Proxima Nova", "Segoe UI", -apple-system, BlinkMacSystemFont,
        "Helvetica Neue", Arial, sans-serif;

    --eyebrow-line-height: 1;
}

:root[data-shadows="off"] {
    --shadow-card: none;
}