/* ==========================================================================
   Project Carnation — Shared component primitives
   ========================================================================== */

/* ---- Buttons ------------------------------------------------------------
   Use <a class="btn ..."> for navigation, <button class="btn ..."> for actions. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    min-height: 2.75rem; /* 44px touch target */
    padding: 0.75rem var(--space-lg);
    border: var(--border-width) solid transparent;
    border-radius: var(--radius);
    font-family: var(--font-sans);
    font-size: var(--text-label-md-size);
    line-height: var(--text-label-md-leading);
    font-weight: var(--text-label-weight);
    letter-spacing: var(--text-label-md-tracking);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: none;
    transition:
        background-color var(--duration-fast) var(--ease-standard),
        border-color var(--duration-fast) var(--ease-standard),
        color var(--duration-fast) var(--ease-standard);
}

.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
}

.btn--primary {
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    border-color: var(--color-primary);
}

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

.btn--secondary {
    background-color: var(--color-surface);
    color: var(--color-primary);
    border-color: var(--color-border);
}

.btn--secondary:hover {
    background-color: var(--color-surface-recessed);
    border-color: var(--color-border-strong);
    color: var(--color-primary);
}

.btn--sm {
    min-height: 2.25rem;
    padding: var(--space-sm) var(--space-md);
}

.btn--lg {
    min-height: 3rem;
    padding: 0.875rem var(--space-lg);
}

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

@media (max-width: 767.98px) {
    .btn--block-mobile {
        display: flex;
        width: 100%;
    }
}

/* Icons inside buttons/links are decorative unless labelled */
.btn svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

/* ---- Icons -------------------------------------------------------------
   Inline SVG from the Icon component: sized to the surrounding text and
   coloured with currentColor. Always decorative (aria-hidden). */
.icon {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
}

/* ---- Keylines & accents ------------------------------------------------ */
.keyline {
    border: var(--keyline);
}

.rule-accent {
    width: var(--space-xl);
    height: 0;
    border: 0;
    border-top: var(--border-width) solid var(--color-accent-rule);
}

/* ---- Surfaces ---------------------------------------------------------- */
.panel {
    background-color: var(--color-surface-raised);
    border: var(--keyline);
    border-radius: var(--radius);
}

.panel--recessed {
    background-color: var(--color-surface-recessed);
}

/* Genuine overlays only (menus, popovers, dialogs) */
.overlay-surface {
    background-color: var(--color-surface-raised);
    border: var(--keyline);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-overlay);
}

/* ---- Figures / images --------------------------------------------------
   Meaningful images: provide descriptive alt text (+ optional <figcaption>).
   Decorative images: alt="" (and aria-hidden="true" on inline SVG). */
.figure {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.figure figcaption {
    color: var(--color-text-muted);
    font-size: var(--text-caption-size);
    line-height: var(--text-caption-leading);
}

/* ---- Forms (foundation only) ------------------------------------------ */
.field {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.field__label {
    font-size: var(--text-label-md-size);
    line-height: var(--text-label-md-leading);
    font-weight: var(--text-label-weight);
    color: var(--color-text);
}

.field__hint {
    font-size: var(--text-body-sm-size);
    line-height: var(--text-body-sm-leading);
    color: var(--color-text-muted);
}

.field__input {
    min-height: 2.75rem;
    padding: var(--space-sm) 0.75rem;
    background-color: var(--color-surface-raised);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text);
}

.field__input:hover {
    border-color: var(--color-text-muted);
}

.field__input:focus-visible {
    border-color: var(--color-focus-ring);
}

.field__input[aria-invalid="true"] {
    border-color: var(--color-danger);
}