/**
 * brand.css — Единая дизайн-система Эстетички
 *
 * Single source of truth для всех blade-файлов.
 * Tokens, reset, typography, buttons, cards, focus ring, utilities.
 *
 * Артём CCO, 2026-04-13
 */

/* ═══ TOKENS ═══════════════════════════════════════════════════════════════ */
:root {
    --color-accent:    #874b45;
    --color-hover:     #6d3c37;
    --color-bg:        #FAFAF8;
    --color-text:      #191c1d;
    --color-border:    rgba(25, 28, 29, 0.12);
    --color-sand:      #F4EFE9;
    --color-bone:      #EBE4DA;
    --color-ink:       #4A4743;
    --color-ink-soft:  #7C7872;

    /* Functional aliases */
    --color-muted:     #7C7872;       /* вместо rgba(25,28,29,0.55) */
    --color-border-strong: rgba(25, 28, 29, 0.22);
    --color-selected:  #fdf5f4;       /* quiz opt selected, hover states */

    /* Confidence tier signals (Артём CCO, Phase 11 02.05.2026)
       Используются на /ccs (in-frame MAE preview, sticky bar accent dot)
       и в /admin/calibration/phase11 heatmap. Не светофор — typographic
       сигналы через 8px dot слева от текста, фон всегда нейтральный. */
    --color-success:    #4A8B6F;      /* sage — high confidence */
    --color-warning:    #C9A96E;      /* warm sand — medium confidence */
    --color-soft-terra: #C17B74;      /* мягкая терракота — low (НЕ accent) */

    /* Radius system */
    --radius-pill:     50px;          /* кнопки */
    --radius-card:     16px;          /* карточки, tier cards */
    --radius-input:    12px;          /* инпуты, quiz options */
    --radius-sheet:    24px;          /* bottom sheets, modals */
    --radius-small:    8px;           /* badges, tags, small elements */

    /* Typography */
    --font:            'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semi:   600;        /* максимум, НИКОГДА 700 */
}

/* Браузер рисует <b>/<strong> весом 700, которого в брендбуке нет:
   без этого правила он синтезирует жирность из 600 и портит начертание.
   В статьях блога **жирного** много, поэтому правило обязательно. */
b, strong {
    font-weight: var(--font-weight-semi);
}

/* ═══ RESET ════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: var(--font);
    background: var(--color-bg);
    color: var(--color-text);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ═══ TYPOGRAPHY ═══════════════════════════════════════════════════════════ */
.section-label {
    display: block;
    font-family: var(--font);
    font-size: 11px;
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 14px;
}

.muted { color: var(--color-muted); }
.accent { color: var(--color-accent); }

/* Visually hidden (SEO h1, screen readers) */
.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ═══ BUTTONS ══════════════════════════════════════════════════════════════ */
.btn-primary {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--color-accent);
    color: #fff; text-decoration: none;
    min-height: 48px;
    padding: 14px 28px;
    border-radius: var(--radius-pill);
    border: none;
    font-family: var(--font);
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    line-height: 1;
    letter-spacing: 0;
    cursor: pointer;
    transition: background 150ms ease, transform 100ms ease;
}
.btn-primary:hover  { background: var(--color-hover); }
.btn-primary:active { transform: scale(0.98); }
.btn-primary:disabled { opacity: 0.4; cursor: default; transform: none; }

.btn-outline, .btn-ghost {
    display: inline-flex; align-items: center; justify-content: center;
    text-decoration: none;
    min-height: 48px;
    padding: 14px 28px;
    border-radius: var(--radius-pill);
    border: 1.5px solid var(--color-border);
    background: transparent;
    color: var(--color-text);
    font-family: var(--font);
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    line-height: 1;
    letter-spacing: 0;
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease, transform 100ms ease;
}
.btn-outline:hover, .btn-ghost:hover {
    background: var(--color-sand);
    border-color: var(--color-border-strong);
}
.btn-outline:active, .btn-ghost:active { transform: scale(0.98); }

.btn-text-link {
    display: inline-flex; align-items: center;
    color: var(--color-muted);
    font-family: var(--font);
    font-size: 13px;
    font-weight: var(--font-weight-semi);
    letter-spacing: 0.04em;
    text-decoration: none;
    cursor: pointer;
    transition: color .2s;
}
.btn-text-link:hover { color: var(--color-accent); }

/* ═══ TAGS ═════════════════════════════════════════════════════════════════ */
.tag {
    display: inline-block;
    background: var(--color-sand);
    border: 1px solid var(--color-border);
    color: var(--color-ink);
    font-family: var(--font);
    font-size: 11px;
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 7px 16px;
    border-radius: var(--radius-pill);
}

/* ═══ FOCUS RING (A11Y) ═══════════════════════════════════════════════════ */
a:focus-visible,
button:focus-visible,
.btn-primary:focus-visible,
.btn-outline:focus-visible,
.btn-ghost:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
    border-radius: inherit;
}
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) { outline: none; }

/* ═══ WRAP (layout container) ═════════════════════════════════════════════ */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* ═══ PREFERS REDUCED MOTION ══════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}