:root {
    --brand-black: #000000;
    --brand-orange: #ff5a1f;
    --brand-orange-hover: #e04b18;
    --brand-gray: #555555;
    --brand-white: #ffffff;

    --brand-font-family: 'Inter', sans-serif;

    --primary-color: var(--brand-orange);
    --primary-hover: var(--brand-orange-hover);
    --primary-light: #fff0eb;

    --sidebar-bg: var(--brand-black);
    --sidebar-hover: #151515;
    --sidebar-text: #8b8b8b;
    --sidebar-active: var(--brand-white);

    --bg-light: #f9fafb;
    --text-dark: #111827;
    --text-muted: #6b7280;
    --border-light: #e5e7eb;

    /* Global visual baseline (Sites/Edit approved style) */
    --app-surface-radius: 28px;
    --app-surface-padding: 0.75rem;
    --app-header-radius: 22px;
    --app-header-padding: 0.2rem 0.5rem;
    --app-header-gap: 0.75rem;

    --app-card-radius: var(--app-header-radius);
    --app-card-border: 1px solid var(--border-light);

    --app-font-size-base: 1rem;
    --app-font-size-title: clamp(1.35rem, 2vw, 2rem);
    --app-font-size-label: 0.875rem;
    --app-font-size-help: 0.78rem;

    --app-input-height: 42px;
    --app-input-padding-x: 0.75rem;
    --app-input-padding-y: 0.5rem;
    --app-input-radius: 0.5rem;
}

.text-brand {
    color: var(--primary-color) !important;
}

.text-brand:hover {
    color: var(--primary-hover) !important;
}

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

.btn-brand:hover, .btn-brand:focus, .btn-brand:active {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
    color: var(--brand-white);
}