/* ==========================================================================
   VARIABLES.CSS — Durs Theme Design Tokens
   CSS Custom Properties for the entire theme.
   Loaded first, before all other stylesheets.
   ========================================================================== */

/* Self-hosted fonts - GDPR compliant */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/montserrat-v26-latin-600.woff2') format('woff2');
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/montserrat-v26-latin-700.woff2') format('woff2');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/roboto-v47-latin-regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/roboto-v47-latin-500.woff2') format('woff2');
}

:root {
    /* ── Primary ─────────────────────────────────────────────────────────── */
    --color-primary:            #00A3A6;
    --color-primary-dark:       #008285;
    --color-primary-light:      #E6F7F7;

    /* ── Base / Corporate ────────────────────────────────────────────────── */
    --color-secondary:          #1A2634;
    --color-secondary-light:    #2A3A4C;

    /* ── Backgrounds ─────────────────────────────────────────────────────── */
    --color-bg:                 #F8F9FA;
    --color-bg-white:           #FFFFFF;
    --color-bg-dark:            #1A2634;

    /* ── Text ────────────────────────────────────────────────────────────── */
    --color-text:               #333333;
    --color-text-light:         #6B7280;
    --color-text-on-dark:       #FFFFFF;
    --color-text-on-dark-muted: #B0BEC5;

    /* ── Accent (sparingly) ──────────────────────────────────────────────── */
    --color-accent:             #E67E22;
    --color-accent-dark:        #CF6D17;

    /* ── Utility ─────────────────────────────────────────────────────────── */
    --color-border:             #E2E8F0;
    --color-border-dark:        #334155;
    --color-overlay:            rgba(0, 163, 166, 0.15);
    --color-overlay-dark:       rgba(26, 38, 52, 0.7);

    /* ── Shadows ─────────────────────────────────────────────────────────── */
    --shadow-sm:                0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md:                0 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-lg:                0 10px 25px rgba(0, 0, 0, 0.1);
    --shadow-card:              0 2px 8px rgba(0, 0, 0, 0.08);

    /* ── Spacing ─────────────────────────────────────────────────────────── */
    --space-xs:                 0.25rem;
    --space-sm:                 0.5rem;
    --space-md:                 1rem;
    --space-lg:                 1.5rem;
    --space-xl:                 2rem;
    --space-2xl:                3rem;
    --space-3xl:                4rem;
    --space-4xl:                6rem;
    --space-section:            5rem;

    /* ── Border Radius ───────────────────────────────────────────────────── */
    --radius-sm:                4px;
    --radius-md:                8px;
    --radius-lg:                12px;
    --radius-full:              9999px;

    /* ── Transitions ─────────────────────────────────────────────────────── */
    --transition-fast:          150ms ease;
    --transition-base:          250ms ease;
    --transition-slow:          400ms ease;

    /* ── Container ───────────────────────────────────────────────────────── */
    --container-max:            none;
    --container-padding:        1.5rem;
    --container-pad-left:       clamp(1.5rem, 4.5vw, 5rem);
    --container-pad-right:      clamp(1rem, 3.2vw, 3.25rem);
}

@media (max-width: 1199px) {
    :root {
        --container-pad-left:   clamp(1.25rem, 3vw, 2.3rem);
        --container-pad-right:  clamp(1rem, 2.4vw, 1.8rem);
    }
}

@media (max-width: 767px) {
    :root {
        --container-pad-left:   var(--container-padding);
        --container-pad-right:  var(--container-padding);
    }
}