@font-face {
    font-family: 'Stack Sans Notch';
    src: url('/wp-content/themes/liceumai-theme/assets/fonts/StackSansNotch-VariableFont_wght.ttf') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    margin: 0 !important;
    padding: 0 !important;

    /* Display heading */
    --font-display-family: 'Stack Sans Notch', system-ui, sans-serif;
    --font-display-size: 4.5rem;        /* 72px */
    --font-display-line-height: 1.1;
    --font-display-weight: 500;
    --font-display-letter-spacing: 0;
    --color-display: #ffffff;

    /* Display Light heading */
    --font-display-light-family: 'Stack Sans Notch', system-ui, sans-serif;
    --font-display-light-size: 4.5rem;        /* 72px */
    --font-display-light-line-height: 1.1;
    --font-display-light-weight: 300;
    --font-display-light-letter-spacing: 0;
    --color-display-light: #ffffff;

    /* Font variables */
    --font-heading-family: 'Stack Sans Notch', system-ui, sans-serif;
    --font-heading-size: 3rem;            /* 48px */
    --font-heading-line-height: 1.1;
    --font-heading-weight: 500;
    --font-heading-letter-spacing: 0;
    --font-heading-color: #FFFFFF;

    /* H2 font variables */
    --font-h2-family: 'Stack Sans Notch', system-ui, sans-serif;
    --font-h2-size: 1.75rem;             /* 28px */
    --font-h2-line-height: 1.2;
    --font-h2-weight: 700;
    --font-h2-letter-spacing: 0;
    --font-h2-color: #FFFFFF;

    /* H3 font variables */
    --font-h3-family: 'Stack Sans Notch', system-ui, sans-serif;
    --font-h3-size: 1.5rem;             /* 24px */
    --font-h3-line-height: 1.2;
    --font-h3-weight: 700;
    --font-h3-letter-spacing: 0;
    --font-h3-color: #FFFFFF;

    /* H4 font variables */
    --font-h4-family: 'Stack Sans Notch', system-ui, sans-serif;
    --font-h4-size: 1rem;                /* 16px */
    --font-h4-line-height: 1.2;
    --font-h4-weight: 700;
    --font-h4-letter-spacing: 0;
    --font-h4-color: #FFFFFF;

    /* Body 1 (B1) */
    --font-body-1-family: 'Inter', system-ui, sans-serif;
    --font-body-1-size: 1.25rem; /* 20px */
    --font-body-1-line-height: 1.5; /* 150% */
    --font-body-1-weight: 500;
    --font-body-1-letter-spacing: 0;

    /* Body 2 (B2) */
    --font-body-2-family: 'Inter', system-ui, sans-serif;
    --font-body-2-size: 1.125rem; /* 18px */
    --font-body-2-line-height: 1.65; /* 165% */
    --font-body-2-weight: 500;
    --font-body-2-letter-spacing: 0;

    /* Body 3 Regular (B3 Regular) */
    --font-body-3-regular-family: 'Inter', system-ui, sans-serif;
    --font-body-3-regular-size: 1rem; /* 16px */
    --font-body-3-regular-line-height: 1.65;
    --font-body-3-regular-weight: 400;
    --font-body-3-regular-letter-spacing: 0;

    /* Body 3 Medium (B3 Medium) */
    --font-body-3-medium-family: 'Inter', system-ui, sans-serif;
    --font-body-3-medium-size: 1rem; /* 16px */
    --font-body-3-medium-line-height: 1.65;
    --font-body-3-medium-weight: 400;
    --font-body-3-medium-letter-spacing: 0;

    /* Body 4 (B4) */
    --font-body-4-family: 'Inter', system-ui, sans-serif;
    --font-body-4-size: 0.875rem; /* 14px */
    --font-body-4-line-height: 1.2; /* 120% */
    --font-body-4-weight: 500;
    --font-body-4-letter-spacing: 0;

    /* Body 5 (B5) */
    --font-body-5-family: 'Inter', system-ui, sans-serif;
    --font-body-5-size: 0.75rem; /* 12px */
    --font-body-5-line-height: 1.2;
    --font-body-5-weight: 500;
    --font-body-5-letter-spacing: 0;

    /* Button Font */
    --font-button-family: 'Inter', system-ui, sans-serif;
    /*--font-button-size: 1rem; !* 16px *!*/
    --font-button-size: 0.850rem; /* 14px */

    --font-button-weight: 600;
    --font-button-letter-spacing: 0;
    --font-button-line-height: 110%;

    /* Button Padding */
    --button-padding-y: 0.75rem; /* 12px */
    --button-padding-x: 1.0rem; /* 16px */

    /* Button Colors */
    --color-primary-bg: #1C312E;
    --color-primary-bg-hover: #1C312E;
    --color-primary-text: #FFFFFF;

    --color-secondary-bg: #FFFFFF;
    --color-secondary-bg-hover: #FFFFFF80;
    --color-secondary-text: #111111;

    --color-tertiary-text: #FFFFFF;
    --color-tertiary-text-hover: #025DFE;

    /* Button Border */
    --button-border-radius: 0.5rem; /* 8px */
    --button-border-width: 1px;

    /* Brand Colors */
    --color-primary-green: #CEFACF;
    --color-beige: #F8F8EE;
    --color-beige-2: #F7E7DD;
    --color-brown: #35342E;
    --color-dark-green: #12151F;
    --color-white: #FFFFFF;
    --color-black: #121417;

    --color-deep-dark-green: #0F1F1A;

    /* Mobile Display */
    --font-mobile-display-size: 2rem; /* 32px */
    --font-mobile-display-line-height: 1.1;
    --font-mobile-display-weight: 500;
    --font-mobile-display-letter-spacing: 0;
    --font-mobile-display-light-weight: 300;

    /* Mobile Headings */
    --font-mobile-h1-size: 1.75rem; /* 28px */
    --font-mobile-h1-line-height: 1.1;
    --font-mobile-h1-weight: 500;
    --font-mobile-h2-size: 1.125rem; /* 18px */
    --font-mobile-h2-line-height: 1.2;
    --font-mobile-h2-weight: 700;
    --font-mobile-h3-size: 1rem; /* 16px */
    --font-mobile-h3-line-height: 1.2;
    --font-mobile-h3-weight: 700;
    --font-mobile-h4-size: 0.875rem; /* 14px */
    --font-mobile-h4-line-height: 1.2;
    --font-mobile-h4-weight: 700;

    /* Mobile Body */
    --font-mobile-b1-size: 0.875rem; /* 14px */
    --font-mobile-b1-line-height: 1.5;
    --font-mobile-b1-weight-regular: 400;
    --font-mobile-b1-weight-medium: 500;
    --font-mobile-b1-weight-semibold: 600;
    --font-mobile-b2-size: 0.75rem; /* 12px */
    --font-mobile-b2-line-height: 1.5;
    --font-mobile-b2-weight: 400;
}

body {
    font-family: var(--font-body-1-family), sans-serif;
    font-size: var(--font-body-1-size);
    line-height: var(--font-body-1-line-height);
    font-weight: var(--font-body-1-weight);
    color: var(--color-black);
    background: var(--color-primary-green);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    /*background: red;*/
}

.heading-h1,
.heading-h2,
.heading-h3,
.heading-h4,
.heading-display,
.heading-display-light {
    font-family: var(--font-display-family), system-ui, sans-serif;
}

.heading-display {
    font-size: var(--font-display-size);
    line-height: var(--font-display-line-height);
    font-weight: var(--font-display-weight);
    letter-spacing: var(--font-display-letter-spacing);
    color: var(--color-display);
}

.heading-display-light {
    font-size: var(--font-display-light-size);
    line-height: var(--font-display-light-line-height);
    font-weight: var(--font-display-light-weight);
    letter-spacing: var(--font-display-light-letter-spacing);
    color: var(--color-display-light);
}

.heading-h1 {
    font-size: var(--font-heading-size);
    line-height: var(--font-heading-line-height);
    font-weight: var(--font-heading-weight);
    letter-spacing: var(--font-heading-letter-spacing);
    color: var(--font-heading-color);
}

.heading-h2 {
    font-size: var(--font-h2-size);
    line-height: var(--font-h2-line-height);
    font-weight: var(--font-h2-weight);
    letter-spacing: var(--font-h2-letter-spacing);
    color: var(--font-h2-color);
}

.heading-h3 {
    font-size: var(--font-h3-size);
    line-height: var(--font-h3-line-height);
    font-weight: var(--font-h3-weight);
    letter-spacing: var(--font-h3-letter-spacing);
    color: var(--font-h3-color);
}

.heading-h4 {
    font-size: var(--font-h4-size);
    line-height: var(--font-h4-line-height);
    font-weight: var(--font-h4-weight);
    letter-spacing: var(--font-h4-letter-spacing);
    color: var(--font-h4-color);
}

.body-1,
.body-2,
.body-3-regular,
.body-3-medium,
.body-4,
.body-5 {
    font-family: var(--font-body-1-family), sans-serif;
}

.body-1 {
    font-size: var(--font-body-1-size);
    line-height: var(--font-body-1-line-height);
    font-weight: var(--font-body-1-weight);
    letter-spacing: var(--font-body-1-letter-spacing);
}

.body-2 {
    font-size: var(--font-body-2-size);
    line-height: var(--font-body-2-line-height);
    font-weight: var(--font-body-2-weight);
    letter-spacing: var(--font-body-2-letter-spacing);
}

.body-3-regular {
    font-size: var(--font-body-3-regular-size);
    line-height: var(--font-body-3-regular-line-height);
    font-weight: var(--font-body-3-regular-weight);
    letter-spacing: var(--font-body-3-regular-letter-spacing);
}

.body-3-medium {
    font-size: var(--font-body-3-medium-size);
    line-height: var(--font-body-3-medium-line-height);
    font-weight: var(--font-body-3-medium-weight);
    letter-spacing: var(--font-body-3-medium-letter-spacing);
}

.body-4 {
    font-size: var(--font-body-4-size);
    line-height: var(--font-body-4-line-height);
    font-weight: var(--font-body-4-weight);
    letter-spacing: var(--font-body-4-letter-spacing);
}

.body-5 {
    font-size: var(--font-body-5-size);
    line-height: var(--font-body-5-line-height);
    font-weight: var(--font-body-5-weight);
    letter-spacing: var(--font-body-5-letter-spacing);
}

.button {
    font-family: var(--font-button-family),sans-serif;
    font-size: var(--font-button-size);
    font-weight: var(--font-button-weight);
    letter-spacing: var(--font-button-letter-spacing);
    padding: var(--button-padding-y) var(--button-padding-x);
    border-radius: var(--button-border-radius);
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.button-primary {
    background-color: var(--color-primary-bg);
    color: var(--color-primary-text);
}

.button-primary:hover {
    background-color: var(--color-primary-bg-hover);
}

.button-secondary {
    background-color: var(--color-secondary-bg);
    color: var(--color-secondary-text);
    border: var(--button-border-width) solid var(--color-secondary-text);
}

.button-secondary:hover {
    background-color: var(--color-secondary-bg-hover);
}

.button-tertiary {
    background-color: transparent;
    color: var(--color-tertiary-text);
    text-transform: uppercase;
    border: none;
    text-decoration: underline;
}

.button-tertiary:hover {
    color: var(--color-tertiary-text-hover);
    text-decoration: underline;
}

.bg-primary-green { background-color: var(--color-primary-green); }
.bg-beige { background-color: var(--color-beige); }
.bg-beige-2 { background-color: var(--color-beige-2); }
.bg-brown { background-color: var(--color-brown); }
.bg-dark-green { background-color: var(--color-dark-green); }
.bg-white { background-color: var(--color-white); }
.bg-black { background-color: var(--color-black); }

.bg-dark-green { background-color: var(--color-deep-dark-green); }

.text-primary-green { color: var(--color-primary-green); }
.text-beige { color: var(--color-beige); }
.text-beige-2 { color: var(--color-beige-2); }
.text-brown { color: var(--color-brown); }
.text-dark-green { color: var(--color-dark-green); }
.text-white { color: var(--color-white); }
.text-black { color: var(--color-black); }

.heading-mobile-display {
    font-size: var(--font-mobile-display-size);
    line-height: var(--font-mobile-display-line-height);
    font-weight: var(--font-mobile-display-weight);
    letter-spacing: var(--font-mobile-display-letter-spacing);
}

.heading-mobile-display-light {
    font-size: var(--font-mobile-display-size);
    line-height: var(--font-mobile-display-line-height);
    font-weight: var(--font-mobile-display-light-weight);
    letter-spacing: var(--font-mobile-display-letter-spacing);
}

.heading-mobile-h1 {
    font-size: var(--font-mobile-h1-size);
    line-height: var(--font-mobile-h1-line-height);
    font-weight: var(--font-mobile-h1-weight);
}

.heading-mobile-h2 {
    font-size: var(--font-mobile-h2-size);
    line-height: var(--font-mobile-h2-line-height);
    font-weight: var(--font-mobile-h2-weight);
}

.heading-mobile-h3 {
    font-size: var(--font-mobile-h3-size);
    line-height: var(--font-mobile-h3-line-height);
    font-weight: var(--font-mobile-h3-weight);
}

.heading-mobile-h4 {
    font-size: var(--font-mobile-h4-size);
    line-height: var(--font-mobile-h4-line-height);
    font-weight: var(--font-mobile-h4-weight);
}

.body-mobile-1-regular {
    font-size: var(--font-mobile-b1-size);
    line-height: var(--font-mobile-b1-line-height);
    font-weight: var(--font-mobile-b1-weight-regular);
}

.body-mobile-1-medium {
    font-size: var(--font-mobile-b1-size);
    line-height: var(--font-mobile-b1-line-height);
    font-weight: var(--font-mobile-b1-weight-medium);
}

.body-mobile-1-semibold {
    font-size: var(--font-mobile-b1-size);
    line-height: var(--font-mobile-b1-line-height);
    font-weight: var(--font-mobile-b1-weight-semibold);
}

.body-mobile-2 {
    font-size: var(--font-mobile-b2-size);
    line-height: var(--font-mobile-b2-line-height);
    font-weight: var(--font-mobile-b2-weight);
}