/**
 * ArtFocus Studio — global.css
 *
 * Завантажується на КОЖНІЙ сторінці.
 * Містить: CSS custom properties, reset, типографіка, контейнер, утиліти, кнопки.
 * НЕ містить стилів конкретних секцій або сторінок.
 *
 * Порядок:
 * 1. CSS Custom Properties (design tokens)
 * 2. CSS Reset
 * 3. Типографіка (базова)
 * 4. Контейнер / Grid
 * 5. Кнопки (btn)
 * 6. Утиліти
 * 7. Accessibility
 * 8. Анімації (базові)
 */

/* ─────────────────────────────────────────────────────
   1. CSS CUSTOM PROPERTIES
   ───────────────────────────────────────────────────── */

:root {
    /* ── Кольори ── */
    --color-bg:           #0d0d0d;        /* Основний фон (темний) */
    --color-bg-secondary: #141414;        /* Вторинний фон */
    --color-bg-card:      #1a1a1a;        /* Фон карток */
    --color-surface:      #222222;        /* Поверхня (inputs, borders) */

    --color-text:         #f5f5f0;        /* Основний текст */
    --color-text-muted:   #a0a09a;        /* Приглушений текст */
    --color-text-faint:   #606060;        /* Дуже приглушений */

    --color-accent:       #e8d5a3;        /* Акцент (золотистий) */
    --color-accent-hover: #d4bc85;        /* Акцент при hover */
    --color-accent-dark:  #c8a96e;        /* Темніший акцент */

    --color-white:        #ffffff;
    --color-black:        #000000;

    --color-border:       rgba(255, 255, 255, 0.08);
    --color-border-hover: rgba(255, 255, 255, 0.20);

    --color-success:      #4caf72;
    --color-error:        #e05252;

    /* ── Типографіка ── */
    --font-heading: 'Unbounded', 'Montserrat', sans-serif;
    --font-body:    'Unbounded', 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    --font-mono:    'JetBrains Mono', 'Courier New', monospace;

    --text-xs:   0.75rem;    /* 12px */
    --text-sm:   0.875rem;   /* 14px */
    --text-base: 1rem;       /* 16px */
    --text-md:   1.125rem;   /* 18px */
    --text-lg:   1.25rem;    /* 20px */
    --text-xl:   1.5rem;     /* 24px */
    --text-2xl:  2rem;       /* 32px */
    --text-3xl:  2.5rem;     /* 40px */
    --text-4xl:  3rem;       /* 48px */
    --text-5xl:  3.75rem;    /* 60px */
    --text-6xl:  5rem;       /* 80px */

    --leading-tight:  1.2;
    --leading-normal: 1.5;
    --leading-loose:  1.7;

    --tracking-tight:  -0.03em;
    --tracking-normal:  0;
    --tracking-wide:    0.05em;
    --tracking-widest:  0.15em;

    /* ── Відступи ── */
    --space-1:  0.25rem;   /* 4px  */
    --space-2:  0.5rem;    /* 8px  */
    --space-3:  0.75rem;   /* 12px */
    --space-4:  1rem;      /* 16px */
    --space-5:  1.25rem;   /* 20px */
    --space-6:  1.5rem;    /* 24px */
    --space-8:  2rem;      /* 32px */
    --space-10: 2.5rem;    /* 40px */
    --space-12: 3rem;      /* 48px */
    --space-16: 4rem;      /* 64px */
    --space-20: 5rem;      /* 80px */
    --space-24: 6rem;      /* 96px */
    --space-32: 8rem;      /* 128px */

    /* ── Секційні відступи ── */
    --section-py:     6rem;    /* padding top/bottom секцій */
    --section-py-sm:  4rem;    /* на мобільному */

    /* ── Контейнер ── */
    --container-max:  1500px !important;
    --container-px:   1.5rem;
    --container-px-md: 2.5rem;
    --container-px-lg: 4rem;

    /* ── Border radius ── */
    --radius-sm:  4px;
    --radius-md:  8px;
    --radius-lg:  16px;
    --radius-xl:  24px;
    --radius-full: 9999px;

    /* ── Тіні ── */
    --shadow-sm:  0 1px 3px rgba(0,0,0,0.3);
    --shadow-md:  0 4px 16px rgba(0,0,0,0.4);
    --shadow-lg:  0 16px 48px rgba(0,0,0,0.5);
    --shadow-xl:  0 32px 64px rgba(0,0,0,0.6);

    /* ── Переходи ── */
    --transition-fast:    150ms ease;
    --transition-normal:  250ms ease;
    --transition-slow:    400ms ease;
    --transition-spring:  300ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ── Z-index шари ── */
    --z-base:    1;
    --z-dropdown: 100;
    --z-sticky:  200;
    --z-overlay: 300;
    --z-modal:   400;
    --z-toast:   500;

    /* ── Breakpoints (reference only, для документації) ── */
    /* --bp-sm:  576px  */
    /* --bp-md:  768px  */
    /* --bp-lg:  1024px */
    /* --bp-xl:  1280px */
    /* --bp-2xl: 1440px */
}

/* ─────────────────────────────────────────────────────
   2. CSS RESET
   ───────────────────────────────────────────────────── */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
}

input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
    border: none;
    background: none;
}

a {
    color: inherit;
    text-decoration: none;
}

ul,
ol {
    list-style: none;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

address {
    font-style: normal;
}

fieldset {
    border: none;
}

/* ─────────────────────────────────────────────────────
   3. ТИПОГРАФІКА
   ───────────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text);
}

h1 { font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl)); font-weight: 700; }
h2 { font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl)); font-weight: 600; }
h3 { font-size: clamp(var(--text-xl),  3vw, var(--text-2xl)); font-weight: 600; }
h4 { font-size: var(--text-xl);  font-weight: 500; }
h5 { font-size: var(--text-lg);  font-weight: 500; }
h6 { font-size: var(--text-base); font-weight: 500; }

p {
    line-height: var(--leading-loose);
    color: var(--color-text-muted);
}

strong, b { font-weight: 600; color: var(--color-text); }

/* Декоративний eyebrow label */
.eyebrow,
[class$="__eyebrow"],
[class*="__eyebrow"] {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    color: var(--color-accent);
}

/* ─────────────────────────────────────────────────────
   4. КОНТЕЙНЕР / LAYOUT
   ───────────────────────────────────────────────────── */

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

@media (min-width: 768px) {
    .container {
        padding-inline: var(--container-px-md);
    }
}

@media (min-width: 1280px) {
    .container {
        padding-inline: var(--container-px-lg);
    }
}

/* Секції */
section {
    padding-block: var(--section-py-sm);
}

@media (min-width: 768px) {
    section {
        padding-block: var(--section-py);
    }
}

/* ─────────────────────────────────────────────────────
   5. КНОПКИ
   ───────────────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0.75em 1.75em;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-normal),
                color var(--transition-normal),
                border-color var(--transition-normal),
                transform var(--transition-fast),
                box-shadow var(--transition-normal);
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    border: 2px solid transparent;
    outline: none;
    -webkit-user-select: none;
    user-select: none;
}

.btn:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

.btn:active {
    transform: translateY(1px);
}

/* Primary */
.btn--primary {
    background-color: var(--color-accent);
    color: var(--color-black);
    border-color: var(--color-accent);
}
.btn--primary:hover {
    background-color: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    box-shadow: 0 4px 20px rgba(232, 213, 163, 0.25);
}

/* Outline */
.btn--outline {
    background-color: transparent;
    color: var(--color-text);
    border-color: var(--color-border-hover);
}
.btn--outline:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

/* Ghost */
.btn--ghost {
    background-color: transparent;
    color: var(--color-text-muted);
    border-color: transparent;
    padding-inline: var(--space-2);
}
.btn--ghost:hover {
    color: var(--color-text);
}

/* Text */
.btn--text {
    background: none;
    border: none;
    color: var(--color-accent);
    padding: 0;
    font-size: inherit;
    text-transform: none;
    letter-spacing: 0;
}
.btn--text:hover {
    color: var(--color-accent-hover);
}

/* Sizes */
.btn--lg  { font-size: var(--text-base); padding: 1em 2.5em; }
.btn--sm  { font-size: var(--text-xs);   padding: 0.5em 1.25em; }

/* ─────────────────────────────────────────────────────
   6. УТИЛІТИ
   ───────────────────────────────────────────────────── */

.visually-hidden,
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.wp-content h2,
.wp-content h3,
.wp-content p,
.wp-content ul,
.wp-content ol {
    margin-bottom: var(--space-6);
}

.wp-content ul,
.wp-content ol {
    padding-left: var(--space-6);
    list-style: revert;
}

.wp-content a {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.wp-content img {
    border-radius: var(--radius-md);
    margin-block: var(--space-8);
}

/* Тег */
.tag {
    display: inline-block;
    padding: 0.2em 0.75em;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    background-color: var(--color-surface);
    color: var(--color-text-muted);
    border-radius: var(--radius-full);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}
.tag:hover {
    background-color: var(--color-accent);
    color: var(--color-black);
}

/* Section label (декоративний рядок) */
.section-label {
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--color-text-faint);
    margin-bottom: var(--space-4);
}

/* ─────────────────────────────────────────────────────
   7. ACCESSIBILITY
   ───────────────────────────────────────────────────── */

.skip-link {
    position: absolute;
    top: -100%;
    left: 1rem;
    z-index: var(--z-toast);
    padding: 0.5rem 1rem;
    background: var(--color-accent);
    color: var(--color-black);
    font-weight: 600;
    border-radius: var(--radius-sm);
    transition: top var(--transition-fast);
}
.skip-link:focus {
    top: 1rem;
}

/* Focus visible */
*:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

/* ─────────────────────────────────────────────────────
   8. АНІМАЦІЇ (базові keyframes)
   ───────────────────────────────────────────────────── */

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-24px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1); }
}

/* Marquee (клієнти) */
@keyframes marqueeLeft {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@keyframes marqueeRight {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}

/* ─────────────────────────────────────────────────────
   SITE STRUCTURE (мінімальний layout каркас)
   ───────────────────────────────────────────────────── */

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-main {
    flex: 1;
}

/* TODO: Всі стилі компонентів — у відповідних CSS файлах */