/**
 * FBM Multi Messenger — Theme tokens (single source of truth)
 *
 * ACTIVE: Marketing Trust — Navy primary + Teal accent
 * To switch themes: comment out the active :root block and uncomment another below.
 */

/* ═══════════════════════════════════════════════════════════
   ACTIVE — Marketing Trust (Navy + Teal)
   Enterprise-credible landing + shared portal surfaces.
   ═══════════════════════════════════════════════════════════ */
:root {
    /* ── Brand (navy) ── */
    --color-primary-50: #F0F4F8;
    --color-primary-100: #D9E2EC;
    --color-primary-200: #BCCCDC;
    --color-primary-300: #9FB3C8;
    --color-primary-400: #627D98;
    --color-primary-500: #486581;
    --color-primary-600: #334E68;
    --color-primary-700: #243B53;
    --color-primary-800: #0F2A47;
    --color-primary-900: #0A1F33;

    --color-accent: #0E7C86;
    --color-accent-50: #E6F6F7;
    --color-accent-100: #B8E4E8;
    --color-accent-200: #7CCAD1;
    --color-accent-500: #14919B;
    --color-accent-600: #0E7C86;
    --color-accent-700: #0B6B73;
    --color-accent-rgb: 14, 124, 134;

    --color-sidebar: #0F2A47;
    --color-primary-rgb: 15, 42, 71;

    /* Flat aliases — keeps legacy var(--gradient-primary) working */
    --gradient-primary: #0F2A47;
    --gradient-primary-hover: #243B53;
    --gradient-surface: #F7F9FB;
    --gradient-accent: #0E7C86;

    --gradient-card-primary: #0F2A47;
    --gradient-card-blue: #334E68;
    --gradient-card-green: #0E7C86;
    --gradient-card-orange: #B45309;

    --primary-bg-clr: var(--color-sidebar);
    --secondary-bg-clr: var(--gradient-surface);
    --primary-bg-clr-contrast: var(--color-accent-600);

    /* ── Neutrals ── */
    --color-bg-page: #F7F9FB;
    --color-bg-card: #FFFFFF;
    --color-bg-muted: #EEF2F6;
    --color-bg-hover: #E8EEF4;
    --color-border: #E3E8EF;
    --color-border-focus: var(--color-accent-600);

    --color-text-primary: #0F2A47;
    --color-text-secondary: #627D98;
    --color-text-muted: #9FB3C8;
    --color-text-on-primary: #FFFFFF;
    --color-icon-muted: #627D98;

    /* ── Semantic ── */
    --color-success: #0F766E;
    --color-success-50: #E6F4F1;
    --color-success-100: #CCE9E4;
    --color-error: #B91C1C;
    --color-warning: #B45309;
    --color-info: #334E68;
    --color-danger: #DC2626;

    --gradient-success: #0F766E;
    --gradient-error: #B91C1C;
    --gradient-warning: #B45309;
    --gradient-info: #334E68;

    /* ── Shadows & radius ── */
    --shadow-sm: 0 1px 2px rgba(15, 42, 71, 0.05);
    --shadow-md: 0 4px 12px rgba(15, 42, 71, 0.08);
    --shadow-lg: 0 12px 28px rgba(15, 42, 71, 0.12);
    --shadow-card: 0 1px 3px rgba(15, 42, 71, 0.06), 0 1px 2px rgba(15, 42, 71, 0.04);
    --shadow-card-hover: 0 8px 20px rgba(15, 42, 71, 0.1);
    --shadow-pricing-featured: 0 16px 40px rgba(15, 42, 71, 0.14), 0 4px 12px rgba(14, 124, 134, 0.12);

    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-pill: 999px;

    /* ── Spacing scale ── */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 1.75rem;
    --space-8: 2rem;

    /* ── Type scale ── */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-md: 0.95rem;
    --text-lg: 1.125rem;
    --text-xl: 1.35rem;
    --text-display: 2.25rem;

    /* ── Motion ── */
    --motion-duration: 500ms;
    --motion-duration-fast: 200ms;
    --motion-ease: ease-out;
    --motion-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --motion-stagger: 90ms;
    --motion-stagger-md: 100ms;
    --motion-distance: 16px;
}

/* ═══════════════════════════════════════════════════════════
   OPTION A — Corporate Flat (uncomment to use)
   ═══════════════════════════════════════════════════════════
:root {
    --color-primary-50: #F9FAFB;
    --color-primary-100: #F3F4F6;
    --color-primary-200: #E5E7EB;
    --color-primary-300: #D1D5DB;
    --color-primary-400: #9CA3AF;
    --color-primary-500: #6B7280;
    --color-primary-600: #374151;
    --color-primary-700: #1F2937;
    --color-primary-800: #111827;
    --color-primary-900: #0F172A;

    --color-accent: #111827;
    --color-accent-50: #F3F4F6;
    --color-accent-100: #E5E7EB;
    --color-accent-200: #D1D5DB;
    --color-accent-500: #6B7280;
    --color-accent-600: #374151;
    --color-accent-700: #1F2937;
    --color-accent-rgb: 31, 41, 55;

    --color-sidebar: #111827;
    --color-primary-rgb: 31, 41, 55;

    --gradient-primary: #111827;
    --gradient-primary-hover: #1F2937;
    --gradient-surface: #F9FAFB;
    --gradient-accent: #374151;

    --gradient-card-primary: #374151;
    --gradient-card-blue: #475569;
    --gradient-card-green: #047857;
    --gradient-card-orange: #B45309;

    --primary-bg-clr: var(--color-sidebar);
    --secondary-bg-clr: var(--gradient-surface);
    --primary-bg-clr-contrast: var(--color-primary-600);

    --color-bg-page: #F9FAFB;
    --color-bg-card: #FFFFFF;
    --color-bg-muted: #F3F4F6;
    --color-bg-hover: #F3F4F6;
    --color-border: #E5E7EB;
    --color-border-focus: var(--color-primary-600);

    --color-text-primary: #111827;
    --color-text-secondary: #6B7280;
    --color-text-muted: #9CA3AF;
    --color-text-on-primary: #FFFFFF;
    --color-icon-muted: #6B7280;

    --color-success: #047857;
    --color-error: #B91C1C;
    --color-warning: #B45309;
    --color-info: #1F2937;
    --color-danger: #DC2626;

    --gradient-success: #047857;
    --gradient-error: #B91C1C;
    --gradient-warning: #B45309;
    --gradient-info: #374151;

    --shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.05);
    --shadow-md: 0 4px 12px rgba(17, 24, 39, 0.08);
    --shadow-lg: 0 10px 24px rgba(17, 24, 39, 0.12);
    --shadow-card: 0 1px 3px rgba(17, 24, 39, 0.06), 0 1px 2px rgba(17, 24, 39, 0.04);
    --shadow-card-hover: 0 4px 12px rgba(17, 24, 39, 0.08);

    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    --motion-duration: 500ms;
    --motion-ease: ease-out;
    --motion-stagger: 90ms;
    --motion-distance: 16px;
}
*/

/* ═══════════════════════════════════════════════════════════
   OPTION B — Refined Navy (uncomment to use)
   ═══════════════════════════════════════════════════════════
:root {
    --color-primary-50: #EFF6FF;
    --color-primary-100: #DBEAFE;
    --color-primary-200: #BFDBFE;
    --color-primary-300: #93C5FD;
    --color-primary-400: #60A5FA;
    --color-primary-500: #3B82F6;
    --color-primary-600: #2563EB;
    --color-primary-700: #1D4ED8;
    --color-primary-800: #1E40AF;
    --color-primary-900: #1E3A8A;

    --color-accent: #2563EB;
    --color-accent-50: #EFF6FF;
    --color-accent-100: #DBEAFE;
    --color-accent-200: #BFDBFE;
    --color-accent-500: #3B82F6;
    --color-accent-600: #2563EB;
    --color-accent-700: #1D4ED8;
    --color-accent-rgb: 37, 99, 235;

    --color-sidebar: #0F172A;
    --color-primary-rgb: 37, 99, 235;

    --gradient-primary: #0F172A;
    --gradient-primary-hover: #1E293B;
    --gradient-surface: #F8FAFC;
    --gradient-accent: #2563EB;

    --gradient-card-primary: #1E3A8A;
    --gradient-card-blue: #2563EB;
    --gradient-card-green: #059669;
    --gradient-card-orange: #D97706;

    --primary-bg-clr: var(--color-sidebar);
    --secondary-bg-clr: var(--gradient-surface);
    --primary-bg-clr-contrast: var(--color-primary-600);

    --color-bg-page: #F8FAFC;
    --color-bg-card: #FFFFFF;
    --color-bg-muted: #F1F5F9;
    --color-bg-hover: #F1F5F9;
    --color-border: #E2E8F0;
    --color-border-focus: var(--color-primary-600);

    --color-text-primary: #0F172A;
    --color-text-secondary: #64748B;
    --color-text-muted: #94A3B8;
    --color-text-on-primary: #FFFFFF;
    --color-icon-muted: #64748B;

    --color-success: #059669;
    --color-error: #DC2626;
    --color-warning: #D97706;
    --color-info: #2563EB;
    --color-danger: #DC2626;

    --gradient-success: #059669;
    --gradient-error: #DC2626;
    --gradient-warning: #D97706;
    --gradient-info: #2563EB;

    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 10px 25px rgba(15, 23, 42, 0.12);
    --shadow-card: 0 2px 10px rgba(15, 23, 42, 0.05);
    --shadow-card-hover: 0 5px 20px rgba(15, 23, 42, 0.1);

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 15px;

    --motion-duration: 500ms;
    --motion-ease: ease-out;
    --motion-stagger: 90ms;
    --motion-distance: 16px;
}
*/

/* ═══════════════════════════════════════════════════════════
   OPTION C — Muted Teal (uncomment to use)
   ═══════════════════════════════════════════════════════════
:root {
    --color-primary-50: #F0FDFA;
    --color-primary-100: #CCFBF1;
    --color-primary-200: #99F6E4;
    --color-primary-300: #5EEAD4;
    --color-primary-400: #2DD4BF;
    --color-primary-500: #14B8A6;
    --color-primary-600: #0F766E;
    --color-primary-700: #115E59;
    --color-primary-800: #134E4A;
    --color-primary-900: #042F2E;

    --color-accent: #0F766E;
    --color-accent-50: #F0FDFA;
    --color-accent-100: #CCFBF1;
    --color-accent-200: #99F6E4;
    --color-accent-500: #14B8A6;
    --color-accent-600: #0F766E;
    --color-accent-700: #115E59;
    --color-accent-rgb: 15, 118, 110;

    --color-sidebar: #134E4A;
    --color-primary-rgb: 15, 118, 110;

    --gradient-primary: #134E4A;
    --gradient-primary-hover: #115E59;
    --gradient-surface: #F8FAFA;
    --gradient-accent: #0F766E;

    --gradient-card-primary: #115E59;
    --gradient-card-blue: #0E7490;
    --gradient-card-green: #047857;
    --gradient-card-orange: #B45309;

    --primary-bg-clr: var(--color-sidebar);
    --secondary-bg-clr: var(--gradient-surface);
    --primary-bg-clr-contrast: var(--color-primary-600);

    --color-bg-page: #F8FAFA;
    --color-bg-card: #FFFFFF;
    --color-bg-muted: #F0FDFA;
    --color-bg-hover: #ECFDF5;
    --color-border: #D1D5DB;
    --color-border-focus: var(--color-primary-600);

    --color-text-primary: #111827;
    --color-text-secondary: #6B7280;
    --color-text-muted: #9CA3AF;
    --color-text-on-primary: #FFFFFF;
    --color-icon-muted: #6B7280;

    --color-success: #047857;
    --color-error: #B91C1C;
    --color-warning: #B45309;
    --color-info: #0F766E;
    --color-danger: #DC2626;

    --gradient-success: #047857;
    --gradient-error: #B91C1C;
    --gradient-warning: #B45309;
    --gradient-info: #0F766E;

    --shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.05);
    --shadow-md: 0 4px 12px rgba(17, 24, 39, 0.08);
    --shadow-lg: 0 10px 24px rgba(17, 24, 39, 0.12);
    --shadow-card: 0 1px 3px rgba(17, 24, 39, 0.06);
    --shadow-card-hover: 0 4px 12px rgba(17, 24, 39, 0.08);

    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    --motion-duration: 500ms;
    --motion-ease: ease-out;
    --motion-stagger: 90ms;
    --motion-distance: 16px;
}
*/

/* ═══════════════════════════════════════════════════════════
   OPTION D — Azure Gradient (uncomment to use)
   ═══════════════════════════════════════════════════════════
:root {
    --color-primary-50: #EFF6FF;
    --color-primary-100: #DBEAFE;
    --color-primary-200: #BFDBFE;
    --color-primary-300: #93C5FD;
    --color-primary-400: #60A5FA;
    --color-primary-500: #3B82F6;
    --color-primary-600: #2563EB;
    --color-primary-700: #1D4ED8;
    --color-primary-800: #1E40AF;
    --color-primary-900: #1E3A8A;

    --color-accent: #2563EB;
    --color-accent-50: #EFF6FF;
    --color-accent-100: #DBEAFE;
    --color-accent-200: #BFDBFE;
    --color-accent-500: #3B82F6;
    --color-accent-600: #2563EB;
    --color-accent-700: #1D4ED8;
    --color-accent-rgb: 37, 99, 235;

    --color-sidebar: linear-gradient(135deg, #1E3A8A 0%, #2563EB 55%, #3B82F6 100%);
    --color-primary-rgb: 37, 99, 235;

    --gradient-primary: linear-gradient(135deg, #1E3A8A 0%, #2563EB 55%, #3B82F6 100%);
    --gradient-primary-hover: linear-gradient(135deg, #1E40AF 0%, #1D4ED8 55%, #2563EB 100%);
    --gradient-surface: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%);
    --gradient-accent: linear-gradient(135deg, #3B82F6 0%, #60A5FA 100%);

    --gradient-card-primary: var(--gradient-primary);
    --gradient-card-blue: linear-gradient(135deg, #0EA5E9 0%, #38BDF8 100%);
    --gradient-card-green: linear-gradient(135deg, #10B981 0%, #34D399 100%);
    --gradient-card-orange: linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%);

    --primary-bg-clr: var(--gradient-primary);
    --secondary-bg-clr: var(--gradient-surface);
    --primary-bg-clr-contrast: var(--gradient-accent);

    --color-bg-page: #F8FAFC;
    --color-bg-card: #FFFFFF;
    --color-bg-muted: #F1F5F9;
    --color-bg-hover: #F0F4F8;
    --color-border: #E2E8F0;
    --color-border-focus: var(--color-primary-600);

    --color-text-primary: #0F172A;
    --color-text-secondary: #64748B;
    --color-text-muted: #94A3B8;
    --color-text-on-primary: #FFFFFF;
    --color-icon-muted: #666666;

    --color-success: #059669;
    --color-error: #DC2626;
    --color-warning: #D97706;
    --color-info: #2563EB;
    --color-danger: #FF4757;

    --gradient-success: linear-gradient(135deg, #10B981 0%, #059669 100%);
    --gradient-error: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
    --gradient-warning: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    --gradient-info: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);

    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 10px 25px rgba(var(--color-primary-rgb), 0.15);
    --shadow-card: 0 2px 10px rgba(15, 23, 42, 0.05);
    --shadow-card-hover: 0 5px 20px rgba(15, 23, 42, 0.1);

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 15px;

    --motion-duration: 500ms;
    --motion-ease: ease-out;
    --motion-stagger: 90ms;
    --motion-distance: 16px;
}
*/