/**
 * Happy People — shared design tokens (production + design mocks).
 *
 * Production: enqueued before app-shell.css (functions.php).
 * Mocks: <link rel="stylesheet" href="_hp-tokens.css"> (apps/happypeople/design/_hp-tokens.css)
 * WP Features viewer rewrites that to this file (css/hp-design-tokens.css).
 *
 * Button shapes:
 *   --hp-radius-control (12px) — inputs, toolbar buttons, inline form actions
 *   --hp-radius-pill (999px)    — sheet footer CTAs, onboarding primary buttons, chips
 *   --hp-radius (14px)          — cards, panels, list rows
 */

:root {
    --hp-brand: #002d62;
    --hp-brand-mid: #1a4480;
    --hp-brand-soft: rgba(0, 45, 98, 0.08);
    --hp-accent: #0d6efd;
    --hp-accent-soft: rgba(13, 110, 253, 0.1);
    --hp-bg: #f5f2ed;
    --hp-surface: #ffffff;
    --hp-ink: #1a1a1a;
    --hp-text-muted: #6b7280;
    --hp-line: #e8e4de;
    --hp-shadow: 0 2px 12px rgba(26, 26, 26, 0.06);
    --hp-ok: #198754;
    --hp-ok-soft: rgba(25, 135, 84, 0.14);
    --hp-warn: #e8590c;
    --hp-danger: #dc3545;
    --hp-danger-soft: rgba(220, 53, 69, 0.12);

    --hp-radius: 14px;
    --hp-radius-control: 12px;
    --hp-radius-pill: 999px;
    --hp-photo-radius: 12px;

    /* Mock aliases (design/*.html local --vars) */
    --bg: var(--hp-bg);
    --surface: var(--hp-surface);
    --ink: var(--hp-ink);
    --muted: var(--hp-text-muted);
    --line: var(--hp-line);
    --brand: var(--hp-brand);
    --brand-mid: var(--hp-brand-mid);
    --brand-soft: var(--hp-brand-soft);
    --accent: var(--hp-accent);
    --accent-soft: var(--hp-accent-soft);
    --radius: var(--hp-radius);
    --radius-control: var(--hp-radius-control);
    --radius-pill: var(--hp-radius-pill);
    --shadow: var(--hp-shadow);
    --ok: var(--hp-ok);
    --warn: var(--hp-warn);
    --danger: var(--hp-danger);
}

/* Typography when Manrope + Inter are loaded */
.hp-app-template h1,
.hp-app-template h2,
.hp-app-template h3,
.hp-app-template .hp-headline {
    font-family: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.hp-app-template {
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Shared button utilities */
.hp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border: none;
    font-family: Manrope, inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    border-radius: var(--hp-radius-control);
}

.hp-btn--cta,
.hp-btn--pill {
    border-radius: var(--hp-radius-pill);
    padding: 12px 20px;
}

.hp-btn--primary {
    background: linear-gradient(135deg, var(--hp-brand), var(--hp-brand-mid));
    color: #fff;
}

.hp-btn--secondary {
    background: #f0eeea;
    color: var(--hp-brand);
    border: 1px solid var(--hp-line);
}

.hp-btn--ghost {
    background: transparent;
    color: var(--hp-brand-mid);
    border: 1px solid var(--hp-line);
}

/* Sheet footer CTAs — pill shape (onboarding, editors, bottom sheets) */
.bottom-sheet-footer .btn:not(.bottom-sheet-close),
.bottom-sheet-footer button:not(.bottom-sheet-close),
.bottom-sheet-save-btn,
.hp-todo-app__sheet-actions .hp-todo-app__btn,
.tr-sheet-footer .tr-btn,
.sabbatical-bottom-sheet .btn-primary,
.sheet-foot .btn,
.de-sheet-foot .btn,
.member-profile-form--compact .profile-save-btn,
.member-profile-form--compact .subscribe-button {
    border-radius: var(--hp-radius-pill);
}