:root {
    /* Brand ramp — derived from a-rsolar.com; see src/branding.py */
    --brand-color:       #4AB0C8;
    --brand-hover:       #3C92A8;
    --brand-text:        #327B8D;
    --brand-ui:          #43A0B6;
    --brand-tint:        #F4F9FA;
    --brand-tint-strong: #E9F2F5;
    --brand-ink:         #00223E;
    --brand-on-fill:     #00223E;
    --brand-rgb:         74, 176, 200;

    /* Surfaces and text */
    --bg:            #f9fafb;
    --surface:       #ffffff;
    --text:          #00223E;
    --muted:         #6C7179;
    --border:        #e5e7eb;
    /* Control borders only. WCAG 1.4.11 wants 3:1 for an input's boundary,
       which the decorative hairline above does not meet. */
    --border-strong: #939497;

    /* Nav */
    --nav-bg:   #ffffff;
    --nav-text: #00223E;

    --danger:       #b91c1c;
    --danger-text:  #991b1b;
    --danger-bg:    #fee2e2;
    --danger-line:  #fca5a5;
    --success:      #065f46;
    --success-bg:   #d1fae5;
    --success-line: #6ee7b7;
    --info:         #1e40af;
    --info-bg:      #dbeafe;
    --info-line:    #93c5fd;
    --warning:      #92400e;
    --warning-bg:   #fef3c7;
    --warning-line: #fcd34d;

    --radius-sm: 4px;
    --radius:    6px;
    --radius-lg: 8px;
    --radius-xl: 10px;

    --shadow-sm:  0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
    --shadow-md:  0 4px 20px rgba(0,0,0,.15);
    --shadow-lg:  0 6px 20px rgba(0,0,0,.10);
    --shadow-nav: 0 1px 2px rgba(0,0,0,.04);

    /* Two faces, scoped by role — see src/branding.py for why they must not be
       re-unified. */
    --font-brand: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-body:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}