@charset "utf-8";
/* */
/* --- --- --- AlfaAlf Media Look'n'Feel --- --- --- */
/* */

:root,
.brand-aam {
    /* ===== COLOR SETTINGS ====== */
    --clr-bluegray-900: #202533;
    --clr-bluegray-800: #30384a;
    --clr-bluegray-700: #475064;
    --clr-bluegray-600: #687086;
    --clr-bluegray-500: #8c93a7;
    --clr-bluegray-400: #b4b9c9;
    --clr-bluegray-300: #d5d8e3;
    --clr-bluegray-200: #e7e9f3;
    --clr-bluegray-100: #f0f2f8;
    --clr-bluegray-50: #f8f9fc;

    --clr-accent-primary: #b8005c;
    --clr-accent-secondary: #0095ad;

    --clr-accent-primary-dark: #73003a;
    --clr-accent-primary-light: #d74991;
    --clr-accent-violet: #6a2479;
    --clr-accent-secondary-dark: #005b68;
    --clr-accent-secondary-light: #04ddfb;

    /* light mode color settings (default) */
    --clr-background-page: var(--clr-bluegray-100);
    --clr-highlight-background: var(--clr-bluegray-200);
    --clr-highlight-border: var(--clr-bluegray-300);
    --clr-text-main: var(--clr-bluegray-800);
    --clr-heading: var(--clr-bluegray-900);
    --clr-btn-text: var(--clr-bluegray-800);
    --clr-btn-border: var(--clr-bluegray-700);
    --clr-light: var(--clr-bluegray-100);

      /* gradients */
    --grad-brand:         linear-gradient(135deg, var(--clr-accent-primary-light) 0%, var(--clr-accent-violet) 50%, var(--clr-accent-secondary) 100%);
    --grad-wide:          linear-gradient(90deg, var(--clr-accent-primary-light) 0%, var(--clr-accent-primary) 25%, var(--clr-accent-violet) 55%, var(--clr-accent-secondary) 85%, var(--clr-accent-secondary-light) 100%);
    --grad-accent-fill:   linear-gradient(-45deg, var(--clr-accent-secondary), var(--clr-accent-primary));
    --grad-accent-border: linear-gradient(135deg, var(--clr-accent-secondary-dark), var(--clr-accent-primary-dark));
    --glow:        0.8;

    /* svg specific */
    --logo-stroke-url: url(#stroke-light-gradient);

    --clr-error: #d32f2f;
    --clr-success: #2e7d32;
}

html.dark-mode,
body.dark-mode,
.card-mode,
html.dark-mode .brand-aam,
body.dark-mode .brand-aam {
    --clr-background-page: var(--clr-bluegray-800);
    --clr-highlight-background: var(--clr-bluegray-700);
    --clr-highlight-border: var(--clr-bluegray-600);
    --clr-text-main: var(--clr-bluegray-100);
    --clr-heading: var(--clr-bluegray-50);
    --clr-dark: var(--clr-bluegray-800);
    --clr-btn-text: var(--clr-bluegray-100);
    --clr-btn-border: var(--clr-bluegray-200);
    --grad-accent-border: linear-gradient(135deg, var(--clr-accent-secondary-light), var(--clr-accent-primary-light));

    /* svg specific */
    --logo-stroke-url: url(#stroke-dark-gradient);
}

/* ===== LAYOUT VARIABLES ====== */

:root {
    /* local stored fonts */
    --ff-body: "Kreon", serif;
    --ff-heading: "Poppins", sans-serif;
    --ff-mono: "Source Code Pro", monospace;

    /* font sizes used by tags */
    --fs-body: var(--fs-400);
    --fs-h1: var(--fs-800);
    --fs-h2: var(--fs-700);
    --fs-h3: var(--fs-600);
    --fs-h4: var(--fs-500);

    /* font sizes used by different content */
    --fs-nav: var(--fs-500);
    --fs-button: var(--fs-400);

    /* font weight used by tags */
    --fw-body: var(--fw-regular);
    --fw-h1: var(--fw-bold);
    --fw-h2: var(--fw-bold);
    --fw-h3: var(--fw-semi-bold);
    --fw-h4: var(--fw-medium);

    /* font sizes used by different content */
    --fw-nav: var(--fw-medium);
    --fw-button: var(--fw-medium);
}

body {
    /* mobile header settings */
    --space-top: 1rem;
    --space-right: 2rem;
    --space-bottom: 0.5rem;
    --space-left: 2rem;
    --logo-size: 5rem;

    /* border design settings */
    --brd-radius-cards: 0.6rem;
    --brd-width-cards: 0.3rem;
    --brd-clr-cards: var(--clr-bluegray-400);

    /* button desgin settings */
    --clr-btn-background: rgba(140, 147, 167, 0.5);
    --brd-radius-button: 0.5rem;
    --brd-width-button: 2px;
}

@media screen and (max-width: 65rem) {
    body {
        /* desktop header settings */
        --space-right: 1rem;
        --space-bottom: 0.5rem;
        --space-left: 1rem;
        --logo-size: 3rem;
    }
}