/* https://coolors.co/040b14-173b6c-149ddd-99c099-47505f-2d2d2d */

:root {
    /* ==========================================================================
       Tier 1: Primitive Tokens (Base Color Palette & Raw Values)
       ========================================================================== */

    /* Brand Palette Scale */
    --color-celestial-blue: #149ddd;
    --color-celestial-blue-hover: #37b3ed;
    --color-celestial-blue-light: #dff3fc;
    --color-celestial-blue-alt: #2eafec;

    --color-yale-blue: #173b6c;
    --color-yale-blue-dark: #1f5297;
    --color-yale-blue-light: #e4edf9;

    /* Neutrals & Dark Shades */
    --color-black-night: #040b14;
    --color-black-heading: #050d18;
    --color-dark-card: #212431;
    --color-dark-border: #2c2f3f;
    --color-dark-body: #272829;
    --color-dark-title: #343a40;
    --color-dark-btn: #333333;

    --color-nav-link: #a8a9b4;
    --color-nav-icon: #6f7180;
    --color-footer-text: #f4f6fd;
    --color-footer-credits: #eaebf0;

    /* Light Shades */
    --color-white: #ffffff;
    --color-gray-bg: #f5f8fd;
    --color-gray-card: #f8f9fa;

    /* Feedback & Status Colors */
    --color-success: #28a745;
    --color-danger: #dc3545;
    --color-hsl-success: hsl(143, 100%, 26%);
    --color-hsl-warning: hsl(43, 100%, 66%);
    --color-hsl-error: hsl(348, 55%, 49%);

    /* Flag / Country Colors */
    --color-flag-tr: #E30A17;
    --color-flag-tr-inactive: #FF4D4D;
    --color-flag-en: #00247D;
    --color-flag-en-inactive: #6C9EFF;

    /* RGB Channels for Alpha Transparencies */
    --rgb-black-night: 4, 11, 20;
    --rgb-black-overlay: 5, 13, 24;
    --rgb-shadow: 0, 0, 0;
    --rgb-border-dark: 44, 47, 63;
    --rgb-danger: 220, 53, 69;

    /* ==========================================================================
       Tier 2: Semantic Tokens (Functional UI Roles)
       ========================================================================== */

    /* Layout & Navigation */
    --sidebar-width: 240px;
    --bg-header: var(--color-black-night);
    --bg-footer: var(--color-black-night);
    --bg-sidebar-social: var(--color-dark-card);
    --border-profile-img: var(--color-dark-border);

    --text-nav-link: var(--color-nav-link);
    --text-nav-icon: var(--color-nav-icon);
    --text-nav-hover: var(--color-white);
    --icon-nav-hover: var(--color-celestial-blue);
    --bg-mobile-nav: var(--color-celestial-blue);

    --text-footer: var(--color-footer-text);
    --text-footer-credits: var(--color-footer-credits);

    /* Typography & Content */
    --text-body: var(--color-dark-body);
    --text-heading-primary: var(--color-yale-blue);
    --text-heading-secondary: var(--color-black-heading);
    --text-card-title: var(--color-dark-title);
    --accent-heading-line: var(--color-celestial-blue);
    --text-heading-primary-fade: var(--color-yale-blue-dark);

    /* Links & Buttons */
    --color-link: var(--color-celestial-blue);
    --color-link-hover: var(--color-celestial-blue-hover);
    --bg-btn-submit: var(--color-celestial-blue);
    --bg-btn-submit-hover: var(--color-celestial-blue-hover);
    --bg-btn-icon: var(--color-dark-btn);

    --bg-back-to-top: var(--color-celestial-blue);
    --bg-back-to-top-hover: var(--color-celestial-blue-alt);
    --icon-back-to-top: var(--color-white);

    /* Cards, Items & Sections */
    --bg-body: var(--color-white);
    --bg-card: var(--color-white);
    --bg-card-tech: var(--color-gray-card);
    --bg-section-alt: var(--color-gray-bg);
    --bg-info-icon: var(--color-celestial-blue-light);
    --bg-timeline-badge: var(--color-yale-blue-light);
    --border-timeline: var(--color-yale-blue-dark);
    --text-counter: var(--color-celestial-blue);
    --text-counter-fade: var(--color-celestial-blue-hover);
    --bg-input: var(--color-white);
    --text-input: var(--color-dark-body);
    --border-input: #cbd5e1;
    --gradient-sky-artwork: linear-gradient(
        98deg,
        #ff8039 0%,
        #ff7848 10%,
        #fe7656 20%,
        #f16b60 30%,
        #da5f66 38%,
        #a6596d 46%,
        #6b5d6e 54%,
        #3c5b6b 62%,
        #145269 72%,
        #024765 84%,
        #013c5e 93%,
        #012f4c 100%
    );

    /* Overlays & Shadows */
    --bg-hero-overlay: rgba(var(--rgb-black-overlay), 0.3);
    --shadow-card: 0 0 24px 0 rgba(var(--rgb-shadow), 0.12);
    --shadow-soft: 0 2px 4px rgba(var(--rgb-shadow), 0.1);
    --shadow-alert: 0 4px 6px rgba(var(--rgb-shadow), 0.1);
    --border-about-img: 0.3rem solid rgba(var(--rgb-border-dark), 0.1);

    /* Form Validation */
    --clr-success: var(--color-hsl-success);
    --clr-warning: var(--color-hsl-warning);
    --clr-error: var(--color-hsl-error);
    --bg-alert-success: var(--color-success);
    --bg-alert-danger: var(--color-danger);
    --text-input-error: var(--color-danger);
    --border-input-invalid: var(--color-danger);
    --shadow-input-invalid: 0 0 0 0.2rem rgba(var(--rgb-danger), 0.25);

    /* Language Switcher */
    --text-lang-tr: var(--color-flag-tr);
    --text-lang-tr-inactive: var(--color-flag-tr-inactive);
    --text-lang-en: var(--color-flag-en);
    --text-lang-en-inactive: var(--color-flag-en-inactive);
}

/* ==========================================================================
   Dark Theme Token Overrides
   ========================================================================== */
[data-theme="dark"],
[data-bs-theme="dark"] {
    /* Typography & Content */
    --bg-body: #0b1120;
    --text-body: #94a3b8;
    --text-heading-primary: var(--color-celestial-blue);
    --text-heading-secondary: #f8fafc;
    --text-card-title: #f1f5f9;
    --text-heading-primary-fade: var(--color-celestial-blue-hover);

    /* Cards, Items & Sections */
    --bg-section-alt: #111827;
    --bg-card: #1e293b;
    --bg-card-tech: #1e293b;
    --bg-info-icon: rgba(20, 157, 221, 0.2);
    --bg-timeline-badge: rgba(30, 82, 151, 0.4);
    --border-timeline: var(--color-celestial-blue);
    --bg-input: #1e293b;
    --text-input: #f8fafc;
    --border-input: #334155;

    /* Overlays & Shadows */
    --shadow-card: 0 10px 25px -5px rgba(0, 0, 0, 0.6), 0 8px 10px -6px rgba(0, 0, 0, 0.6);
    --shadow-soft: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
    --border-about-img: 0.3rem solid rgba(255, 255, 255, 0.15);
}