/* Last Updated: 16.07.2025 at 15:49 (CEST) */
/* =======================================================
   Global Color Variables
   Contains all color definitions used across the site.
   ======================================================= */

:root {
    /* Brand colors */
    --petuja-blue: #0dacdb;
    --petuja-blue-dark: #2891b1;
    --petuja-orange: #db6500;
    --petuja-orange-dark: #b1621d;
    --petuja-purple: #28184d;

    /* Extended palette */
    --cobalt-blue: #0dacdb;
    --sky-blue: #2891b1;
    --steel-blue: #357386;
    --slate-gray: #33525c;
    --light-gray: #eeeeee;
    --neutral-gray: #878787;
    --anthracite: #253033;
    --nearly-black: #2e3233;
    --red-accent: #af0000;
    --green-accent: #008700;
    --gold-accent: #d7af5f;
    --blue-accent: #0087af;
    --magenta: #d70087;
    --yellow: #ffaf00;
    --orange-alt: #db6500;

    /* Gradient text colors */
    --gradient-text-start: #ffffff;
    --gradient-text-end: var(--petuja-blue);

    /* Base colors */
    --color-bg: #fedbca;
    --color-text: #000000;
    --color-subtext: #000000;

    --color-heading: var(--petuja-blue);
    --color-accent: var(--petuja-blue);
    --color-accent-hover: var(--petuja-blue-dark);

    --color-input-bg: #f2f2f2;
    --color-input-text: #111;
    --color-input-border: #ccc;

    --color-table-bg: #f9f9f9;
    --color-table-header-bg: #eaeaea;
    --color-table-border: #ccc;

    --stat-border-color: var(--petuja-blue);

    --text-shadow-color: rgba(40, 49, 61, 0.4);

    /* Component defaults */
    --footer-bg: var(--color-bg);
    --footer-text: #000000;
    --footer-text-light: #000000;
    --footer-heading: var(--petuja-purple);
    --footer-accent: var(--petuja-orange);
    --footer-icon-bg: rgba(0, 0, 0, 0.1);
    --footer-icon-hover: var(--footer-accent);
    --footer-icon-color-hover: #ffffff;

    --navbar-bg: var(--color-bg);
    --navbar-text: var(--color-text);
    --navbar-blue: var(--color-accent);
    --navbar-blue-hover: var(--color-accent-hover);
    --navbar-btn-text: #fff;
    --navbar-btn-bg: var(--color-accent);
    --navbar-btn-bg-hover: var(--color-accent-hover);
    --navbar-menu-bg: rgba(255, 255, 255, 0.95);

    --timer-color: var(--petuja-blue);
}

html.dark-mode {
    --color-bg: #0d1116;
    --color-text: #ffffff;
    --color-subtext: #ffffff;

    --cobalt-blue: #0dacdb;
    --sky-blue: #2891b1;
    --steel-blue: #357386;
    --slate-gray: #33525c;
    --light-gray: #444444;
    --neutral-gray: #808080;
    --anthracite: #253033;
    --nearly-black: #2e3233;
    --red-accent: #ff5faf;
    --green-accent: #5faf00;
    --gold-accent: #afd700;
    --blue-accent: #5fafd7;
    --magenta: #af87d7;
    --yellow: #d7875f;
    --orange-alt: #d7875f;

    --gradient-text-start: #ffffff;
    --gradient-text-end: var(--petuja-orange);

    --color-heading: var(--petuja-orange);
    --color-accent: var(--petuja-orange);
    --color-accent-hover: var(--petuja-orange-dark);

    --color-input-bg: #33525c;
    --color-input-text: #ffffff;
    --color-input-border: #357386;

    --color-table-bg: #33525c;
    --color-table-header-bg: #253033;
    --color-table-border: #444;

    --stat-border-color: var(--petuja-orange);

    --text-shadow-color: rgba(255, 255, 255, 0.2);

    --footer-bg: var(--color-bg);
    --footer-text: #ffffff;
    --footer-text-light: #ffffff;
    --footer-heading: #ffffff;
    --footer-accent: var(--petuja-blue);
    --footer-icon-bg: rgba(255, 255, 255, 0.2);
    --footer-icon-hover: var(--footer-accent);
    --footer-icon-color-hover: #1f2224;

    --navbar-bg: var(--color-bg);
    --navbar-text: var(--color-text);
    --navbar-blue: var(--color-accent);
    --navbar-blue-hover: var(--color-accent-hover);
    --navbar-btn-text: #fff;
    --navbar-btn-bg: var(--color-accent);
    --navbar-btn-bg-hover: var(--color-accent-hover);
    --navbar-menu-bg: rgba(0, 0, 0, 0.75);

    --timer-color: var(--petuja-orange);
}