/*
 * Buro quiz / pages shell — canonical brand (use these names everywhere):
 *   Dark:   #072B2E
 *   Main:   #5AB774
 *   Light:  #E8FCEC  (main light — soft fills, active tab tint)
 *   Accent: #FEF3A4
 */
/* Shared delete-confirmation UI (modals + custom-popup danger) */
:root {
    --buro-brand-dark-green: #072b2e;
    --buro-brand-main-green: #5ab774;
    --buro-brand-green-light: #e8fcec;
    --buro-brand-accent: #fef3a4;
    --buro-delete-overlay: rgba(7, 43, 46, 0.62);
    --buro-delete-surface: var(--buro-brand-green-light);
    --buro-delete-border: rgba(90, 183, 116, 0.4);
    --buro-delete-text: var(--buro-brand-dark-green);
    --buro-delete-text-muted: rgba(7, 43, 46, 0.78);
    --buro-delete-btn-bg: var(--buro-brand-dark-green);
    --buro-delete-btn-text: var(--buro-brand-accent);
    /* Delete primary action — hover: red (all delete modals / custom-popup danger) */
    --buro-delete-btn-hover-bg: #dc2626;
    --buro-delete-btn-hover-text: #ffffff;
    --buro-delete-secondary-bg: #ffffff;
    --buro-delete-secondary-border: var(--buro-brand-main-green);
    --buro-delete-icon-bg: rgba(90, 183, 116, 0.2);
    --buro-delete-icon-fg: var(--buro-brand-dark-green);
}
/* Shared quiz product tokens — matches quiz-builder.css; scope to body.quiz-app */
body.quiz-app {
    --qb-sidebar-w: 240px;
    --qb-panel-w: 480px;
    --qb-header-h: 52px;
    --qb-header-control-height: 32px;
    --qb-brand-deep: #072b2e;
    --qb-brand-primary: #5ab774;
    --qb-brand-accent: #fef3a4;
    --qb-brand-off: #e8fcec;
    --qb-h-primary-border-soft: #a3d4b3;
    --qb-h-primary-border-mid: #9ed0ae;
    --qb-bg: #f6f8fb;
    --qb-line-hair: #e5eaf1;
    --qb-surface: #ffffff;
    --qb-surface-muted: #f9fafb;
    --qb-surface-elevated: #f8fafc;
    --qb-border: #e5eaf1;
    --qb-border-hover: #cbd5e1;
    --qb-text: #111827;
    --qb-text-secondary: #6b7280;
    --qb-text-tertiary: #94a3b8;
    --qb-text-heading: #0f172a;
    --qb-primary: var(--qb-brand-primary);
    --qb-primary-hover: #4a9d63;
    --qb-primary-soft: rgba(90, 183, 116, 0.12);
    --qb-primary-ring: rgba(90, 183, 116, 0.28);
    --qb-success: #10b981;
    --qb-success-bg: #d1fae5;
    --qb-success-text: #065f46;
    --qb-danger: #dc2626;
    --qb-danger-soft: #fef2f2;
    --qb-chrome-dark: var(--qb-brand-deep);
    --qb-shadow-group: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --qb-radius: 12px;
    --qb-radius-sm: 8px;
    --lmpb-tab-active-bg: var(--qb-brand-off); /* Main light #E8FCEC */
    --lmpb-tab-active-text: var(--qb-brand-deep);
    /* Segmented tabs — track background (inactive segments stay transparent on top of this) */
    --qb-tab-track: var(--qb-surface);
    --lmpb-h-primary: var(--qb-brand-primary);
    /* Same names as lead-magnet-page-builder :root — shared analytics.css / components */
    --lmpb-brand-deep: var(--qb-brand-deep);
    --lmpb-brand-off: var(--qb-brand-off);
    --lmpb-h-primary-hover: var(--qb-primary-hover);
    --lmpb-h-primary-ring: var(--qb-primary-ring);
    --lmpb-h-primary-border-soft: var(--qb-h-primary-border-soft);
    --lmpb-h-primary-border-mid: var(--qb-h-primary-border-mid);

    /* Dark top bar — same as quiz-builder .qb-header */
    --qb-header-bg: var(--qb-brand-deep);
    --qb-header-border: rgba(255, 255, 255, 0.12);
    --qb-header-text: #f3fcf6;
    --qb-header-text-muted: rgba(255, 255, 255, 0.72);
    --qb-header-text-faint: rgba(255, 255, 255, 0.45);
    --qb-header-control-bg: rgba(255, 255, 255, 0.1);
    --qb-header-control-bg-hover: rgba(255, 255, 255, 0.18);
    --qb-header-control-border: rgba(255, 255, 255, 0.22);
    --qb-header-cta-bg: var(--qb-brand-primary);
    --qb-header-cta-hover: #4a9d63;
    --qb-header-cta-text: #ffffff;

    /* Align pages.css / ui-foundation controls with quiz builder */
    --ui-color-primary: var(--qb-brand-primary);
    --ui-color-primary-hover: #4a9d63;
    --ui-color-primary-contrast: #ffffff;
    --ui-focus-ring: 0 0 0 3px rgba(90, 183, 116, 0.22);

    background-color: var(--qb-bg);
}