/* P26M — utility classes.
 * Reusable building blocks. Use sparingly — prefer section-local CSS for
 * one-off layouts. These exist for buttons, badges, cards, scroll-reveals.
 */

/* ─── Buttons ───────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 14px 22px;
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: var(--fs-base);
    font-weight: 600;
    line-height: 1;
    letter-spacing: var(--tracking-normal);
    white-space: nowrap;
    transition: transform var(--dur-fast) var(--ease-out),
                background var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
    will-change: transform;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* P26M-436: было три сигнала объёма разом — верхний градиент-блик, инсет-
   highlight и двойная тень (тёмный drop + зелёный glow). Читалось как отлитая
   3D-пилюля, вопреки собственному правилу STYLEGUIDE §5 «не комбинировать
   больше одной тени на элемент». Теперь плоская заливка + один ореол
   `--btn-shadow` (токен уже был в tokens.css, но не подключён к компоненту).
   Контраст: тёмный текст на #73C44B — 9,0:1 (не ухудшился — под градиентом
   было то же самое, лишь неровно по высоте кнопки). */
.btn--primary {
    background: var(--color-brand);
    color: var(--color-text-inverse);
    box-shadow: var(--btn-shadow);
}

/* Силуэт даёт общее .btn:hover, здесь — светлее заливка (#73C44B → #8FE066,
   текст держит 12,1:1) и чуть сильнее ореол. Кольцо `0 0 0 3px` из прежней
   версии убрано: оно накладывалось на внешний :focus-visible outline. */
.btn--primary:hover {
    background: var(--color-brand-strong);
    box-shadow: var(--btn-shadow-hover);
}

/* Раньше делило весь блок с :hover, включая то же кольцо — на клавиатурном
   фокусе оно сливалось с внешним outline (2px/3px, base/reset.css), и фокус
   было не отличить от наведения мышью. Теперь кольцо ровно одно — внешнее
   (9,0:1 на тёмной теме, 5,2:1 на светлой, выше порога 3:1 non-text AA);
   заливка меняется как на hover — кнопка читается «активной целью». */
.btn--primary:focus-visible {
    background: var(--color-brand-strong);
    box-shadow: var(--btn-shadow-hover);
}

.btn--secondary {
    background: var(--color-elevated);
    color: var(--color-text);
    border: 1px solid var(--color-border-strong);
}
.btn--secondary:hover {
    background: var(--color-overlay);
    border-color: rgba(115, 196, 75, 0.40);
    color: var(--color-text);
}

.btn--ghost {
    background: transparent;
    color: var(--color-text);
    border: 1px solid transparent;
}
.btn--ghost:hover {
    background: var(--color-elevated);
    border-color: var(--color-border);
}

.btn--lg { padding: 18px 28px; font-size: var(--fs-lg); }
.btn--sm { padding: 10px 16px; font-size: var(--fs-sm); }
.btn[hidden] { display: none; }
.btn[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
}

/* ─── Badges / Chips ────────────────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    background: var(--color-elevated);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
}
.badge--brand {
    background: rgba(115, 196, 75, 0.10);
    color: var(--color-brand);
    border-color: rgba(115, 196, 75, 0.25);
}
.badge--accent {
    background: rgba(59, 91, 255, 0.12);
    color: var(--color-accent-strong);
    border-color: rgba(59, 91, 255, 0.25);
}

/* ─── Card surfaces ─────────────────────────────────────────────────────── */
.card {
    background: var(--color-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    box-shadow: var(--shadow-inset);
    transition: border-color var(--dur-base) var(--ease-out),
                background var(--dur-base) var(--ease-out),
                transform var(--dur-base) var(--ease-out);
}
.card--interactive:hover {
    transform: translateY(-2px);
    border-color: var(--color-border-strong);
    background: var(--color-overlay);
}

/* ─── Visually hidden but accessible ────────────────────────────────────── */
.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ─── Skip link ─────────────────────────────────────────────────────────── */
.skip-link {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: var(--z-toast);
    padding: 10px 16px;
    background: var(--color-brand);
    color: var(--color-text-inverse);
    border-radius: var(--radius-md);
    font-weight: 600;
    transform: translateY(-150%);
    transition: transform var(--dur-base) var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

/* ─── Scroll-reveal (IntersectionObserver toggles data-revealed) ────────── */
[data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--dur-slow) var(--ease-out),
                transform var(--dur-slow) var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal][data-revealed="true"] {
    opacity: 1;
    transform: none;
}

/* ─── Surface — used inside hero/sections for subtle elevation gradient ─── */
.surface-grain {
    position: relative;
    isolation: isolate;
}
.surface-grain::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    opacity: 0.35;
    pointer-events: none;
    z-index: -1;
    mix-blend-mode: overlay;
}

/* ─── Divider lines (decorative) ────────────────────────────────────────── */
.divider {
    height: 1px;
    background: linear-gradient(to right,
        transparent,
        var(--color-border-strong) 20%,
        var(--color-border-strong) 80%,
        transparent);
}

/* ─── Surface-grain: light-mode adjustment ──────────────────────────────── */
/* On dark bg the white noise blends well via overlay at 0.35 opacity.
   On light bg overlay mode creates a grey haze; switch to multiply so it
   reads as a subtle warm texture without washing out the background. */
.surface--light .surface-grain::before {
    opacity: 0.4;
    mix-blend-mode: multiply;
}