/*
 * Theme utility layer.
 * Shared classes for new components during migration.
 */

:root {
    --theme-focus-ring: 0 0 0 3px rgba(221, 183, 74, 0.28);
}

.theme-surface {
    background: var(--surface-bg);
    color: var(--text-primary);
}

.theme-card {
    background: var(--surface-card);
    color: var(--text-primary);
    border: var(--border-width-hairline) solid var(--ios-separator);
    border-radius: var(--radius-lg);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.34);
}

.theme-muted {
    color: var(--text-muted);
}

.theme-button {
    min-height: 46px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(221, 183, 74, 0.16);
    background: var(--action-primary-bg);
    color: var(--action-primary-fg);
    padding: 10px 18px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 0 rgba(10, 20, 12, 0.55), 0 14px 28px rgba(0, 0, 0, 0.24);
    transition: background var(--motion-speed-base) ease, transform 140ms ease, box-shadow 140ms ease;
}

.theme-button:hover {
    background: var(--action-primary-hover);
    transform: translateY(-1px);
}

.theme-button:focus-visible {
    outline: none;
    box-shadow: var(--theme-focus-ring);
}

.theme-button-secondary {
    background: rgba(255, 247, 220, 0.04);
    color: var(--text-primary);
    border-color: rgba(221, 183, 74, 0.22);
    box-shadow: 0 4px 0 rgba(25, 29, 18, 0.75);
}

.theme-button-secondary:hover {
    background: rgba(255, 247, 220, 0.08);
}

.theme-button-danger {
    background: rgba(203, 101, 88, 0.18);
    color: #ffd9d2;
    border-color: rgba(203, 101, 88, 0.28);
    box-shadow: 0 4px 0 rgba(72, 24, 20, 0.55);
}

.theme-button-danger:hover {
    background: rgba(203, 101, 88, 0.24);
}

.studio-container {
    overflow: hidden;
}

.studio-container-title {
    margin: 0;
    padding: 10px 10px;
    font-size: 17px;
    font-weight: 600;
    text-align: left;
}

.studio-container-content {
    padding: 0px;
}