:root {
    --brand-primary: #4f46e5;
    --brand-secondary: #7c3aed;
    --brand-accent: #0ea5e9;

    --brand-primary-hover: color-mix(in srgb, var(--brand-primary) 85%, black);
    --brand-primary-active: color-mix(in srgb, var(--brand-primary) 75%, black);
    --brand-primary-subtle: color-mix(in srgb, var(--brand-primary) 12%, white);
    --brand-primary-border: color-mix(in srgb, var(--brand-primary) 40%, white);
    --brand-on-primary: #ffffff;

    --hh-gradient: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));

    /* HH3 look defaults */
    --hh-nav-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --hh-page-bg: #f8fafc;
    --hh-student-bg: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);

    /* Static semantic gradients (not school-themeable, same as HH3) */
    --hh-success-gradient: linear-gradient(135deg, #10b981 0%, #059669 100%);
    --hh-info-gradient: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    --hh-warning-gradient: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    --hh-danger-gradient: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);

    --hh-ink: #1f2937;
    --hh-muted: #6b7280;
    --hh-card-shadow: 0 4px 25px rgba(0, 0, 0, 0.08);
    --hh-card-shadow-hover: 0 8px 35px rgba(0, 0, 0, 0.15);
}

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

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

.bg-brand-gradient {
    background: var(--hh-gradient);
}

.btn-primary {
    --bs-btn-bg: var(--brand-primary);
    --bs-btn-border-color: var(--brand-primary);
    --bs-btn-hover-bg: var(--brand-primary-hover);
    --bs-btn-hover-border-color: var(--brand-primary-hover);
    --bs-btn-active-bg: var(--brand-primary-active);
    --bs-btn-active-border-color: var(--brand-primary-active);
    --bs-btn-disabled-bg: var(--brand-primary);
    --bs-btn-disabled-border-color: var(--brand-primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--brand-primary);
    --bs-btn-border-color: var(--brand-primary);
    --bs-btn-hover-bg: var(--brand-primary);
    --bs-btn-hover-border-color: var(--brand-primary);
    --bs-btn-active-bg: var(--brand-primary-active);
    --bs-btn-active-border-color: var(--brand-primary-active);
    --bs-btn-focus-shadow-rgb: 79, 70, 229;
}