/*
 * Imagictalk component primitives — aligned with the Figma handoff (frame 103:1971).
 *
 * Buttons (handoff Component › Button):
 *   - Pill shape: border-radius 999px in all sizes
 *   - Poppins Bold (700)
 *   - Primary: gradient #00E5A0 → #00A476 + brand-glow shadow
 *   - Sizes: SM 32px / MD 40px / LG 48px (handoff doesn't expose XL — kept as opt-in)
 */

/* ================= Button base ================= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--btn-gap, 8px);
    height: var(--btn-h, 40px);
    padding: 0 var(--btn-px, 20px);
    border-radius: var(--radius-full);
    font-family: var(--font-sans);
    font-size: var(--btn-fs, 14px);
    font-weight: 700;
    line-height: 1;
    border: 1.5px solid transparent;
    background: transparent;
    color: inherit;
    cursor: pointer;
    user-select: none;
    text-decoration: none;
    transition:
        background-color var(--duration-base) var(--ease-out),
        background-image var(--duration-base) var(--ease-out),
        color var(--duration-base) var(--ease-out),
        border-color var(--duration-base) var(--ease-out),
        box-shadow var(--duration-base) var(--ease-out),
        transform var(--duration-base) var(--ease-spring);
    white-space: nowrap;
}

.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0,229,160,0.30);
}

.btn:active { transform: translateY(1px); }

.btn[disabled],
.btn[aria-disabled="true"],
.btn.is-disabled {
    cursor: not-allowed;
    opacity: 0.5;
    pointer-events: none;
}

.btn .btn__icon { width: 1.15em; height: 1.15em; flex-shrink: 0; }

/* Sizes (handoff Component › Button): SM 32·12 / MD 40·16 / LG 48·20 */
.btn-sm { --btn-h: 32px; --btn-px: 12px; --btn-gap: 6px; --btn-fs: 13px; }
.btn-md { --btn-h: 40px; --btn-px: 16px; --btn-gap: 8px; --btn-fs: 14px; }
.btn-lg { --btn-h: 48px; --btn-px: 20px; --btn-gap: 8px; --btn-fs: 16px; }
/* xl is an internal extension — kept for legacy markup but not part of the handoff. */
.btn-xl { --btn-h: 48px; --btn-px: 20px; --btn-gap: 8px; --btn-fs: 16px; }

.btn--block { width: 100%; }

/* ================= Filled variants ================= */

.btn-primary {
    background-color: var(--brand-400);
    background-image: none;
    color: var(--neutral-0);
    border-color: transparent;
    background-clip: border-box;
    box-shadow: var(--shadow-brand-glow);
}
.btn-primary:hover {
    background-color: var(--brand-300);
    box-shadow: var(--shadow-brand-glow), 0 0 0 4px rgba(0, 229, 160, 0.12);
    transform: translateY(-1px);
}
.btn-primary:active {
    background-color: var(--brand-500);
    transform: translateY(1px);
}

.btn-secondary {
    background-color: var(--surface);
    color: var(--text-primary);
    border-color: var(--border-default);
}
.btn-secondary:hover { background-color: var(--surface-2); border-color: var(--border-strong); }
.btn-secondary:active { background-color: var(--surface-3); }

.btn-tertiary,
.btn-ghost {
    background-color: transparent;
    color: var(--brand-500);
}
.btn-tertiary:hover,
.btn-ghost:hover { background-color: var(--brand-100); color: var(--brand-600); }
.btn-tertiary:active,
.btn-ghost:active { background-color: var(--brand-200); }

.btn-danger {
    background-color: var(--error);
    color: var(--neutral-0);
    box-shadow: 0 8px 18px -2px rgba(239,68,68,0.40);
}
.btn-danger:hover { background-color: #DC2A2A; }
.btn-danger:active { background-color: #B91C1C; }
.btn-danger:focus-visible { box-shadow: 0 0 0 3px rgba(239,68,68,0.32); }

.btn-accent {
    background-color: var(--blue-400);
    color: var(--neutral-0);
}
.btn-accent:hover { background-color: var(--blue-300); }
.btn-accent:active { background-color: var(--blue-500); }

/* ================= Outline / Stroke ================= */

.btn--outline { background-image: none !important; background-color: transparent !important; border-width: 1.5px; box-shadow: none !important; }

.btn-primary.btn--outline { color: var(--brand-500); border-color: var(--brand-400); }
.btn-primary.btn--outline:hover { background-color: var(--brand-100) !important; border-color: var(--brand-500); color: var(--brand-600); }
.btn-primary.btn--outline:active { background-color: var(--brand-200) !important; }

.btn-secondary.btn--outline { color: var(--text-primary); border-color: var(--border-strong); }
.btn-secondary.btn--outline:hover { background-color: var(--surface-2) !important; }

.btn-tertiary.btn--outline,
.btn-ghost.btn--outline { color: var(--brand-500); border-color: var(--brand-300); }
.btn-tertiary.btn--outline:hover,
.btn-ghost.btn--outline:hover { background-color: var(--brand-100) !important; border-color: var(--brand-400); }

.btn-danger.btn--outline { color: var(--error); border-color: var(--error); box-shadow: none; }
.btn-danger.btn--outline:hover { background-color: rgba(239,68,68,0.08) !important; }

/* ================= Icon Button ================= */

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ibtn-s, 40px);
    height: var(--ibtn-s, 40px);
    border-radius: var(--ibtn-r, 12px);
    border: 1.5px solid transparent;
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition:
        background-color var(--duration-base) var(--ease-out),
        color var(--duration-base) var(--ease-out),
        border-color var(--duration-base) var(--ease-out),
        box-shadow var(--duration-base) var(--ease-out);
}
.btn-icon:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(0,229,160,0.30); }
.btn-icon[disabled], .btn-icon.is-disabled { opacity: 0.5; pointer-events: none; cursor: not-allowed; }

.btn-icon-sm { --ibtn-s: 32px; --ibtn-r: 10px; }
.btn-icon-md { --ibtn-s: 40px; --ibtn-r: 12px; }
.btn-icon-lg { --ibtn-s: 48px; --ibtn-r: 14px; }

.btn-icon.tone-brand    { background-image: linear-gradient(135deg, var(--brand-400), var(--brand-500)); color: var(--neutral-0); box-shadow: var(--shadow-brand-glow); }
.btn-icon.tone-brand:hover { background-image: linear-gradient(135deg, var(--brand-300), var(--brand-400)); }
.btn-icon.tone-accent   { background-color: var(--blue-400); color: var(--neutral-0); }
.btn-icon.tone-neutral  { background-color: var(--neutral-700); color: var(--neutral-0); }
.btn-icon.tone-danger   { background-color: var(--error); color: var(--neutral-0); }

.btn-icon.tone-brand-soft   { background-color: var(--brand-100); color: var(--brand-600); }
.btn-icon.tone-accent-soft  { background-color: var(--blue-100); color: var(--blue-400); }
.btn-icon.tone-neutral-soft { background-color: var(--neutral-100); color: var(--neutral-700); }
.btn-icon.tone-danger-soft  { background-color: rgba(239,68,68,0.12); color: var(--error); }

.btn-icon.is-outline { background: transparent; border-color: var(--border-default); color: var(--text-primary); }
.btn-icon.is-outline.tone-brand { border-color: var(--brand-400); color: var(--brand-500); }
.btn-icon.is-outline.tone-danger { border-color: var(--error); color: var(--error); }

.btn-icon.is-ghost { background: transparent; color: var(--text-secondary); }
.btn-icon.is-ghost:hover { background-color: var(--surface-3); color: var(--text-primary); }

.btn-icon svg, .btn-icon i { width: 50%; height: 50%; }

/* ================= Cards (handoff: Default / Featured / Dark) ================= */

.card {
    background: var(--surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xl);
    padding: 24px;
    box-shadow: var(--shadow-sm);
}
.card-featured {
    border: 2px solid var(--brand-400);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-md);
}
.card-dark {
    background: var(--neutral-500);
    color: var(--neutral-0);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-md);
}
.card-dark h1, .card-dark h2, .card-dark h3 { color: var(--neutral-0); }

/* ================= Chips ================= */

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    background-color: var(--surface-3);
    color: var(--text-primary);
    border: 1px solid var(--border-default);
}
.chip-brand   { background-color: var(--brand-100);  color: var(--brand-600);  border-color: transparent; }
.chip-blue    { background-color: var(--blue-100);   color: var(--blue-400);   border-color: transparent; }
.chip-purple  { background-color: var(--purple-100); color: var(--purple-500); border-color: transparent; }
.chip-success { background-color: rgba(34,197,94,0.12);  color: #166534; border-color: transparent; }
.chip-warning { background-color: rgba(245,158,11,0.16); color: #8A5A00; border-color: transparent; }
.chip-error   { background-color: rgba(239,68,68,0.12);  color: #8A1F1F; border-color: transparent; }

/* Legacy aliases — keep for older pages until migrated */
.chip-accent  { background-color: var(--blue-100);   color: var(--blue-400);   border-color: transparent; }
.chip-magenta { background-color: var(--purple-100); color: var(--purple-500); border-color: transparent; }

/* ================= iOS: prevent auto-zoom on input focus ================= */
/* Mobile Safari zooms in when a focused form control has font-size < 16px and
   never restores the zoom afterwards. Force >=16px on touch-sized viewports so
   focusing any field keeps the page at its original scale. */
@media (max-width: 768px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
    select,
    textarea {
        font-size: 16px !important;
    }
}