/* =============================================================================
   Atelje Vek — design tokens
   Extracted from the live WordPress/Breakdance build
   (wp-content/uploads/breakdance/css/*). The :root block in Breakdance's
   global-settings.css shipped the builder's *default* blue palette, but the
   actually-applied brand values throughout the per-page CSS are the teal below.
   These are the authoritative tokens — trust the computed values, not the
   Breakdance defaults.
   ============================================================================ */

:root {
    /* --- Brand palette (teal) --- */
    --brand: #0f8790;          /* primary brand teal — 55+ uses across the site */
    --brand-hover: #026466;    /* darker teal for hover/active */
    --brand-deep: #075e54;     /* deepest teal accent */
    --brand-overlay: rgba(15, 135, 144, 0.75); /* image/teal overlays */

    /* --- Neutrals --- */
    --white: #ffffff;
    --black: #000000;
    --ink: #333333;            /* default body text */
    --ink-soft: #515151;       /* secondary text */
    --line: #d9d9d9;           /* hairlines / borders */
    --muted: #aaaaaa;          /* muted text */
    --muted-2: #bbbbbb;
    --bg: #ffffff;

    /* --- Typography --- */
    --font-body: "Roboto", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
    --font-heading: "Instrument Serif", Georgia, "Times New Roman", serif;
    --font-accent: "Sofia Sans Condensed", var(--font-body);

    --fs-base: 16px;
    --fs-ratio: 1.25;          /* modular scale used by Breakdance */
    --fs-h6: var(--fs-base);
    --fs-h5: calc(var(--fs-h6) * var(--fs-ratio));   /* 20px */
    --fs-h4: calc(var(--fs-h5) * var(--fs-ratio));   /* 25px */
    --fs-h3: calc(var(--fs-h4) * var(--fs-ratio));   /* ~31px */
    --fs-h2: calc(var(--fs-h3) * var(--fs-ratio));   /* ~39px */
    --fs-h1: calc(var(--fs-h2) * var(--fs-ratio));   /* ~49px */

    --lh-body: 1.6;
    --lh-heading: 1.15;

    /* --- Layout rhythm --- */
    --container: 1120px;       /* Breakdance --bde-section-width */
    --section-pad-y: 100px;    /* --bde-section-vertical-padding */
    --section-pad-x: 20px;     /* --bde-section-horizontal-padding */
    --col-gap: 32px;           /* --bde-column-gap */

    /* --- Buttons / controls --- */
    --radius: 3px;             /* --bde-button-border-radius */
    --btn-pad: 14px 24px;
    --btn-pad-lg: 28px 54px;
    --btn-pad-sm: 8px 16px;
    --btn-weight: 500;

    /* --- Motion --- */
    --transition: 300ms;       /* --bde-transition-duration */

    /* --- Z-index scale (from Breakdance) --- */
    --z-sticky: 10;
    --z-header: 200;
    --z-dropdown: 1000;
    --z-modal: 1000;
    --z-lightbox: 1100;
}

/* Responsive type/rhythm — mirrors the Breakdance mobile breakpoints. */
@media (max-width: 767px) {
    :root {
        --section-pad-y: 60px;
        --fs-ratio: 1.18;
    }
}