/* Universal Elements */
:root {
    /* Non Design System Variables */
    --fire-orange: rgb(255, 106, 0);
    --fire-red: rgb(255, 34, 0);
    --fire-yellow: rgb(255, 200, 0);


    /* ================================== */
    /* ======= Design System 2.0 ======== */
    /* ================================== */

    /* ========== Primitives ============ */
    /* ================================== */

    /* Alpha Colors of Primitives */
    --alpha-black-0: rgba(0, 0, 0, 0);
    --alpha-black-15: rgba(0, 0, 0, .15);
    --alpha-black-20: rgba(0, 0, 0, .2);
    --alpha-black-30: rgba(0, 0, 0, .3);
    --alpha-black-50: rgba(0, 0, 0, .5);
    --alpha-black-75: rgba(0, 0, 0, .75);

    --alpha-white-0: rgba(255, 255, 255, 0);
    --alpha-white-10: rgba(255, 255, 255, .1);
    --alpha-white-25: rgba(255, 255, 255, .25);
    --alpha-white-50: rgba(255, 255, 255, .5);
    --alpha-white-75: rgba(255, 255, 255, .75);

    --alpha-off-white-0: rgba(252, 241, 207, 0);
    --alpha-off-white-25: rgba(252, 241, 207, .25);
    --alpha-off-white-50: rgba(252, 241, 207, .5);
    --alpha-off-white-75: rgba(252, 241, 207, .75);

    --alpha-red500-0: rgba(214, 65, 39, 0);
    --alpha-red500-25: rgba(214, 65, 39, .25);
    --alpha-red500-5: rgba(214, 65, 39, .5);
    --alpha-red500-75: rgba(214, 65, 39, .75);

    --alpha-neutral-300-0: rgba(220, 223, 228, 0);
    --alpha-neutral-300-25: rgba(220, 223, 228, .25);
    --alpha-neutral-300-50: rgba(220, 223, 228, .5);
    --alpha-neutral-1100-0: rgba(34, 39, 43, 0);
    --alpha-neutral-1100-25: rgba(34, 39, 43, .25);
    --alpha-neutral-1100-50: rgba(34, 39, 43, .25);

    --basic-white: white;
    --basic-black: black;
    --basic-off-white: #fcf1cf;
    --basic-off-white-2x: #d5ccb1;
    --basic-off-black: #222222;

    --revolution-red-100: #FFF7F2;
    --revolution-red-200: #FED5C1;
    --revolution-red-300: #FAAA8D;
    --revolution-red-400: #EE7859;
    --revolution-red-500: #D64127;
    --revolution-red-600: #AA1B0D;
    --revolution-red-700: #7E0703;
    --revolution-red-800: #520000;
    --revolution-red-900: #260000;

    --neutral-100: #F9F9F9;
    --neutral-200: #EFF0F2;
    --neutral-300: #DCDFE4;
    --neutral-400: #B3B9C4;
    --neutral-500: #8590A2;
    --neutral-600: #596773;
    --neutral-700: #454F59;
    --neutral-800: #38414A;
    --neutral-900: #2C333A;
    --neutral-1000: #293035;
    --neutral-1100: #22272B;
    --neutral-1200: #1E2327;

    --success-100: #EAF6E6;
    --success-200: #C1E4B4;
    --success-300: #97D381;
    --success-400: #6EC14F;
    --success-500: #44AF1D;
    --success-600: #338316;
    --success-700: #22580F;
    --success-800: #1A420B;
    --success-900: #143508;

    --warning-100: #FFF7D6;
    --warning-200: #F8E6A0;
    --warning-300: #F5CD47;
    --warning-400: #E2B203;
    --warning-500: #CF9F02;
    --warning-600: #B38600;
    --warning-700: #946F00;
    --warning-800: #7F5F01;
    --warning-900: #533F04;

    /* Non Theme Colors */
    --acopon-blue: #3E3F55;
    --acopon-gold: #A19254;
    --acopon-green: #6AA284;
    --acopon-sand: #E8D9B4;
    --acopon-beige: #F5EBE3;
    --acopon-grey: #999A9B;


    /* Size */
    --size-2px: 0.125rem;
    --size-4px: 0.25rem;
    --size-6px: 0.375rem;
    --size-8px: 0.5rem;
    --size-12px: 0.75rem;
    --size-14px: 0.875rem;
    --size-16px: 1rem;
    --size-18px: 1.125rem;
    --size-20px: 1.25rem;
    --size-24px: 1.5rem;
    --size-28px: 1.75rem;
    --size-32px: 2rem;
    --size-36px: 2.25rem;
    --size-40px: 2.5rem;
    --size-48px: 3rem;
    --size-60px: 3.75rem;
    --size-72px: 4.5rem;
    --size-96px: 6rem;

    /* Weight */
    --weight-100: 100;
    --weight-200: 200;
    --weight-300: 300;
    --weight-400: 400;
    --weight-500: 500;
    --weight-600: 600;
    --weight-700: 700;
    --weight-800: 800;
    --weight-900: 900;

    /* Font */
    --font-header: 'Passion One', Helvetica, Arial, sans-serif;
    /* --font-content: "Karla", sans-serif; */
    --font-content: 'Inconsolata', serif;
    --font-display: "Monoton", sans-serif;

    /* ======= Root Semantic Variables ======= */
    /* ================================== */

    /* Border Radius */
    --rr-radius-sm-3x: var(--size-4px);
    --rr-radius-sm-2x: var(--size-8px);
    --rr-radius-sm: var(--size-12px);
    --rr-radius-md: var(--size-16px);
    --rr-radius-lg: var(--size-20px);
    --rr-radius-lg-2x: var(--size-28px);
    --rr-radius-lg-3x: var(--size-32px);
    --rr-radius-lg-4x: var(--size-40px);
    --rr-radius-full: 999px;
    /* Padding and Margins */
    --rr-size-sm-4x: var(--size-2px);
    --rr-size-sm-3x: var(--size-4px);
    --rr-size-sm-2x: var(--size-8px);
    --rr-size-sm: var(--size-12px);
    --rr-size-md: var(--size-16px);
    --rr-size-lg: var(--size-20px);
    --rr-size-xl: var(--size-24px);
    --rr-size-xl-2x: var(--size-28px);
    --rr-size-xl-3x: var(--size-36px);
    --rr-size-xl-4x: var(--size-40px);
    --rr-size-xl-5x: var(--size-48px);
    --rr-size-xl-6x: var(--size-60px);
    --rr-size-xl-7x: var(--size-72px);
    --rr-size-xl-8x: var(--size-96px)
}

[data-theme="light"] {
    /* Surface: General Background */
    --rr-surface-color-primary: var(--neutral-300);
    --rr-surface-color-primary-inverse: var(--neutral-1100);
    --rr-surface-color-secondary: var(--neutral-200);
    --rr-surface-color-accent: var(--neutral-100);
    --rr-surface-color-white: var(--basic-white);
    --rr-surface-color-black: var(--basic-black);
    --rr-surface-color-brand: var(--revolution-red-500);
    --rr-surface-color-brand-accent: var(--revolution-red-600);
    --rr-surface-color-danger-subtle: var(--revolution-red-100);
    --rr-surface-color-danger-heavy: var(--revolution-red-900);
    --rr-surface-color-success-subtle: var(--success-100);
    --rr-surface-color-success-heavy: var(--success-900);
    --rr-surface-color-warning: var(--warning-500);
    --rr-surface-color-warning-subtle: var(--warning-100);
    --rr-surface-color-warning-heavy: var(--warning-900);
    --rr-surface-color-overlay-primary: var(--alpha-white-50);

    /* Gradients */
    --rr-surface-gradient-primary-linear-top-bottom: linear-gradient(0deg, var(--alpha-neutral-300-0) 0%, var(--rr-surface-color-primary) 100%);
    --rr-surface-gradient-primary-linear-bottom-top: linear-gradient(180deg, var(--alpha-neutral-300-0) 0%, var(--rr-surface-color-primary) 99%, var(--rr-surface-color-primary) 100%);
    --rr-surface-gradient-primary-linear-left-right: linear-gradient(90deg, var(--alpha-neutral-300-0) 0%, var(--rr-surface-color-primary) 100%);
    --rr-surface-gradient-primary-linear-right-left: linear-gradient(270deg, var(--alpha-neutral-300-0) 0%, var(--rr-surface-color-primary) 99%, var(--rr-surface-color-primary) 100%);
    --rr-surface-gradient-primary-radial-in-out: radial-gradient(circle, var(--alpha-neutral-300-0) 0%, var(--rr-surface-color-primary) 50%, var(--alpha-neutral-300-0) 100%);
    /* Buttons */
    --rr-button-primary-surface-default: var(--neutral-1000);
    --rr-button-secondary-surface-default: var(--neutral-300);
    --rr-button-primary-surface-hover: var(--neutral-800);
    --rr-button-secondary-surface-hover: var(--neutral-200);
    --rr-button-primary-surface-active: var(--neutral-1100);
    --rr-button-secondary-surface-active: var(--neutral-500);
    --rr-button-inverse-surface-default: var(--neutral-300);
    --rr-button-inverse-surface-hover: var(--neutral-400);
    --rr-button-inverse-surface-active: var(--neutral-500);
    --rr-button-shadow-default: var(--alpha-neutral-300-25);
    --rr-button-shadow-inverse: var(--alpha-neutral-1100-25);

    --rr-button-group-surface-active: var(--neutral-600);
    --rr-button-group-surface-disabled: var(--neutral-600);


    --rr-button-cta-surface-default: var(--revolution-red-500);
    --rr-button-cta-surface-hover: var(--revolution-red-600);
    --rr-button-cta-surface-active: var(--revolution-red-700);
    --rr-button-shadow-cta: var(--revolution-red-300);

    --rr-button-border: var(--neutral-300);
    --rr-button-border-inverse: var(--neutral-1100);



    /* Text Colors */
    --rr-text-color-primary: var(--neutral-1100);
    --rr-text-color-primary-inverse: var(--neutral-200);
    --rr-text-color-secondary: var(--neutral-800);
    --rr-text-color-secondary-inverse: var(--neutral-400);
    --rr-text-color-subtle: var(--neutral-400);
    --rr-text-color-brand: var(--revolution-red-500);
    --rr-text-color-brand-accent: var(--revolution-red-600);
    --rr-text-color-danger: var(--revolution-red-600);
    --rr-text-color-success: var(--success-500);
    --rr-text-color-warning: var(--warning-500);
    --rr-text-color-white: var(--basic-white);
    --rr-text-color-offwhite: var(--basic-off-white);

    /* Border Colors */
    --rr-border-color-default: var(--neutral-500);
    --rr-border-color-brand: var(--revolution-red-500);
    --rr-border-color-dark: var(--neutral-1100);
    --rr-border-color-offwhite: var(--basic-off-white);

    .grain:after {
        opacity: .35;
    }
}

[data-theme="dark"] {
    /* Surface: General Background */
    --rr-surface-color-primary: var(--neutral-1100);
    --rr-surface-color-primary-inverse: var(--neutral-300);
    --rr-surface-color-secondary: var(--neutral-1000);
    --rr-surface-color-accent: var(--neutral-900);
    --rr-surface-color-white: var(--basic-black);
    --rr-surface-color-black: var(--basic-white);
    --rr-surface-color-brand: var(--revolution-red-500);
    --rr-surface-color-brand-accent: var(--revolution-red-600);
    --rr-surface-color-danger-subtle: var(--revolution-red-100);
    --rr-surface-color-danger-heavy: var(--revolution-red-900);
    --rr-surface-color-success-subtle: var(--success-100);
    --rr-surface-color-success-heavy: var(--success-900);
    --rr-surface-color-warning: var(--warning-400);
    --rr-surface-color-warning-subtle: var(--warning-100);
    --rr-surface-color-warning-subtle: var(--warning-900);
    --rr-surface-color-overlay-primary: var(--alpha-black-50);

    /* Gradients */
    --rr-surface-gradient-primary-linear-top-bottom: linear-gradient(0deg, var(--alpha-neutral-1100-0) 0%, var(--rr-surface-color-primary) 100%);
    --rr-surface-gradient-primary-linear-bottom-top: linear-gradient(180deg, var(--alpha-neutral-1100-0) 0%, var(--rr-surface-color-primary) 90%, var(--rr-surface-color-primary) 100%);
    --rr-surface-gradient-primary-linear-left-right: linear-gradient(90deg, var(--alpha-neutral-1100-0) 0%, var(--rr-surface-color-primary) 100%);
    --rr-surface-gradient-primary-linear-right-left: linear-gradient(270deg, var(--alpha-neutral-1100-0) 0%, var(--rr-surface-color-primary) 90%, var(--rr-surface-color-primary) 100%);
    --rr-surface-gradient-primary-radial-in-out: radial-gradient(circle, var(--alpha-neutral-1100-0) 0%, var(--rr-surface-color-primary) 50%, var(--alpha-neutral-1100-0) 100%);

    /* Buttons */
    --rr-button-primary-surface-default: var(--neutral-100);
    --rr-button-secondary-surface-default: var(--neutral-1100);
    --rr-button-primary-surface-hover: var(--neutral-200);
    --rr-button-secondary-surface-hover: var(--neutral-1200);
    --rr-button-primary-surface-active: var(--neutral-300);
    --rr-button-secondary-surface-active: var(--neutral-900);
    --rr-button-inverse-surface-default: var(--neutral-1000);
    --rr-button-inverse-surface-hover: var(--neutral-600);
    --rr-button-inverse-surface-active: var(--neutral-1200);
    --rr-button-shadow-default: var(--alpha-white-50);
    --rr-button-shadow-inverse: var(--alpha-black-50);

    --rr-button-cta-surface-default: var(--revolution-red-500);
    --rr-button-cta-surface-hover: var(--revolution-red-400);
    --rr-button-cta-surface-active: var(--revolution-red-600);
    --rr-button-shadow-cta: var(---revolution-red-300);

    --rr-button-group-surface-active: var(--neutral-300);
    --rr-button-group-surface-disabled: var(--neutral-300);

    --rr-button-border: var(--neutral-1100);
    --rr-button-border-inverse: var(--neutral-300);

    /* Text Colors */
    --rr-text-color-primary: var(--neutral-200);
    --rr-text-color-primary-inverse: var(--neutral-1100);
    --rr-text-color-secondary: var(--neutral-300);
    --rr-text-color-secondary-inverse: var(--neutral-800);
    --rr-text-color-subtle: var(--neutral-600);
    --rr-text-color-brand: var(--revolution-red-500);
    --rr-text-color-brand-accent: var(--revolution-red-400);
    --rr-text-color-danger: var(--revolution-red-600);
    --rr-text-color-success: var(--success-500);
    --rr-text-color-warning: var(--warning-500);
    --rr-text-color-white: var(--basic-white);
    --rr-text-color-offwhite: var(--basic-off-white);


    /* Shadow Colors */
    --rr-shadow-color-brand-25: var(--alpha-red500-5);

    /* Border Colors */
    --rr-border-color-default: var(--neutral-700);
    --rr-border-color-brand: var(--revolution-red-500);
    --rr-border-color-dark: var(--neutral-300);
    --rr-border-color-offwhite: var(--basic-off-white);


}

[data-film-effect="off"] {
    .film-effect-bg {
        display: none;
    }
}

*,
html {
    box-sizing: border-box;
    scroll-behavior: smooth;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

body {
    background-color: var(--rr-surface-color-primary);
    color: var(--rr-text-color-primary);
    margin: 0px;
    padding: 0px;
    font-family: var(--font-content);
    cursor: url('../images/projects/misc/hand-default.svg')1 0, auto;
}

a {
    color: var(--rr-text-color-brand);
    text-decoration: none;
    transition: .5s;
}

a:visited {
    color: var(--rr-text-color-brand);
}

a:hover {
    color: var(--rr-text-color-brand-accent);
    text-decoration: none;
    cursor: url('../images/projects/misc/hand-click.svg')1 0, auto;
}

h1,
h2,
h3 {
    font-family: var(--font-header);
    font-weight: var(--weight-700);
    letter-spacing: .1rem;
    text-transform: uppercase;
}

h4,
h5,
p {
    font-family: var(--font-content);
    font-weight: var(--weight-300);
}

h1,
h2,
h3,
h4,
h5 {
    color: var(--rr-text-color-primary);
    text-decoration: none;
    margin: 0;
    line-height: 1;
}

h1 {
    font-size: var(--rr-size-xl-8x);
    line-height: .9;
    word-break: break-word;
}

h2 {
    font-size: var(--rr-size-xl-7x);
    line-height: 1;
    text-transform: uppercase;
}


h3 {
    font-size: var(--rr-size-xl-4x);
    font-weight: 700;
    font-weight: 700;
}

h4 {
    font-size: var(--rr-size-xl-2x);
    font-weight: 300;
    text-align: center;
    margin: 0 0 25px;
}

h5 {
    font-size: var(--rr-size-xl);
    font-weight: 300;
    text-align: left;
    margin: 0 0 25px;
}


p {
    font-size: var(--rr-size-lg);
    line-height: 1.5;
    font-weight: var(--weight-500);
    color: var(--rr-text-color-secondary);
    margin-block-start: .5em;
    margin-block-end: .5em;
}

ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

li {
    list-style-type: none;
    font-size: var(--rr-size-lg);
    line-height: 1.5;
}

.display-font {
    font-family: var(--font-display);
    font-weight: 400;
    font-style: normal;
    font-size: 3rem;
}

/* ===== Content Color Theme Specifics =====*/

/* Logos Page */
[data-theme="dark"] [data-img-theme="default"] {
    display: none;
}

[data-theme="light"] [data-img-theme="inverse"] {
    display: none;
}

/* Theme Specific Media Queries */

@media screen and (max-width: 768px) {
    h1 {
        font-size: var(--rr-size-xl-7x);
        line-height: .9;
    }

    h2 {
        font-size: var(--rr-size-xl-5x);
        line-height: .9;
    }

    h3 {
        font-size: var(--rr-size-xl-3x);
    }

    h4,
    h5 {
        font-size: var(--rr-size-lg);
    }

    p,
    li {
        font-size: var(--rr-size-md);
    }
}