/* ===========================================================================
 * Family Platform prototype — component styles v0.1
 * ---------------------------------------------------------------------------
 * Reusable component primitives. Keep this file flat; room-specific styles
 * belong under views/<room>/.
 * ========================================================================= */

/* ---- Button system ---- */
.fp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--fp-space-2);
    padding: var(--fp-space-3) var(--fp-space-5);
    border-radius: var(--fp-radius-pill);
    font-size: var(--fp-fs-md);
    font-weight: var(--fp-fw-semibold);
    line-height: var(--fp-lh-tight);
    min-height: var(--fp-touch-target, 44px);
    transition: transform var(--fp-dur-quick) var(--fp-ease-standard),
                box-shadow var(--fp-dur-quick) var(--fp-ease-standard),
                background-color var(--fp-dur-quick) var(--fp-ease-standard);
    user-select: none;
}
.fp-btn:hover { transform: translateY(-1px); }
.fp-btn:active { transform: translateY(0); }

.fp-btn--primary {
    background: var(--fp-sky-deep);
    color: #fff;
    box-shadow: var(--fp-shadow-sm);
}
.fp-btn--primary:hover { background: var(--fp-sky); box-shadow: var(--fp-shadow-md); }

.fp-btn--secondary {
    background: var(--fp-cream-tint);
    color: var(--fp-ink);
    border: 1px solid var(--fp-cream-shade);
}
.fp-btn--secondary:hover { background: var(--fp-cream-shade); }

.fp-btn--affirm {
    background: var(--fp-moss-deep);
    color: #fff;
}
.fp-btn--affirm:hover { background: var(--fp-moss); }

.fp-btn--danger {
    background: var(--fp-berry-deep);
    color: #fff;
}
.fp-btn--danger:hover { background: var(--fp-berry); }

.fp-btn--ghost {
    background: transparent;
    color: var(--fp-ink-soft);
}
.fp-btn--ghost:hover { background: var(--fp-cream-tint); color: var(--fp-ink); }

.fp-btn--sm { padding: var(--fp-space-2) var(--fp-space-4); font-size: var(--fp-fs-sm); min-height: 36px; }
.fp-btn--lg { padding: var(--fp-space-4) var(--fp-space-6); font-size: var(--fp-fs-lg); min-height: 56px; }

/* ---- Card ---- */
.fp-card {
    background: #fff;
    border: 1px solid var(--fp-cream-shade);
    border-radius: var(--fp-radius-lg);
    padding: var(--fp-space-5);
    box-shadow: var(--fp-shadow-sm);
}
.fp-card--padded { padding: var(--fp-space-6); }
.fp-card--interactive { cursor: pointer; transition: transform var(--fp-dur-quick) var(--fp-ease-standard), box-shadow var(--fp-dur-quick) var(--fp-ease-standard); }
.fp-card--interactive:hover { transform: translateY(-2px); box-shadow: var(--fp-shadow-md); }

/* ---- Badge ---- */
.fp-badge {
    display: inline-block;
    padding: var(--fp-space-1) var(--fp-space-3);
    border-radius: var(--fp-radius-pill);
    font-size: var(--fp-fs-xs);
    font-weight: var(--fp-fw-semibold);
    line-height: 1;
    letter-spacing: 0.03em;
}
.fp-badge--sun { background: var(--fp-sun-mist); color: var(--fp-sun-deep); }
.fp-badge--moss { background: var(--fp-moss-mist); color: var(--fp-moss-deep); }
.fp-badge--sky { background: var(--fp-sky-mist); color: var(--fp-sky-deep); }
.fp-badge--berry { background: var(--fp-berry-mist); color: var(--fp-berry-deep); }
.fp-badge--ink { background: var(--fp-ink); color: var(--fp-cream); }

/* ---- Field ---- */
.fp-field { display: flex; flex-direction: column; gap: var(--fp-space-2); }
.fp-field__label { font-size: var(--fp-fs-sm); font-weight: var(--fp-fw-semibold); color: var(--fp-ink); }
.fp-field__hint  { font-size: var(--fp-fs-xs); color: var(--fp-ink-whisper); }
.fp-field__input {
    padding: var(--fp-space-3) var(--fp-space-4);
    background: #fff;
    border: 1px solid var(--fp-cream-shade);
    border-radius: var(--fp-radius-md);
    font-size: var(--fp-fs-md);
    min-height: var(--fp-touch-target, 44px);
    transition: border-color var(--fp-dur-quick) var(--fp-ease-standard);
}
.fp-field__input:focus-visible { border-color: var(--fp-sky-deep); outline: none; }

/* ---- Jidoka cord button — present on every kid-facing surface ---- */
.fp-cord {
    position: fixed;
    bottom: var(--fp-space-5);
    right: var(--fp-space-5);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--fp-berry-deep);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    box-shadow: var(--fp-shadow-lg);
    z-index: var(--fp-z-cord);
    transition: transform var(--fp-dur-quick) var(--fp-ease-standard);
    cursor: pointer;
    user-select: none;
}
.fp-cord:hover { transform: scale(1.05); }
.fp-cord:active { transform: scale(0.95); }
.fp-cord__label { position: absolute; bottom: -22px; font-size: var(--fp-fs-xs); font-weight: var(--fp-fw-semibold); color: var(--fp-berry-deep); white-space: nowrap; }