/* Vodovod Hrvatsko Primorje — design tokens (Knjiga standarda overlay).
   Layered over Bootstrap 4.6 + SB Admin 2; all surface overrides in app.css
   read from these custom properties. Swap the hex values here when the
   final brand book is signed off — no other file needs to change. */

:root {
    /* Brand palette */
    --vhp-color-primary:        #0A4A8F;
    --vhp-color-primary-700:    #073A72;
    --vhp-color-primary-500:    #0A4A8F;
    --vhp-color-primary-300:    #2A6BB0;
    --vhp-color-primary-100:    #E5EEF7;
    --vhp-color-accent:         #00A8D6;
    --vhp-color-accent-700:     #0089AE;

    /* Vertical accents — drive the cross-vertical banner border and any
       future "this row belongs to lab X" cues. Vrelo stays close to primary
       (it is the historical lab); Hrmotine takes a teal so the two read as
       distinct at a glance. */
    --vhp-color-vrelo:          #0A4A8F;
    --vhp-color-hrmotine:       #0E8A6F;

    /* Semantic surface roles (Bootstrap-aligned names so overrides map 1:1) */
    --vhp-color-success:        #1E8E3E;
    --vhp-color-warning:        #E37400;
    --vhp-color-danger:         #C5221F;
    --vhp-color-info:           var(--vhp-color-accent);

    /* Neutrals (drives sidebar contrast, body text, muted) */
    --vhp-color-surface:        #FFFFFF;
    --vhp-color-surface-alt:    #F6F8FB;
    --vhp-color-border:         #E2E6EC;
    --vhp-color-text:           #1F2A37;
    --vhp-color-text-muted:     #5B6675;
    --vhp-color-text-inverse:   #FFFFFF;

    /* Sidebar uses a darker shade of primary for depth. */
    --vhp-color-sidebar-from:   #0A4A8F;
    --vhp-color-sidebar-to:     #073A72;

    /* Typography */
    --vhp-font-family:          'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --vhp-font-weight-regular:  400;
    --vhp-font-weight-medium:   600;
    --vhp-font-weight-bold:     700;

    /* Spacing scale (4-pt grid) */
    --vhp-space-1: 0.25rem;
    --vhp-space-2: 0.5rem;
    --vhp-space-3: 0.75rem;
    --vhp-space-4: 1rem;
    --vhp-space-5: 1.5rem;
    --vhp-space-6: 2rem;

    /* Radii */
    --vhp-radius-sm: 0.25rem;
    --vhp-radius-md: 0.5rem;
    --vhp-radius-lg: 0.75rem;
    --vhp-radius-pill: 999px;

    /* Shadows */
    --vhp-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --vhp-shadow-md: 0 2px 8px rgba(15, 23, 42, 0.08);
    --vhp-shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.12);

    /* Focus ring — accessible against the brand primary */
    --vhp-focus-ring: 0 0 0 0.2rem rgba(10, 74, 143, 0.25);
}