/**
 * mostyfm Design Tokens & Variables
 * Establishes the 'Dark Premium' aesthetic.
 *
 * ACCENT SYSTEM (два источника правды):
 *   --color-accent-1  (#ffa04f) — оранжевый: интерактивные элементы (лайки, CTA, фокус форм, highlight)
 *   --color-accent-2  (#dcddd7) — жемчужный: структурные элементы (badges, пагинация, разделители)
 *
 *   Все остальные переменные (--color-accent, --color-accent-primary, --color-primary)
 *   являются алиасами и управляются через WordPress Customizer (inc/customizer.php).
 */

:root {
    /* ─── CANONICAL ACCENTS (управляются через Customizer) ─── */
    --color-accent-1: #ffa04f;
    /* Оранжевый — интерактивный */
    --color-accent-1-rgb: 255, 160, 79;
    /* для rgba() */
    --color-accent-2: #dcddd7;
    /* Жемчужный — структурный */
    --color-accent-2-rgb: 220, 221, 215;
    /* для rgba() */

    /* ─── АЛИАСЫ (обратная совместимость) ─── */
    --color-accent: var(--color-accent-1);
    /* интерактивный акцент: лайки, CTA, фокус */
    --color-accent-primary: var(--color-accent-2);
    /* структурный акцент: badges, пагинация */
    --color-primary: var(--color-accent-2);
    /* legacy: marquee bg, underlines */
    --color-accent-hover: #c4c5bf;
    /* hover для accent-2 */

    /* ─── BASE COLORS ─── */
    --color-bg: #f7f7f7;
    --color-surface: #ffffff;
    --color-text: #111111;
    --color-text-muted: rgba(0, 0, 0, 0.5);
    --color-border: rgba(0, 0, 0, 0.1);
    --dot-color: #e5e7eb;

    /* ─── TYPOGRAPHY ─── */
    --font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    /* ─── SPACING (4px baseline) ─── */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-8: 48px;
    --space-10: 64px;
    --space-12: 96px;
    --space-16: 128px;

    /* ─── SEMANTIC LAYOUT TOKENS ─── */
    --gap-cards: var(--space-6);
    /* Стандарт: отступ между карточками в сетках (32px, как в секции Анонсов) */

    /* ─── BORDER RADIUS ─── */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-pill: 9999px;
    --radius-card: 32px;
    --radius-card-inner: 24px;
    --radius-category: 40px;
    --radius-cta: 48px;

    /* ─── SHADOWS ─── */
    --shadow-soft: 0 4px 20px -2px rgba(0, 0, 0, 0.05), 0 0 3px rgba(0, 0, 0, 0.02);
    --shadow-hover: 0 10px 30px rgba(0, 0, 0, 0.1);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.4);

    /* ─── TRANSITIONS ─── */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

    /* ─── FOOTER TOKENS ─── */
    --footer-card-bg: #ffffff;
    --footer-text-primary: #111111;
    --footer-text-secondary: #444444;
    --footer-text-muted: #666666;
    --footer-pill-bg: rgba(0, 0, 0, 0.07);
    --footer-pill-color: #333333;
    --footer-pill-border: rgba(0, 0, 0, 0.12);
    --footer-link-color: #333333;
    --footer-link-hover: #000000;
    --footer-link-underline: #111111;
    --footer-logo-filter: brightness(0);
    --footer-tape-bg: rgba(15, 15, 15, 0.85);
}

[data-theme="dark"] {
    /* ─── DARK THEME OVERRIDES ─── */
    --color-bg: #0a0a0c;
    --color-surface: #121216;
    --color-text: #f3f4f6;
    --color-text-muted: rgba(255, 255, 255, 0.5);
    --color-border: rgba(255, 255, 255, 0.1);
    --dot-color: #1e1e24;
    /* Акценты в dark-теме не меняются — оба цвета работают на тёмном фоне */

    /* ─── FOOTER TOKENS (dark) ─── */
    --footer-card-bg: #1a1a1f;
    --footer-text-primary: #f3f4f6;
    --footer-text-secondary: #c4c5bf;
    --footer-text-muted: rgba(255, 255, 255, 0.45);
    --footer-pill-bg: rgba(255, 255, 255, 0.08);
    --footer-pill-color: #dcddd7;
    --footer-pill-border: rgba(255, 255, 255, 0.12);
    --footer-link-color: #c4c5bf;
    --footer-link-hover: #f3f4f6;
    --footer-link-underline: #dcddd7;
    --footer-logo-filter: brightness(0) invert(1);
    --footer-tape-bg: rgba(220, 221, 215, 0.15);
}