@font-face {
    font-family: "Fotogenic AI Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/inter/InterVariable.woff2") format("woff2");
}

:where(
    .fotogenic-ai-studio-page,
    .fotogenic-ai-settings,
    .fotogenic-ai-contained-overlay
) {
    --fa-font-sans: "Fotogenic AI Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --fa-color-surface: #ffffff;
    --fa-color-surface-alt: #f7f8fa;
    --fa-color-surface-soft: #f6f7f9;
    --fa-color-surface-muted: #eceff3;
    --fa-color-hover-surface: #f3f4f6;
    --fa-color-border: #d9dde4;
    --fa-color-border-strong: #b9c0cb;
    --fa-color-border-input: #b9c0cb;
    --fa-color-text: #171c25;
    --fa-color-text-strong: #171c25;
    --fa-color-text-muted: #677184;
    --fa-color-text-subtle: #8b94a3;
    --fa-color-muted: #9ca3af;
    --fa-color-accent: #121212;
    --fa-color-accent-hover: #1e1e1e;
    --fa-color-inverse: #ffffff;
    --fa-color-interactive: #3458f5;
    --fa-color-status-error: #991b1b;
    --fa-color-status-partial: #9a5b00;
    --fa-color-status-success: #157a3d;
    --fa-color-status-success-surface: #f3faf5;
    --fa-color-warm-border: #e6e8ec;
    --fa-color-focus-ring: rgba(18, 18, 18, 0.12);
    --fa-shadow-soft: 0 10px 28px rgba(15, 23, 42, 0.06);
    --fa-radius-md: 12px;
}

.fotogenic-ai-settings,
.fotogenic-ai-studio {
    font-family: var(--fa-font-sans);
    font-synthesis: none;
}

.fotogenic-ai-button-wrap {
    display: flex;
    justify-content: flex-start;
    padding: 10px;
    margin-bottom: 10px;
}

.wp-core-ui .fotogenic-ai-generate-button {
    background: var(--fa-color-accent);
    margin: 0;
    padding: 6px 18px;
    text-align: center;
    text-transform: none;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    color: var(--fa-color-inverse);
    box-shadow: none;
    border-radius: var(--fa-radius-md);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--fa-color-accent);
    line-height: 1.4;
    min-height: 0;
}

.wp-core-ui .fotogenic-ai-generate-button:hover {
    color: var(--fa-color-inverse);
    text-decoration: none;
    background: var(--fa-color-accent-hover);
    border-color: var(--fa-color-accent-hover);
}

.wp-core-ui .fotogenic-ai-generate-button:focus,
.wp-core-ui .fotogenic-ai-generate-button:active,
.wp-core-ui .fotogenic-ai-generate-button:focus-visible {
    background: var(--fa-color-accent-hover);
    color: var(--fa-color-inverse);
    text-decoration: none;
    box-shadow: 0 0 0 3px var(--fa-color-focus-ring);
}

.wp-core-ui .fotogenic-ai-generate-button.is-disabled,
.wp-core-ui .fotogenic-ai-generate-button:disabled {
    background: var(--fa-color-surface-soft);
    border-color: var(--fa-color-surface-soft);
    color: var(--fa-color-muted);
    box-shadow: none;
    cursor: not-allowed;
    filter: none;
}

/* Shared server-driven image and copy experiences. */
