/**
 * Stay Blessed Insurance — design tokens (single source of truth).
 * Spec §17: White, Black, Navy, Gold gradient.
 * Load this file FIRST (after modern.css). Do not duplicate hex values elsewhere.
 */
:root {
    /* Brand colors — client spec: Navy #003F8A, Gold #A97019 → #F7BF00 */
    --brand-gold-start: #a97019;
    --brand-gold-end: #f7bf00;
    --brand-gold: #a97019;
    --brand-accent: var(--brand-gold-end);
    --brand-success: #50c878;

    --sb-white: #ffffff;
    --sb-black: #0a0a0a;
    --sb-navy: #003f8a;
    --sb-navy-dark: #002a5c;
    --sb-navy-light: #1a5cad;
    --sb-gold: var(--brand-gold);
    --sb-gold-start: var(--brand-gold-start);
    --sb-gold-end: var(--brand-gold-end);
    --sb-accent: var(--brand-accent);
    --sb-success: var(--brand-success);
    --sb-gold-gradient: linear-gradient(135deg, var(--sb-gold-start) 0%, var(--sb-gold-end) 100%);
    --sb-hero-gradient: var(--sb-navy);

    /* UI neutrals */
    --sb-page-bg: #f4f6f9;
    --sb-surface: #ffffff;
    --sb-surface-muted: #f8fafc;
    --sb-border: #e2e8f0;
    --sb-border-strong: #cbd5e1;
    --sb-text: var(--sb-black);
    --sb-text-muted: #475569;
    --sb-text-on-navy: #ffffff;
    --sb-text-on-gold: var(--sb-black);

    /* Legacy template aliases (custom.css / Bootstrap overrides) */
    --primary-color: var(--sb-navy);
    --secondary-color: var(--sb-accent);

    /* Typography — Avenir Next LT Pro Bold (client brand) */
    --sb-font: "Avenir Next LT Pro", "Avenir Next", Avenir, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --sb-font-weight-normal: 400;
    --sb-font-weight-semibold: 600;
    --sb-font-weight-bold: 700;
    --sb-font-weight-extrabold: 700;

    /* Spacing & shape */
    --sb-radius-sm: 0.5rem;
    --sb-radius-md: 0.75rem;
    --sb-radius-lg: 1rem;
    --sb-radius-xl: 1.25rem;

    /* Elevation */
    --sb-shadow-sm: 0 1px 2px rgba(10, 10, 10, 0.06);
    --sb-shadow-md: 0 4px 16px rgba(0, 63, 138, 0.08);
    --sb-shadow-lg: 0 12px 40px rgba(0, 42, 92, 0.14);
    --sb-shadow-card: 0 2px 8px rgba(10, 10, 10, 0.04), 0 8px 24px rgba(0, 63, 138, 0.06);

    /* Sidebar */
    --sb-sidebar-width: 260px;
    --sb-sidebar-bg: var(--sb-navy);
    --sb-sidebar-text: rgba(255, 255, 255, 0.88);
    --sb-sidebar-text-muted: rgba(255, 255, 255, 0.55);
    --sb-sidebar-active-bg: var(--sb-gold-gradient);
    --sb-sidebar-child-active-bg: rgba(255, 255, 255, 0.12);
    --sb-sidebar-hover-bg: rgba(255, 255, 255, 0.08);

    /* Transitions */
    --sb-ease: 0.2s ease;
}