/*
    Color palettes for light and dark themes.
    Generally, when adding a new color, add it to both light and dark themes
 */

/* ---- Light ---- */
:root {
    color-scheme: light dark;

    /* Brand accents */
    --brand-blue: #42A2D6;
    --brand-blue-transparent: #42A2D633;
    --brand-blue-deep: #1A7BAF;
    --brand-green: #8caf64;
    --brand-green-transparent: #8caf6433;
    --brand-teal: #3BA0AD;    /* admin secondary accent / hover */


    /* Other accents */
    --accent-yellow: #cea44d; /* Open To All class offering level (vs 'kids' or 'professional') */
    --accent-yellow-transparent: #cea44d33;

    /* Status */
    --error: #dd2b0e;
    --error-hover: #b80602;
    --error-bg: #ffe8e8;
    --success: #3eb79d;

    /* Surfaces */
    --page-bg: #2C3C3D;
    --surface: #eeeeee;
    --surface-card: #ffffff;
    --surface-dark: #333333;
    --surface-invert: #111111;
    --surface-accent: #eee;

    --code-bg: #2d2d2d;
    --code-text: #aaa;

    /* Text */
    --text: #111111;
    --text-muted: #444444;
    --text-subtle: #666666;
    --text-on-dark: #ffffff;
    --text-on-dark-muted: #dddddd;
    --text-on-invert: #eeeeee;

    /* Lines & misc */
    --border: #dddddd;
    --border-strong: #666666;
    --grid-line: #444444;
    --footer-bg: #333333;
    --footer-text: #eeeeee;
    --footer-separator: #bbbbbb;

    /* Roles */
    --link: var(--brand-blue);
}

:root[data-theme="light"] {
    color-scheme: only light;
}

/* ---- Dark Theme ---- */
:root[data-theme="dark"] {
    color-scheme: dark;

    /* Brand accents */
    --brand-blue: #5bb4e0;
    --brand-blue-transparent: #5bb4e033;
    --brand-blue-deep: #14577d;
    --brand-green: #9dbf75;
    --brand-green-transparent: #9dbf7533;
    --brand-teal: #4fc0cd;

    /* Other accents */
    --accent-yellow: #cea44d;
    --accent-yellow-transparent: #cea44d33;

    /* Status */
    --error: #df9387;
    --error-hover: #dd2f2f;
    --error-bg: #3a1e1e;
    --success: #4fd0b4;

    /* Surfaces */
    --page-bg: #14191a;
    --surface: #1b2223;
    --surface-card: #232b2c;
    --surface-dark: #10191a;
    --surface-invert: #0b1112;
    --surface-accent: #999;

    --code-bg: #2d2d2d;
    --code-text: #aaa;

    /* Text */
    --text: #e8ecec;
    --text-muted: #b4bcbc;
    --text-subtle: #9aa3a3;
    --text-on-dark: #ffffff;
    --text-on-dark-muted: #cfd6d6;
    --text-on-invert: #e8ecec;

    /* Lines & misc */
    --border: #3a4546;
    --border-strong: #6e7c7d;
    --grid-line: #2a3536;
    --footer-bg: #0f1516;
    --footer-text: #cdd4d4;
    --footer-separator: #55605f;

    /* Roles */
    --link: var(--brand-blue);
}