html {
    min-height: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(circle at top right, rgba(124, 58, 237, 0.06), transparent 32%),
        linear-gradient(180deg, rgba(124, 58, 237, 0.03), transparent 18%),
        var(--color-bg);
    color: var(--color-fg);
    font-family: Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
}

a:hover {
    color: inherit;
}

.app-shell {
    min-height: 100vh;
}

.app-main {
    width: 100%;
    padding: clamp(0.75rem, 1.5vw, 1.25rem) clamp(0.75rem, 2vw, 2rem);
}

.app-main__surface {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
}

.hide {
    display: none !important;
}

.hide-for-editor-fullscreen {
    transition: opacity 160ms ease, transform 160ms ease;
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: var(--shadow-ring);
    border-color: var(--color-ring);
}

.form-control,
.form-select {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-fg);
}

.form-control:read-only,
.form-control[readonly] {
    color: var(--color-fg);
    -webkit-text-fill-color: var(--color-fg);
    background-color: var(--color-surface);
    border-color: var(--color-border);
    opacity: 1;
}

.form-control:focus,
.form-select:focus {
    color: var(--color-fg);
    background-color: var(--color-surface);
}

.input-group-text {
    background-color: var(--color-surface-elevated);
    border-color: var(--color-border);
    color: var(--color-fg);
}

.form-control::placeholder,
.form-select::placeholder {
    color: color-mix(in srgb, var(--color-fg-muted) 70%, transparent);
}

.text-muted,
.text-body-secondary,
.small,
small {
    color: var(--color-fg-muted) !important;
}

.card {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-fg);
}

.btn {
    border-radius: 0.9rem;
}

/* ---- Button colour overrides (token-based) ---- */
.btn-primary {
    --bs-btn-bg: var(--color-accent);
    --bs-btn-border-color: var(--color-accent);
    --bs-btn-hover-bg: color-mix(in srgb, var(--color-accent) 88%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--color-accent) 88%, black);
    --bs-btn-active-bg: color-mix(in srgb, var(--color-accent) 78%, black);
    --bs-btn-active-border-color: color-mix(in srgb, var(--color-accent) 78%, black);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-bg: var(--color-accent);
    --bs-btn-disabled-border-color: var(--color-accent);
}

.btn-secondary {
    --bs-btn-bg: var(--color-surface-elevated);
    --bs-btn-border-color: var(--color-border);
    --bs-btn-color: var(--color-fg);
    --bs-btn-hover-bg: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface-elevated));
    --bs-btn-hover-border-color: var(--color-accent);
    --bs-btn-hover-color: var(--color-fg);
    --bs-btn-active-bg: color-mix(in srgb, var(--color-accent) 15%, var(--color-surface-elevated));
    --bs-btn-active-border-color: var(--color-accent);
    --bs-btn-active-color: var(--color-fg);
}

.btn-outline-secondary {
    background-color: color-mix(in srgb, var(--color-accent) 6%, var(--color-surface));
    --bs-btn-color: var(--color-fg);
    --bs-btn-border-color: color-mix(in srgb, var(--color-accent) 24%, var(--color-border));
    --bs-btn-bg: color-mix(in srgb, var(--color-accent) 6%, var(--color-surface));
    --bs-btn-hover-bg: color-mix(in srgb, var(--color-accent) 14%, var(--color-surface-elevated));
    --bs-btn-hover-border-color: var(--color-accent);
    --bs-btn-hover-color: var(--color-fg);
    --bs-btn-active-bg: color-mix(in srgb, var(--color-accent) 18%, var(--color-surface-elevated));
    --bs-btn-active-border-color: var(--color-accent);
    --bs-btn-active-color: var(--color-fg);
    --bs-btn-disabled-bg: var(--color-surface);
    --bs-btn-disabled-border-color: var(--color-border);
}


.shadow-sm {
    box-shadow: var(--shadow-sm) !important;
}

.shadow {
    box-shadow: var(--shadow-md) !important;
}