/* Variables */
:root {
    --Primary-background-colour: #eaeaea;
    --card-selection: #FFFFFF;
    --text-colour: #212529;
    --border-colour: #000000;
    --muted-text-colour: #6C757D;
    --text-hover: #bdbdbd;
    --primary-button: #007BFF;
    --primary-hover: #0056B3;
    --download-button: #0a9d2d;
    --download-hover: #28a745;
    --accent-colour: #20C997;
    --delete-colour: #dc143c;
    /* For upgrade prompts or subtle alerts */
    --accent-hover: #138F75;
    --border-lines: #E0E0E0;
    /* to seperate the content */
    --row-odd: #ffffff;
    --row-even: #e3e3e3;

    --dp-bg: #ffffff;
    --dp-text: #2a2e37;
    --dp-muted: #8a909a;
    --dp-border: #e6e8ee;
    --dp-shadow: 0 10px 30px rgba(0, 0, 0, .12);
    --dp-accent: #1da1f2;
    --dp-accent-hover: #168cd3;
    --dp-today-ring: #1da1f2;

    /* for template colour changing */
    --template-colour: #272727;
    --template-row-even: #e3e3e3;

    /* default colours */
    --template-colour: #272727;
    --template-header-text: #ffffff;
    --template-row-even: #e3e3e3;
    --template-line-colour: #000000;
}

html[data-theme="dark"] {
    --Primary-background-colour: #1a1a1d;
    --card-selection: #303030;
    --text-colour: #E4E4E7;
    --muted-text-colour: #B0B0BC;
    --border-lines: #424242;
    --border-colour: #000000;
    --primary-button: #4CAFEB;
    --primary-hover: #7CCBFF;
    --download-button: #0a9d2d;
    --download-hover: #28a745;
    --accent-colour: #66D1B8;
    --accent-hover: #4FB79E;
    --delete-colour: #dc143c;
    --row-odd: #303030;
    /* darker stripe */
    --row-even: #424242;
    /* lighter stripe */

    --dp-bg: #0f172a;
    --dp-text: #e5e7eb;
    --dp-muted: #94a3b8;
    --dp-border: #1f2937;
    --dp-shadow: 0 12px 36px rgba(0, 0, 0, .45);
    --dp-accent: #2563eb;
    --dp-accent-hover: #1e40af;
    --dp-today-ring: #60a5fa;

    /* for template colour changing */
    --template-colour: #272727;
    --template-row-even: #e3e3e3;

    /* default colours */
    --template-colour: #272727;
    --template-header-text: #ffffff;
    --template-row-even: #424242;
    --template-line-colour: #000000;
}