/**
 * =========================================================
 * DRT CLINIC DESIGN SYSTEM
 * Глобальні кольори, типографіка, розміри та базові компоненти
 * CSS: /css/design-system.css
 * =========================================================
 */


:root {
    /* Кольори */
    --drt-bg: #F6F5F1;
    --drt-surface: #FFFFFF;
    --drt-ink: #101927;
    --drt-ink-soft: #46505D;
    --drt-blue: #246BFD;
    --drt-blue-dark: #174EC1;
    --drt-line: #DDE3EA;
    --drt-muted: #EAEFF4;
    --drt-warm: #B6A47E;

    /* Шрифт і плавна типографіка */
    --drt-font: "Manrope", Arial, sans-serif;
    --drt-text-h1: clamp(2.5rem, 5vw, 4.5rem);
    --drt-text-h2: clamp(2rem, 3.5vw, 3.25rem);
    --drt-text-h3: clamp(1.4375rem, 2.2vw, 2rem);
    --drt-text-large: clamp(1.125rem, 1.4vw, 1.25rem);
    --drt-text-body: clamp(1rem, 1.2vw, 1.125rem);
    --drt-text-small: clamp(.875rem, 1vw, .9375rem);
    --drt-leading-h1: 1.05;
    --drt-leading-h2: 1.1;
    --drt-leading-h3: 1.2;
    --drt-leading-body: 1.6;
    --drt-leading-small: 1.5;

    /* Ширини контенту */
    --drt-row-width: 90%;
    --drt-container: 80rem;
    --drt-container-wide: 90rem;
    --drt-container-media: 120rem;
    --drt-container-text: 46rem;

    /* Відступи */
    --drt-space-xs: .5rem;
    --drt-space-s: .75rem;
    --drt-space-m: 1rem;
    --drt-space-l: 1.5rem;
    --drt-space-xl: 2rem;
    --drt-space-2xl: 3rem;
    --drt-space-section: clamp(3rem, 6vw, 8rem);
    --drt-space-section-small: clamp(2rem, 4vw, 5rem);
    --drt-grid-gap: clamp(1rem, 2vw, 2rem);
    --drt-card-padding: clamp(1.25rem, 2.5vw, 2rem);

    /* Рамки, радіуси, тіні та анімація */
    --drt-border-width: .0625rem;
    --drt-radius-button: .75rem;
    --drt-radius-field: .75rem;
    --drt-radius-card: 1.25rem;
    --drt-radius-media: 1.75rem;
    --drt-radius-pill: 999rem;
    --drt-shadow-card: 0 .75rem 2.5rem rgba(16,25,39,.08);
    --drt-shadow-raised: 0 1rem 3rem rgba(16,25,39,.12);
    --drt-transition: 180ms ease;
}

body {
    background: var(--drt-bg);
    color: var(--drt-ink-soft);
    font-family: var(--drt-font);
    font-size: var(--drt-text-body);
    line-height: var(--drt-leading-body);
}

h1,
.et_pb_text h1 {
    color: var(--drt-ink);
    font-family: var(--drt-font);
    font-size: var(--drt-text-h1);
    font-weight: 700;
    line-height: var(--drt-leading-h1);
}

h2,
.et_pb_text h2 {
    color: var(--drt-ink);
    font-family: var(--drt-font);
    font-size: var(--drt-text-h2);
    font-weight: 700;
    line-height: var(--drt-leading-h2);
}

h3,
.et_pb_text h3 {
    color: var(--drt-ink);
    font-family: var(--drt-font);
    font-size: var(--drt-text-h3);
    font-weight: 700;
    line-height: var(--drt-leading-h3);
}

p,
li,
label,
input,
textarea,
select,
button {
    font-family: var(--drt-font);
}

a {
    color: var(--drt-blue);
}

a:hover,
a:focus-visible {
    color: var(--drt-blue-dark);
}

/* === КОНТЕЙНЕРИ DIVI === */
.drt-container,
.drt-container-wide,
.drt-container-media,
.drt-container-text {
    width: var(--drt-row-width);
    margin: 0 auto;
}

.drt-container { max-width: var(--drt-container); }
.drt-container-wide { max-width: var(--drt-container-wide); }
.drt-container-media { max-width: var(--drt-container-media); }
.drt-container-text { max-width: var(--drt-container-text); }

/* === СЕКЦІЇ ТА КАРТКИ === */
.drt-section {
    padding: var(--drt-space-section) 0 !important;
}

.drt-section-small {
    padding: var(--drt-space-section-small) 0 !important;
}

.drt-card {
    padding: var(--drt-card-padding);
    background: var(--drt-surface);
    border: var(--drt-border-width) solid var(--drt-line);
    border-radius: var(--drt-radius-card);
    box-shadow: var(--drt-shadow-card);
}

.drt-media {
    overflow: hidden;
    border-radius: var(--drt-radius-media);
}

/* === ДОСТУПНІСТЬ АНІМАЦІЙ === */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}