/* theme.css — the colour palettes, and nothing else.
 *
 * Variables only: no layout, no chrome. Loaded by the viewer AND the marketing page, so a sample
 * alert on the home page can carry a different theme from the page around it just by putting the
 * theme class on its container.
 */

:root {
    --bg: #2c2d31;
    --surface: #252629;
    --surface2: #33353a;
    --surface3: #3c3e44;
    --border: #3a3b40;
    --border-soft: #3a3c42;
    --border2: #4d4f56;
    --text: #dadbde;
    --meta: #91939c;
    --meta2: #8f9199;
    --faint: #8a8c93;
    --faint-a: #6f727a;
    --faint-b: #6e707a;
    --faint-c: #6a6d74;
    --hsep: #5f626a;
    --accent: #6AAB73;
    --accent2: #6A8759;
    --gold: #eab308;
    --red: #e2685f;
    --cx: #cc7832;
}

body.theme-blue, .theme-blue {
    --bg: #0e1626;
    --surface: #16223a;
    --surface2: #202e4a;
    --surface3: #2a3a5a;
    --border: #293a58;
    --border-soft: #293a58;
    --border2: #3a4e73;
    --text: #dce6f4;
    --meta: #90a2be;
    --meta2: #90a2be;
    --faint: #7d8ea8;
    --faint-a: #7d8ea8;
    --faint-b: #7d8ea8;
    --faint-c: #7d8ea8;
    --hsep: #4a5a78;
    --accent: #6AAB73;
    --accent2: #6A8759;
    --gold: #eab308;
    --red: #e2685f;
    --cx: #cc7832;
}

body.theme-light, .theme-light {
    /* Raw layout wants a white page with a grey header bar, matching Trade-Alert. */
    --bg: #ffffff;
    --surface: #ffffff;
    --surface2: #ececea;
    --surface3: #e2e2df;
    --border: #e2e2df;
    --border-soft: #e2e2df;
    --border2: #cfcfcb;
    --text: #1c1d21;
    --meta: #6b6d74;
    --meta2: #6b6d74;
    --faint: #9a9ca3;
    --faint-a: #9a9ca3;
    --faint-b: #9a9ca3;
    --faint-c: #9a9ca3;
    --hsep: #b8b9bd;
    --accent: #4e8c56;
    --accent2: #5a7d3f;
    --gold: #b07d0a;
    --red: #c0453c;
    --cx: #c26a12;
}

/* The default (dark) palette as a CLASS, not only :root.
 *
 * :root can be overridden by a host page that sets its own variables — the marketing page is
 * light — so a container asking for the dark theme needs the values applied to it directly.
 * Without this, a dark panel on a light page inherits the light text colour and renders
 * dark-on-dark. */
.theme-dark {
    --bg: #2c2d31;
    --surface: #252629;
    --surface2: #33353a;
    --surface3: #3c3e44;
    --border: #3a3b40;
    --border-soft: #3a3c42;
    --border2: #4d4f56;
    --text: #dadbde;
    --meta: #91939c;
    --meta2: #8f9199;
    --faint: #8a8c93;
    --faint-a: #6f727a;
    --faint-b: #6e707a;
    --faint-c: #6a6d74;
    --hsep: #5f626a;
    --accent: #6AAB73;
    --accent2: #6A8759;
    --gold: #eab308;
    --red: #e2685f;
    --cx: #cc7832;
}