/*
 * Theme — Main CSS
 * Only design tokens (CSS variables) + minimal base.
 * All project-specific styles are written per project.
 */

/* ── Design tokens ──────────────────────────────────────────────────────── */
:root {
    /* Palette — Figma «Color System» (шкали 50–900) */
    --blue-50:  #f2f6fa;  --blue-100: #e0eaf3;  --blue-200: #bdd0e4;  --blue-300: #8caed0;  --blue-400: #477eb4;
    --blue-500: #004c97;  --blue-600: #004080;  --blue-700: #003468;  --blue-800: #00274f;  --blue-900: #001b37;

    --sky-50:  #f3fafe;   --sky-100: #e2f4fd;   --sky-200: #bfe6fb;   --sky-300: #91d4f8;   --sky-400: #4fbbf4;
    --sky-500: #0aa0f0;   --sky-600: #0887cb;   --sky-700: #076ca3;   --sky-800: #05507a;   --sky-900: #033654;

    --orange-50:  #fff7f2; --orange-100: #feece0; --orange-200: #fdd6bd; --orange-300: #fcb98c; --orange-400: #fa8f47;
    --orange-500: #f86300; --orange-600: #d25300; --orange-700: #a84100; --orange-800: #7e2f00; --orange-900: #561e00;

    --neutral-0:   #ffffff; --neutral-50:  #f6f8fa; --neutral-100: #eef1f4; --neutral-200: #dfe4ea; --neutral-300: #c5cdd6;
    --neutral-400: #9aa4b0; --neutral-500: #6a7480; --neutral-600: #525b65; --neutral-700: #3a4048; --neutral-800: #262b31;
    --neutral-900: #14181d;

    --success-50: #eaf7ef; --success-500: #1e9e5a; --success-700: #15703f;
    --warning-50: #fff6e0; --warning-500: #f5a300; --warning-700: #9a6600;
    --error-50:   #fdeceb; --error-500:   #d93025; --error-700:   #a3231b;

    /* Semantic tokens — Figma коллекція «Theme» */
    --bg-page:        var(--neutral-0);
    --bg-subtle:      var(--neutral-50);
    --bg-footer:      var(--neutral-900);
    --text-primary:   var(--neutral-900);
    --text-secondary: var(--neutral-600);
    --text-price-old: var(--neutral-400);
    --text-inverse:   var(--neutral-0);
    --border-default: var(--neutral-200);
    --border-focus:   var(--sky-500);
    --action-primary:  var(--orange-500);
    --action-disabled: var(--neutral-200);
    --badge-sale:     var(--orange-500);
    --icon-brand:     var(--sky-500);

    /* Gradients — Figma стилі Gradient/* */
    --gradient-brand-cool:   linear-gradient(158deg, #0aa0f0 0%, #004c97 100%);
    --gradient-brand-warm:   linear-gradient(158deg, #ff8a1f 0%, #f25500 100%);
    --gradient-climate-split: linear-gradient(90deg, #0aa0f0 0%, #004c97 48%, #f86300 52%, #ff8a1f 100%);
    --gradient-light-climate: linear-gradient(158deg, #eaf6fe 0%, #f6f8fa 55%, #fff1e6 100%);
    --gradient-light-cool:   linear-gradient(180deg, #f3fafe 0%, #ffffff 100%);
    --gradient-deep-blue:    linear-gradient(158deg, #004c97 0%, #2268b0 100%);
    --gradient-photo-overlay: linear-gradient(0deg, rgba(0, 27, 55, .85) 0%, rgba(0, 27, 55, 0) 100%);
    --gradient-button-blue:  linear-gradient(90deg, #2880f9 0%, #0747ba 100%);

    /* Legacy tokens (Customizer перекриває їх inline-CSS) */
    --color-primary:   var(--blue-500);
    --color-secondary: var(--neutral-0);
    --color-accent:    var(--orange-500);
    --color-text:      var(--neutral-900);
    --color-muted:     var(--neutral-600);
    --color-border:    var(--neutral-200);
    --color-bg:        var(--neutral-0);
    --color-bg-alt:    var(--neutral-50);

    /* Typography */
    --font-body:    'Onest', sans-serif;
    --font-heading: 'Onest', sans-serif;
    --line-height:  1.5;

    /* Layout */
    --container-width:   1480px;
    --container-padding: 20px;

    /* Radius */
    --radius-xs:   6px;
    --radius-sm:   8px;
    --radius-md:   12px;
    --radius-lg:   16px;
    --radius-xl:   18px;
    --radius-2xl:  32px;
    --radius-pill: 999px;
    --radius:      var(--radius-md);

    /* Spacing (4px scale) */
    --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px; --space-5: 20px;
    --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px;

    /* UI */
    --transition: .2s ease;
    --shadow:     0 4px 12px rgba(0, 0, 0, .12);

    /* Header / Footer */
    --header-height: 152px;
    --header-bg:     var(--neutral-0);
    --footer-bg:     var(--bg-footer);
    --footer-color:  rgba(255, 255, 255, .68);

    /* Z-indexes */
    --z-dropdown: 100;
    --z-sticky:   200;
    --z-modal:    400;
}

/* ── Base ───────────────────────────────────────────────────────────────── */
html {
    font-size: 16px;
    scroll-padding-top: var(--header-height);
}

body {
    font-family:      var(--font-body);
    font-size:        15px;
    line-height:      var(--line-height);
    color:            var(--text-primary);
    background-color: var(--bg-page);
    -webkit-font-smoothing: antialiased;
    display:          flex;
    flex-direction:   column;
    min-height:       100vh;
}

.site      { display: flex; flex-direction: column; min-height: 100vh; }
.site-main { flex: 1; }

.container {
    width:     100%;
    max-width: var(--container-width);
    padding:   0 20px;
    margin:    0 auto;
}

/* Screen reader text — required by WordPress */
.screen-reader-text {
    clip:     rect(1px, 1px, 1px, 1px);
    height:   1px;
    overflow: hidden;
    position: absolute;
    width:    1px;
}
.screen-reader-text:focus {
    clip:       auto;
    height:     auto;
    left:       5px;
    top:        5px;
    padding:    15px 23px;
    background: #f1f1f1;
    color:      #21759b;
    display:    block;
    font-weight: 700;
    z-index:    100000;
}