/* Shared Global Theme Styles */

.bpm-project-theme {
    --bpm-primary: var(--bpm-project-primary);
    --bpm-primary-dark: var(--bpm-project-primary-dark);
    --bpm-primary-light: var(--bpm-project-primary-light);
    --bpm-bg: var(--bpm-project-bg);
    --bpm-surface: var(--bpm-project-surface);
    --bpm-card-bg: var(--bpm-project-surface);
    --bpm-border: var(--bpm-project-border);
    --bpm-text: var(--bpm-project-text);
    --bpm-muted: var(--bpm-project-muted);
    --bpm-focus: var(--bpm-project-focus);
    --bpm-font-family: var(--bpm-project-font-family, "Inter", "Segoe UI", Arial, sans-serif);
    --bpm-font-size: var(--bpm-project-font-size, 14px);
    --bpm-font-weight: var(--bpm-project-font-weight, 500);
    color: var(--bpm-text);
    font-family: var(--bpm-font-family);
    font-size: var(--bpm-font-size);
    font-weight: var(--bpm-font-weight);
}

.bpm-form-theme {
    --bpm-active-primary: var(--bpm-form-primary, var(--bpm-project-primary));
    --bpm-active-bg: var(--bpm-form-bg, var(--bpm-project-bg));
    --bpm-active-surface: var(--bpm-form-surface, var(--bpm-project-surface));
    --bpm-active-border: var(--bpm-form-border, var(--bpm-project-border));
    --bpm-active-focus: var(--bpm-form-focus, var(--bpm-project-focus));
    --bpm-active-font-family: var(--bpm-form-font-family, var(--bpm-font-family));
    --bpm-active-font-size: var(--bpm-form-font-size, var(--bpm-font-size));
    --bpm-active-font-weight: var(--bpm-form-font-weight, var(--bpm-font-weight));
    background: var(--bpm-active-bg);
    border-color: var(--bpm-active-border);
    color: var(--bpm-text);
    font-family: var(--bpm-active-font-family);
    font-size: var(--bpm-active-font-size);
    font-weight: var(--bpm-active-font-weight);
}

    .bpm-form-theme .section-card {
        background: var(--bpm-active-surface);
        border-color: var(--bpm-active-border);
    }

.bpm-field {
    --bpm-field-primary: var(--bpm-active-primary, var(--bpm-primary));
    --bpm-field-border: var(--bpm-active-border, var(--bpm-border));
    --bpm-field-focus: var(--bpm-active-focus, var(--bpm-focus));
    --bpm-field-label-color: var(--field-label-color, var(--bpm-text));
    --bpm-field-label-size: var(--field-label-size, 0.875rem);
    --bpm-field-label-weight: var(--field-label-weight, 600);
}

    .bpm-field .field-label {
        color: var(--bpm-field-label-color);
        font-size: var(--bpm-field-label-size);
        font-weight: var(--bpm-field-label-weight);
    }

    .bpm-field input,
    .bpm-field select,
    .bpm-field textarea {
        border-color: var(--bpm-field-border);
        font: inherit;
    }

        .bpm-field input:focus,
        .bpm-field select:focus,
        .bpm-field textarea:focus {
            outline: 0;
            border-color: var(--bpm-field-focus);
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--bpm-field-focus) 18%, transparent);
        }

.theme-catalog-preview {
    min-height: 7rem;
    border: 1px solid var(--bpm-project-border);
    border-radius: 0.9rem;
    background: radial-gradient(circle at 85% 10%, rgba(255, 255, 255, 0.25), transparent 28%), linear-gradient( var(--bpm-project-gradient-angle), var(--bpm-project-primary-dark) 0%, var(--bpm-project-primary) 52%, var(--bpm-project-primary-light) 100% );
    color: #ffffff;
}

/* Theme typography reaches both the designer and runtime controls. Field tokens
   and inline component styles still take precedence over these defaults. */
.bpm-form-theme :is(.runtime-field, .field-shell) :is(input, select, textarea) {
    font-family: var(--bpm-active-font-family, var(--bpm-form-font-family, var(--bpm-project-font-family)));
    font-size: var(--bpm-active-font-size, var(--bpm-form-font-size, var(--bpm-project-font-size)));
    font-weight: var(--bpm-active-font-weight, var(--bpm-form-font-weight, var(--bpm-project-font-weight)));
    color: var(--bpm-text);
    border-radius: var(--bpm-form-radius, var(--bpm-project-radius, 14px));
}
.bpm-form-theme.bpm-field-style-underline :is(.runtime-field, .field-shell) :is(input, select, textarea) {
    border-radius: 0;
}
.bpm-form-theme .form-action-button {
    border-radius: var(--button-radius, var(--bpm-form-radius, var(--bpm-project-radius, 14px)));
}
.bpm-form-theme :is(.runtime-field, .field-shell) :is(input, select, textarea):focus {
    border-color: var(--bpm-field-focus, var(--bpm-form-focus, var(--bpm-project-focus)));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--bpm-field-focus, var(--bpm-form-focus, var(--bpm-project-focus))) 18%, transparent);
}