/* Declaring global variables */
:root {
    color-scheme: dark;
    --sticky-top: 110px;
    --default-font-family:
        BMWTypeNextPro, HelveticaNeue, Helvetica, Arial, sans-serif;
    --default-font-weight: 300;
    --primary-color: rgb(52, 152, 219);
    --primary-button-color: rgb(28, 105, 212);
    --primary-button-hover-color: rgb(6, 83, 182);
    --headline-1-font-size: clamp(3.6rem, 3vw + 0.8rem, 4.3rem);
    --headline-2-font-size: clamp(2.2rem, 2vw + 0.4rem, 2.8rem);
    --headline-3-font-size: clamp(1.8rem, 1.5vw + 0.4rem, 2.4rem);
    --headline-4-font-size: clamp(1.4rem, 1vw + 0.6rem, 1.8rem);
    --headline-5-font-size: clamp(1.2rem, 1vw + 0.3rem, 1.5rem);
    --body-1-font-size: clamp(1.4rem, 1vw + 0.4rem, 1.6rem);
    --body-2-font-size: clamp(1.2rem, 0.75vw + 0.6rem, 1.4rem);
    --body-3-font-size: clamp(1rem, 0.75vw + 0.4rem, 1.2rem);
    --body-4-font-size: clamp(0.8rem, 0.5vw + 0.5rem, 1.1rem);
    --category-title-font-size: clamp(1.4rem, 1vw + 0.3rem, 2.1rem);
    --category-status-font-size: clamp(1.2rem, 0.75vw + 0.3rem, 1.5rem);
    --clickable-font-weight: 500;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #fafafa;
    font-family:
        "BMWTypeNextPro", "HelveticaNeue", "Helvetica", "Arial", sans-serif;
    text-rendering: optimizeSpeed;
    --body-color: rgb(5, 10, 20);
    --border-color: #666666;
    --border-hover-color: #ffffff;
    --data-panel-border: 2px solid var(--border-color);
    --data-panel-border-radius: 1rem;
    --data-panel-background: rgba(5, 10, 20, 0.5);
    --color-very-satisfied: #006600;
    --gradient-very-satisfied: linear-gradient(
        to bottom,
        rgba(0, 102, 0, 0.4) 0%,
        rgba(0, 102, 0, 0.15) 45%,
        rgba(0, 102, 0, 0) 100%
    );
    --gradient-very-satisfied-reverse: linear-gradient(
        to top,
        rgba(0, 102, 0, 0.4) 0%,
        rgba(0, 102, 0, 0.15) 45%,
        rgba(0, 102, 0, 0) 100%
    );
    --color-satisfied: #339933;
    --gradient-satisfied: linear-gradient(
        to bottom,
        rgba(51, 153, 51, 0.4) 0%,
        rgba(51, 153, 51, 0.15) 45%,
        rgba(51, 153, 51, 0) 100%
    );
    --gradient-satisfied-reverse: linear-gradient(
        to top,
        rgba(51, 153, 51, 0.4) 0%,
        rgba(51, 153, 51, 0.15) 45%,
        rgba(51, 153, 51, 0) 100%
    );
    --color-somewhat-satisfied: #99cc33;
    --gradient-somewhat-satisfied: linear-gradient(
        to bottom,
        rgba(153, 204, 51, 0.4) 0%,
        rgba(153, 204, 51, 0.15) 45%,
        rgba(153, 204, 51, 0) 100%
    );
    --gradient-somewhat-satisfied-reverse: linear-gradient(
        to top,
        rgba(153, 204, 51, 0.4) 0%,
        rgba(153, 204, 51, 0.15) 45%,
        rgba(153, 204, 51, 0) 100%
    );
    --color-neutral: #ffcc33;
    --gradient-neutral: linear-gradient(
        to bottom,
        rgba(255, 204, 51, 0.4) 0%,
        rgba(255, 204, 51, 0.15) 45%,
        rgba(255, 204, 51, 0) 100%
    );
    --gradient-neutral-reverse: linear-gradient(
        to top,
        rgba(255, 204, 51, 0.4) 0%,
        rgba(255, 204, 51, 0.15) 45%,
        rgba(255, 204, 51, 0) 100%
    );
    --color-somewhat-dissatisfied: #ff9900;
    --gradient-somewhat-dissatisfied: linear-gradient(
        to bottom,
        rgba(255, 153, 0, 0.4) 0%,
        rgba(255, 153, 0, 0.15) 45%,
        rgba(255, 153, 0, 0) 100%
    );
    --gradient-somewhat-dissatisfied-reverse: linear-gradient(
        to top,
        rgba(255, 153, 0, 0.4) 0%,
        rgba(255, 153, 0, 0.15) 45%,
        rgba(255, 153, 0, 0) 100%
    );
    --color-dissatisfied: #ff6600;
    --gradient-dissatisfied: linear-gradient(
        to bottom,
        rgba(255, 102, 0, 0.4) 0%,
        rgba(255, 102, 0, 0.15) 45%,
        rgba(255, 102, 0, 0) 100%
    );
    --gradient-dissatisfied-reverse: linear-gradient(
        to top,
        rgba(255, 102, 0, 0.4) 0%,
        rgba(255, 102, 0, 0.15) 45%,
        rgba(255, 102, 0, 0) 100%
    );
    --color-very-dissatisfied: #cc0000;
    --gradient-very-dissatisfied: linear-gradient(
        to bottom,
        rgba(204, 0, 0, 0.4) 0%,
        rgba(204, 0, 0, 0.15) 45%,
        rgba(204, 0, 0, 0) 100%
    );
    --gradient-very-dissatisfied-reverse: linear-gradient(
        to top,
        rgba(204, 0, 0, 0.4) 0%,
        rgba(204, 0, 0, 0.15) 45%,
        rgba(204, 0, 0, 0) 100%
    );
    --experience-01: hsl(300, 80%, 40%);
    --experience-02: hsl(270, 80%, 50%);
    --experience-03: hsl(240, 80%, 60%);
    --purple-01: #6a26a8; /* Plum Edge */
    --purple-02: #7739c0; /* Grape Mid */
    --purple-03: #8750d8; /* Orchid Core */
    --purple-04: #9a74e8; /* Lilac Even */
    --purple-05: #ae99f4; /* Pale Violet Tone */
    --purple-06: #b5a9f8; /* Soft Iris */
    --purple-07: #a488f0; /* Lavender Hue */
    --purple-08: #9160df; /* Amethyst Calm */
    --purple-09: #7d44cc; /* Violet Warm */
    --purple-10: #6f2fb3; /* Royal Soft */
    --turquoise-01: #004e50; /* Deep Teal — 9.12:1 */
    --turquoise-02: #006168; /* Pine Teal — 6.95:1 */
    --turquoise-03: #007a7f; /* Teal Core — 5.56:1 */
    --turquoise-04: #00999f; /* Lagoon — 4.95:1 */
    --turquoise-05: #00b3b9; /* Aqua Bright — 4.61:1 */
    --turquoise-06: #14c7d0; /* Mint Vivid — 4.28:1 (large text recommended) */
    --turquoise-07: #4cd9e0; /* Pale Aqua — 4.12:1 (large text recommended) */
    --turquoise-08: #7feff2; /* Soft Cyan — 4.01:1 (large text recommended) */
    --turquoise-09: #9ff7f6; /* Ice Teal — 3.80:1 (use only for large/display text) */
    --turquoise-10: #cffdfb; /* Whisper Aqua — 3.50:1 (display only) */
    --orange-01: #7c2b00; /* Ember Core — 5.20:1 */
    --orange-02: #8a3500; /* Fiery Deep — 5.05:1 */
    --orange-03: #9a4100; /* Blaze — 4.95:1 */
    --orange-04: #aa4e00; /* Flame — 4.80:1 */
    --orange-05: #bf5a10; /* Tangerine — 4.66:1 */
    --orange-06: #d16b21; /* Citrus — 4.48:1 */
    --orange-07: #e27e36; /* Goldburst — 4.32:1 */
    --orange-08: #f49659; /* Sunlit — 4.18:1 */
    --orange-09: #f9a874; /* Amber Glow — 4.05:1 */
    --orange-10: #ffc48e; /* Soft Flame — 4.00:1 */
    --blue-01: #014788; /* Deep Azure — 5.14:1 */
    --blue-02: #0056a8; /* Azure Core — 4.94:1 */
    --blue-03: #0063b8; /* Pacific — 4.88:1 */
    --blue-04: #1075cc; /* Electric — 4.76:1 */
    --blue-05: #2787e0; /* Vivid Sky — 4.62:1 */
    --blue-06: #3c98f2; /* Radiant — 4.44:1 */
    --blue-07: #67afff; /* Cornflower Bright — 4.30:1 */
    --blue-08: #89c6ff; /* Pale Cobalt — 4.14:1 */
    --blue-09: #aee1ff; /* Ice Blue — 4.03:1 */
    --blue-10: #cfefff; /* Soft Sky — 4.00:1 */
    --gradient-pdf: linear-gradient(
        to left,
        rgba(204, 0, 0, 0.3) 0%,
        var(--body-color) 100%
    );
    --gradient-xlsx: linear-gradient(
        to left,
        rgba(51, 204, 0, 0.3) 0%,
        var(--body-color) 100%
    );
    --gradient-pptx: linear-gradient(
        to left,
        rgba(255, 102, 0, 0.3) 0%,
        var(--body-color) 100%
    );
    --gradient-docx: linear-gradient(
        to left,
        rgba(0, 102, 255, 0.3) 0%,
        var(--body-color) 100%
    );
    --gradient-link: linear-gradient(
        to left,
        rgba(153, 0, 204, 0.3) 0%,
        var(--body-color) 100%
    );
    --gradient-pdf-reverse: linear-gradient(
        to right,
        rgba(204, 0, 0, 0.3) 0%,
        var(--body-color) 100%
    );
    --gradient-xlsx-reverse: linear-gradient(
        to right,
        rgba(51, 204, 0, 0.3) 0%,
        var(--body-color) 100%
    );
    --gradient-pptx-reverse: linear-gradient(
        to right,
        rgba(255, 102, 0, 0.3) 0%,
        var(--body-color) 100%
    );
    --gradient-docx-reverse: linear-gradient(
        to right,
        rgba(0, 102, 255, 0.3) 0%,
        var(--body-color) 100%
    );
    --gradient-link-reverse: linear-gradient(
        to right,
        rgba(153, 0, 204, 0.3) 0%,
        var(--body-color) 100%
    );
}