/*
 * Charismight design tokens.
 * Colour values are ESTIMATED from screenshots of charismight.com.
 * Replace them with the real values from the main site's stylesheet;
 * every rule in ds-website.css reads these variables, so this is the only file to edit.
 *
 * Dark is the default. The light variant applies when <html data-ds-theme="light"> is set
 * by the toggle in the header. Every colour below flips with the mode, including the
 * header, hero, stats band and footer.
 */
:root {
    /* ----- page and cards ----- */
    --ds-bg-page: #06182d;
    --ds-bg-section: #08233f;
    --ds-bg-card: #0c2a47;
    --ds-bg-card-2: #0f3555;

    --ds-border: #17405f;
    --ds-border-strong: #1e6a93;

    --ds-accent: #13b6f0;
    --ds-accent-2: #22c7f2;
    --ds-on-accent: #ffffff;

    --ds-text: #ffffff;
    --ds-text-soft: #b7cadb;
    --ds-text-muted: #9fb6cc;

    /* ----- header, hero, stats band, footer ----- */
    --ds-bg-header: #0a3a63;
    --ds-bg-subnav: #082c4e;
    --ds-bg-stats: #08233f;
    --ds-bg-footer: #082c4e;
    --ds-on-dark: #ffffff;
    --ds-on-dark-soft: #b7cadb;
    --ds-accent-on-dark: #22c7f2;
    --ds-border-on-dark: #1e6a93;

        --ds-hero-left: rgba(6, 24, 45, 0.82);
    --ds-hero-mid: rgba(6, 24, 45, 0.48);
    --ds-hero-right: rgba(6, 24, 45, 0.10);
    --ds-hero-bottom: rgba(8, 35, 63, 0.92);
    --ds-badge-bg: rgba(10, 47, 82, 0.7);
    --ds-badge-text: #b7d6ea;
    --ds-search-bg: rgba(12, 42, 71, 0.85);
    --ds-placeholder: #8fb0c8;
    --ds-logo-filter: none;

    --ds-radius-card: 14px;
    --ds-radius-pill: 999px;
}

html[data-ds-theme="light"] {
    --ds-bg-page: #f3f7fb;
    --ds-bg-section: #ffffff;
    --ds-bg-card: #ffffff;
    --ds-bg-card-2: #e8f1f8;

    --ds-border: #d5e2ee;
    --ds-border-strong: #b7cfe2;

    --ds-accent-2: #0a86b8;

    --ds-text: #0b2a4a;
    --ds-text-soft: #3f5a73;
    --ds-text-muted: #6b8296;

    --ds-bg-header: #ffffff;
    --ds-bg-subnav: #e8f1f8;
    --ds-bg-stats: #e9f2fa;
    --ds-bg-footer: #e8f1f8;
    --ds-on-dark: #0b2a4a;
    --ds-on-dark-soft: #3f5a73;
    --ds-accent-on-dark: #0a86b8;
    --ds-border-on-dark: #b7cfe2;

           --ds-hero-left: rgba(222, 236, 248, 0.66);
    --ds-hero-mid: rgba(222, 236, 248, 0.36);
    --ds-hero-right: rgba(222, 236, 248, 0.08);
    --ds-hero-bottom: rgba(233, 242, 250, 0.92);
    --ds-badge-bg: rgba(255, 255, 255, 0.85);
    --ds-badge-text: #0a5f86;
    --ds-search-bg: #ffffff;
    --ds-placeholder: #6b8296;
    --ds-logo-filter: none;
}