/* **************** File name: variables.css **************** */

:root {
    /* ################ TYPOGRAPHY ################ */
    --font-fam-1: 'lato', sans-serif;
    --font-size-b-sm: 14px;
    --font-size-b: 16px;
    --font-size-b-lg: 18px;
    --font-size-h1: 32px;
    --font-size-h2: 24px;
    --font-size-h3: 20px;
    --font-size-h4: 18px;
    --font-size-footer: 14px;
    --font-size-clamped: clamp(0.75rem, 4vw + 1rem, 2rem);
    --font-size-drumroll: clamp(1rem, 5vw, 2rem);
    --font-size-responsive: clamp(14px, 1.5vw + 1rem, 18px);
    --font-weight-n: 400;
    --font-weight-b: 700;
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    --letter-spacing-wide: 0.05em;
    --letter-spacing-normal: 0em;
    --letter-spacing-tight: -0.05em;

    /* ################ COLORS ################ */
    --clr-bg-1: #2a2a2a;
    --clr-bg-2: #1e1e1e;
    --clr-bg-header: #232323;
    --clr-bg-header-trans: rgba(72, 72, 72, 0.1);
    --clr-bg-footer: #373737;
    --clr-bg-panel: #2e2e2e;
    --clr-txt-1: #FFFFFF;
    --clr-txt-2: #CCCCCC;
    --clr-txt-3: #777777;
    --clr-txt-panel: var(--clr-txt-2);
    --clr-txt-footer: var(--clr-txt-2);
    --clr-accent: #FF8C00;
    --clr-hover: var(--clr-accent);
    --clr-link: #8d4e0f;
    --clr-link-h: #e8811a;
    --clr-link-footer: #AAA;
    --clr-link-footer-h: var(--clr-txt-1);
    --clr-in-bg: #1a1a1a;
    --clr-in-txt: var(--clr-txt-1);
    --clr-in-border: #333333;
    --clr-in-border-focus: #555555;
    --clr-in-placeholder: var(--clr-txt-3);
    --clr-scroll-thumb: #454545;
    --clr-scroll-track: rgba(72,72,72,0.15);
    --clr-scroll-thumb-h: var(--clr-hover);
    --clr-burger: var(--clr-txt-1);
    --clr-error: #f44336;
    --clr-success: var(--clr-accent);
    --clr-focus: var(--clr-accent);
    --clr-btn-primary: #444444;
    --clr-btn-primary-hover: #555555;
    --clr-btn-hover: #555555;
    --clr-btn-active: #666666;
    --clr-btn-disabled-bg: #666666;
    --clr-btn-disabled-txt: #AAAAAA;
    --btn-hover-bg: #555555;
    --btn-active-bg: #666666;
    --gradient-1: linear-gradient(to right, var(--clr-accent), var(--clr-link));
    --gradient-2: linear-gradient(to left, var(--clr-txt-1), var(--clr-txt-2));

    /* ################ OPACITY ################ */
    --opacity-hover: 0.8;
    --opacity-btn-disabled: 0.5;

    /* ################ VISUAL EFFECTS ################ */
    --filter-blur: blur(4px);
    --filter-brightness: brightness(0.8);
    --filter-grayscale: grayscale(100%);

    /* ################ SHADOWS ################ */
    --shadow-light: 0 1px 3px rgba(0, 0, 0, 0.12);
    --shadow-medium: 0 4px 6px rgba(0, 0, 0, 0.16);
    --shadow-heavy: 0 10px 20px rgba(0, 0, 0, 0.2);
    --box-shadow-light: 0 2px 4px rgba(0, 0, 0, 0.1);
    --box-shadow-heavy: 0 8px 16px rgba(0, 0, 0, 0.3);

    /* ################ SPACING AND LAYOUT ################ */
    --space-xxs: 2px;
    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: 32px;
    --space-xl: 40px;
    --space-xxl: 80px;
    --space-xxxl: 160px;    
    --border-w: 1px;
    --border-r-sm: 4px;
    --border-r-md: 8px;
    --border-r-lg: 16px;
    --grid-gap: 16px;
    --grid-template-columns-three: repeat(3, 1fr);
    --grid-template-columns-two: repeat(2, 1fr);
    --grid-auto-rows-min: minmax(100px, auto);
    --margin-vertical-auto: auto 0;
    --padding-horizontal-large: 0 32px;

    /* Responsive padding variables */
    --padding-responsive-1: clamp(var(--space-xxs), 5vw, var(--space-xxxl));
    --padding-responsive-2: clamp(var(--space-lg), 8vw, var(--space-xxxl));
    --text-wrapper-padding: 20vh; /* Initial padding value for text wrapper */
}

/* ################ Z-INDEX AND LAYERS ################ */
:root {
    --zindex-1: 1000;
    --zindex-2: 1020;
    --zindex-3: 1030;
    --zindex-modal: 1050;
}

/* ################ BREAKPOINTS AND RESPONSIVE DESIGN ################ */
:root {
    --breakp-xs: 480px;
    --breakp-sm: 768px;
    --breakp-md: 992px;
    --breakp-lg: 1200px;
    --breakp-xl: 1400px;
    --content-max-width: 1200px;
    --gutter-width: 15px;
}

/* ################ ANIMATIONS AND TRANSITIONS ################ */
:root {
    --trans-func: ease-in-out;
    --anim-type: cubic-bezier(0.4, 0.0, 0.2, 1);
    --anim-xfast: 0.01s;
    --anim-fast: 0.3s;
    --anim-med: 0.9s;
    --anim-slow: 0.9s;
    --anim-burger: 0.6s;
    --anim-delay: 0.2s;
}

/* ################ COMPONENT_SPECIFIC VARIABLES ################ */
:root {
    --clr-modal-bg: rgba(0, 0, 0, 0.4);
    --modal-padding: 20px;
    --card-border-radius: 8px;
}

/* ++++++++++++++++ file end here ++++++++++++++++ */