/*
 * Compatibility layer: re-skins the legacy app.css classes that views still
 * use, so every page follows the brand without markup changes. Each rule maps
 * an old class onto a component from components.css. Delete a rule here once
 * no view uses that class any more (docs/style-migration-plan.md, phase 4).
 * Colours ONLY via tokens.
 */

/* ── Buttons: .btn-3d family → the button system ──────────────────────────
 *   green  → primary     yellow → accent      blue/violet/purple → secondary
 *   outline → subtle     red → danger
 */
.btn-3d {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.7rem 1.35rem;
    border: 2px solid transparent;
    border-radius: var(--radius-pill);
    font-family: var(--font-text);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.15;
    text-transform: none;
    letter-spacing: normal;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-3d:active,
.btn-sm:active,
.btn-lg:active,
.btn-chip:active,
.dashboard-tab-btn:active { transform: none !important; box-shadow: none !important; }

.btn-3d-green { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.btn-3d-green:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--on-primary); }

.btn-3d-yellow,
.btn-3d-amber,
.btn-3d-orange { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.btn-3d-yellow:hover,
.btn-3d-amber:hover,
.btn-3d-orange:hover { background: color-mix(in srgb, var(--accent) 85%, var(--ink)); border-color: color-mix(in srgb, var(--accent) 85%, var(--ink)); color: var(--ink); }

.btn-3d-blue,
.btn-3d-violet,
.btn-3d-purple { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn-3d-blue:hover,
.btn-3d-violet:hover,
.btn-3d-purple:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }

.btn-3d-outline { background: var(--surface-raised); border-color: var(--rule-strong); color: var(--ink); }
.btn-3d-outline:hover { border-color: var(--ink); color: var(--ink); background: var(--surface-raised); }

.btn-3d-red { background: var(--danger); border-color: var(--danger); color: var(--on-danger); }
.btn-3d-red:hover { background: var(--danger-hover); border-color: var(--danger-hover); color: var(--on-danger); }

.btn-md { min-height: 44px; padding: 0.7rem 1.35rem; font-size: 1rem; }

/* Chips (theme pickers, filters, amount choices) */
.btn-chip {
    border: 1.5px solid var(--rule-strong) !important;
    border-radius: var(--radius-pill) !important;
    background: var(--surface-raised) !important;
    color: var(--ink) !important;
    box-shadow: none !important;
    font-family: var(--font-text) !important;
    font-weight: 600 !important;
    text-transform: none !important;
}
.btn-chip:hover { border-color: var(--ink) !important; }
.btn-chip.active { background: var(--ink) !important; border-color: var(--ink) !important; color: var(--paper) !important; }

/* Small page-specific buttons */
.btn-nudge,
.btn-nudge-up,
.btn-nudge-down,
.btn-prev-step,
.btn-subtle-back,
.btn-party-toggle {
    border: 1.5px solid var(--rule-strong) !important;
    background: var(--surface-raised) !important;
    color: var(--ink) !important;
    box-shadow: none !important;
    border-radius: var(--radius-pill) !important;
    font-family: var(--font-text) !important;
    text-transform: none !important;
}
.btn-next-step,
.btn-claim-item,
.btn-claim-wildcard {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--on-primary) !important;
    box-shadow: none !important;
    border-radius: var(--radius-pill) !important;
    font-family: var(--font-text) !important;
    text-transform: none !important;
}
.btn-delete-item { color: var(--danger) !important; box-shadow: none !important; }
.btn-dream-gift,
.btn-make-dream {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: var(--ink) !important;
    box-shadow: none !important;
    animation: none !important;
    text-transform: none !important;
}

/* ── Cards ─────────────────────────────────────────────────────────────── */
.toy-card {
    background: var(--surface-raised);
    border: 1.5px solid var(--rule);
    border-radius: var(--radius-card);
    box-shadow: none;
    transition: none;
}
.toy-card.interactive:hover { transform: none; box-shadow: var(--shadow-lift); }

/* ── Labels, badges, pills ─────────────────────────────────────────────── */
.badge-tag,
.badge-pill,
.pillar-badge-tag,
.badge-store,
.badge-occasion,
.badge-wildcard,
.badge-dream-tag,
.preview-pill-live,
.preview-for-tag,
.rank-badge {
    border: 0 !important;
    border-radius: var(--radius-label) !important;
    background: var(--wash-accent) !important;
    color: var(--ink) !important;
    box-shadow: none !important;
    font-family: var(--font-text) !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    animation: none !important;
}

/* Admin tables/labels keep their structure, just the calmer type. */
.admin-stat-label,
table.admin-table th,
.stat-label { text-transform: none; letter-spacing: normal; }

/* ── Forms ─────────────────────────────────────────────────────────────── */
.form-label { font-family: var(--font-text); font-weight: 600; color: var(--ink); }
.form-hint { color: var(--ink-soft); }
.required { color: var(--danger); }

.styled-input,
input.styled-input,
.form-control,
.styled-form input[type="text"],
.styled-form input[type="url"],
.styled-form input[type="number"],
.styled-form input[type="email"],
.styled-form input[type="tel"],
.styled-form input[type="date"],
.styled-form input[type="time"],
.styled-form input[type="password"],
.styled-form select,
.styled-form textarea {
    background: var(--surface-raised);
    border: 1.5px solid var(--rule-strong);
    border-radius: var(--radius-card);
    color: var(--ink);
    font-family: var(--font-text);
    font-weight: 500;
    box-shadow: none;
}
.styled-input:focus,
input.styled-input:focus,
.form-control:focus,
.styled-form .form-control:focus,
.styled-form input:focus,
.styled-form select:focus,
.styled-form textarea:focus {
    outline: none;
    border-color: var(--focus);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 25%, transparent);
    background: var(--surface-raised);
}

/* ── Tabs (dashboard) ──────────────────────────────────────────────────── */
.dashboard-tab-bar { border-bottom: 1.5px solid var(--rule); background: transparent; box-shadow: none; gap: 1.25rem; }
.dashboard-tab-btn {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 3px solid transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--ink-soft) !important;
    font-family: var(--font-text) !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}
.dashboard-tab-btn:hover { color: var(--ink) !important; }
.dashboard-tab-btn.active { color: var(--ink) !important; border-bottom-color: var(--primary) !important; }

/* ── Alerts ────────────────────────────────────────────────────────────── */
.alert-banner { border-radius: var(--radius-card); border-width: 1.5px; box-shadow: none; font-weight: 500; }
.alert-success { background: var(--wash-success); border-color: color-mix(in srgb, var(--success) 40%, transparent); color: var(--ink); }
.alert-error { background: var(--wash-danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); color: var(--ink); }

/* ── Motion: calm instead of bouncy (art-direction §7) ─────────────────── */
.animate-bounce-in,
.animate-pop-in,
.animate-fade-in { animation: calmIn 0.25s ease-out both; }
@keyframes calmIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .animate-bounce-in,
    .animate-pop-in,
    .animate-fade-in { animation: none; }
}

/* The fixed floating-emoji canvas is gone from the layout; hide any stray copy. */
.bg-festive-canvas { display: none !important; }

/* Legacy containers sit on paper now. */
.main-content { background: transparent; }

/* ── Money: plain ink, never "success" green (art-direction: money is neutral) */
.price-chip,
.pledge-tag-pill,
.contributor-chip-badge {
    background: transparent !important;
    border: 0 !important;
    color: var(--ink) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    font-family: var(--font-display);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.price-chip--dream { gap: 0.4rem; }
.money { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── Pressable buttons (a "lip" under each button, like a toy key) ────────
 * One rule set for the button system and every legacy family mapped onto it.
 * --button-lip (tokens.css) controls the depth; 0 makes everything flat.
 */
.btn-primary, .btn-3d-green, .btn-next-step, .btn-claim-item, .btn-claim-wildcard,
.btn-accent, .btn-3d-yellow, .btn-3d-amber, .btn-3d-orange, .btn-dream-gift, .btn-make-dream,
.btn-secondary, .btn-subtle, .btn-3d-blue, .btn-3d-violet, .btn-3d-purple, .btn-3d-outline,
.btn-prev-step, .btn-subtle-back, .btn-nudge, .btn-nudge-up, .btn-nudge-down, .btn-party-toggle,
.btn-danger, .btn-danger-outline, .btn-3d-red {
    --lip-colour: var(--rule-strong);
    box-shadow: 0 var(--button-lip) 0 var(--lip-colour) !important;
    margin-bottom: var(--button-lip);
    transition: transform 0.08s ease, box-shadow 0.08s ease, background-color 0.15s ease, border-color 0.15s ease !important;
}
.btn-primary, .btn-3d-green, .btn-next-step, .btn-claim-item, .btn-claim-wildcard { --lip-colour: var(--primary-shade); }
.btn-accent, .btn-3d-yellow, .btn-3d-amber, .btn-3d-orange, .btn-dream-gift, .btn-make-dream { --lip-colour: var(--accent-shade); }
.btn-danger, .btn-3d-red { --lip-colour: var(--danger-shade); }
.btn-danger-outline { --lip-colour: color-mix(in srgb, var(--danger) 45%, transparent); }

/* Secondary family: white key with a grey edge. */
.btn-secondary, .btn-3d-blue, .btn-3d-violet, .btn-3d-purple {
    background: var(--surface-raised) !important;
    border-color: var(--rule-strong) !important;
    color: var(--ink) !important;
}
.btn-secondary:hover, .btn-3d-blue:hover, .btn-3d-violet:hover, .btn-3d-purple:hover { background: var(--wash-sky) !important; border-color: var(--pop-sky) !important; --lip-colour: var(--pop-sky); }

.btn-primary:active, .btn-3d-green:active, .btn-next-step:active, .btn-claim-item:active, .btn-claim-wildcard:active,
.btn-accent:active, .btn-3d-yellow:active, .btn-3d-amber:active, .btn-3d-orange:active, .btn-dream-gift:active, .btn-make-dream:active,
.btn-secondary:active, .btn-subtle:active, .btn-3d-blue:active, .btn-3d-violet:active, .btn-3d-purple:active, .btn-3d-outline:active,
.btn-prev-step:active, .btn-subtle-back:active, .btn-nudge:active, .btn-party-toggle:active,
.btn-danger:active, .btn-danger-outline:active, .btn-3d-red:active {
    transform: translateY(calc(var(--button-lip) - 1px)) !important;
    box-shadow: 0 1px 0 var(--lip-colour) !important;
}
/* Quiet links and icon-in-menu buttons stay flat. */
.btn-quiet, .nav-menu-btn, .header-actions .btn { box-shadow: none !important; margin-bottom: 0; }
.nav-menu-btn { border-color: var(--rule-strong) !important; }
@media (prefers-reduced-motion: reduce) {
    .btn:active, .btn-3d:active { transform: none !important; }
}

/* Cards: rounder, crisp white on the near-white page. */
.toy-card, .card { border-width: 2px; border-color: var(--rule); border-radius: var(--radius-card); background: var(--surface-raised); }
.chip, .chips a, .btn-chip { font-weight: 700 !important; }
.chip.active, .chip[aria-pressed="true"], .btn-chip.active { background: var(--secondary) !important; border-color: var(--secondary) !important; color: var(--on-secondary) !important; }