@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap");
/* Added Source Sans Pro (400,700) and Cabin (600) */
@import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;700&family=Cabin:wght@600&display=swap");

:root {
  /* Default typography (body) now uses Cabin semi-bold */
  --ff: var(--font-family-b);

  /* Requested font stacks */
  --font-family-a: "Source Sans Pro", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; /* SourceSansPro */
  --font-family-b: "Cabin", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; /* Cabin-semi-bold */
  --font-family-c: "Source Sans Pro", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; /* SourceSansProBold */
  /* neutrals */
  --bs-body-bg: #F3F4F6;
  /* Page background-very light, neutral gray */
  --bs-body-color: #111827;
  /* Card/container backgrounds-pure white */
  --bs-border-color: #E5E7EB;
  /* Main copy, axis labels, table text */
  /* Metadata, sublabels, tertiary text */
  --bs-muted: #6B7280;
  /* Muted text, secondary labels, disabled elements */

  /* core accents */
  --bs-primary: #2563EB;
  /* Buttons, links, highlights for interactive elements */
  --bs-secondary: #14B8A6;
  /* Alternative buttons/links, toggles, less-prominent actions */

  /* Primary color variants (for hover, active, soft backgrounds) */
  --bs-primary-700: #1D4ED8;
  /* Hover/active state for primary */
  --bs-primary-100: #DBEAFE;
  /* Soft highlight/background for primary */

  /* Secondary color variants (for hover, active, soft backgrounds) */
  --bs-secondary-700: #0F766E;
  /* Hover/active state for secondary */
  --bs-secondary-100: #CCFBF1;
  /* Soft highlight/background for secondary */

  /* Primary color variants (for hover, active, soft backgrounds) */
  --bs-primary-700: #1D4ED8;
  /* Hover/active state for primary */
  --bs-primary-100: #DBEAFE;
  /* Soft highlight/background for primary */

  /* Secondary color variants (for hover, active, soft backgrounds) */
  --bs-secondary-700: #0F766E;
  /* Hover/active state for secondary */
  --bs-secondary-100: #CCFBF1;
  /* Soft highlight/background for secondary */

  /* semantic */
  --bs-success: #10B981;
  /* “Up” indicators, positive deltas, good-to-know messages */
  --bs-info: #3B82F6;
  /* Baseline comparisons, neutral highlights, info banners */
  --bs-warning: #F59E0B;
  /* Warnings, QoQ flags, minor alerts */
  --bs-danger: #EF4444;
  /* “Down” indicators, negative deltas, critical alerts */
  /* Table/grid dividers, form borders */
  --bs-light: #E5E7EB;
  /* Light dividers, form borders, light backgrounds */

  --bs-border-color: #E5E7EB;
  /* Default border color for elements */

  --graph-up: var(--bs-success);
  /* green line / bar */
  --graph-down: var(--bs-danger);
  /* red line / bar */

  /* Surface scale for cards, table headers, etc. */
  --surface-0: #FFFFFF;
  /* pure white cards */
  --surface-1: #F9FAFB;
  /* table header */
  --surface-2: #F3F4F6;
  /* striped row / muted */
  --surface-3: #E5E7EB;
  /* borders & hover */

  /* ─────── Pillar-specific colors (StatsAlpha scoring pillars) ───────── */
  /* Growth = Teal/Blue-Green */
  --pillar-growth: #14B8A6;
  --pillar-growth-light: rgba(20, 184, 166, 0.1);
  --pillar-growth-medium: rgba(20, 184, 166, 0.3);
  
  /* Profitability = Green */
  --pillar-profitability: #10B981;
  --pillar-profitability-light: rgba(16, 185, 129, 0.1);
  --pillar-profitability-medium: rgba(16, 185, 129, 0.3);
  
  /* Health = Blue */
  --pillar-health: #3B82F6;
  --pillar-health-light: rgba(59, 130, 246, 0.1);
  --pillar-health-medium: rgba(59, 130, 246, 0.3);
  
  /* Efficiency = Purple */
  --pillar-efficiency: #8B5CF6;
  --pillar-efficiency-light: rgba(139, 92, 246, 0.1);
  --pillar-efficiency-medium: rgba(139, 92, 246, 0.3);
  
  /* Valuation = Amber */
  --pillar-valuation: #F59E0B;
  --pillar-valuation-light: rgba(245, 158, 11, 0.1);
  --pillar-valuation-medium: rgba(245, 158, 11, 0.3);

  /* ─────── Extended palette (LIGHT default) ───────────────────────── */
  /* HSL fallbacks */
  --bg-dark: hsl(217 89% 92%);
  --bg: hsl(217 100% 97%);
  --bg-light: hsl(217 100% 100%);
  --text: hsl(227 100% 8%);
  --text-muted: hsl(217 38% 31%);
  --highlight: hsl(217 100% 100%);
  --border: hsl(217 28% 54%);
  --border-muted: hsl(217 40% 66%);
  --primary: hsl(217 54% 32%);
  --primary-700: hsl(217 85% 45%);
  --primary-100: hsl(213 96% 91%);
  --secondary: hsl(169 65% 51%);
  --secondary-700: hsl(170 77% 27%);
  --secondary-100: hsl(169 92% 89%);
  --danger: hsl(9 28% 41%);
  --warning: hsl(51 36% 31%);
  --success: hsl(149 30% 34%);
  --info: hsl(217 30% 42%);

  /* OKLCH overrides */
  --bg-dark: oklch(0.92 0.035 260);
  --bg: oklch(0.96 0.035 260);
  --bg-light: oklch(1 0.035 260);
  --text: oklch(0.15 0.07 260);
  --text-muted: oklch(0.4 0.07 260);
  --highlight: oklch(1 0.07 260);
  --border: oklch(0.6 0.07 260);
  --border-muted: oklch(0.7 0.07 260);
  --primary: oklch(0.4 0.1 260);
  --primary-700: oklch(0.50 0.13 260);
  --primary-100: oklch(0.90 0.08 260);
  --secondary: oklch(0.65 0.15 170);
  --secondary-700: oklch(0.45 0.12 170);
  --secondary-100: oklch(0.88 0.10 170);
  --danger: oklch(0.5 0.07 30);
  --warning: oklch(0.5 0.07 100);
  --success: oklch(0.5 0.07 160);
  --info: oklch(0.5 0.07 260);

  /* Spacing scale */
  --margin-xxs: .25rem;
  --margin-xs: .5rem;
  --margin-s: .75rem;
  --margin-m: 1rem;
  --margin-l: 1.25rem;
  --margin-xl: 1.75rem;
  --margin-xxl: 2.5rem;

  /* Shadows */
  --shadow-s: inset 0 1px 2px #ffffff30, 0 1px 2px #00000030, 0 2px 4px #00000015;
  --shadow-m: inset 0 1px 2px #ffffff50, 0 2px 4px #00000030, 0 4px 8px #00000015;
  --shadow-l: inset 0 1px 2px #ffffff70, 0 4px 6px #00000030, 0 6px 10px #00000015;
}


/* ─────── System / OS dark mode ─────────────────────────── */
@media (prefers-color-scheme: dark) {

  /* only when you haven’t forced a theme */
  :root:not([data-bs-theme]) {
    /* Dark palette variables (HSL fallback then OKLCH) */
    --bg-dark: hsl(229 96% 3%);
    --bg: hsl(221 75% 6%);
    --bg-light: hsl(217 51% 10%);
    --text: hsl(217 100% 99%);
    --text-muted: hsl(217 52% 73%);
    --highlight: hsl(217 30% 42%);
    --border: hsl(217 38% 31%);
    --border-muted: hsl(217 54% 20%);
    --primary: hsl(217 78% 75%);
    --primary-700: hsl(217 85% 55%);
    --primary-100: hsl(213 96% 91%);
    --secondary: hsl(169 70% 60%);
    --secondary-700: hsl(170 77% 35%);
    --secondary-100: hsl(169 92% 89%);
    --danger: hsl(9 37% 65%);
    --warning: hsl(52 26% 54%);
    --success: hsl(147 24% 57%);
    --info: hsl(217 40% 66%);

    --bg-dark: oklch(0.1 0.035 260);
    --bg: oklch(0.15 0.035 260);
    --bg-light: oklch(0.2 0.035 260);
    --text: oklch(0.96 0.07 260);
    --text-muted: oklch(0.76 0.07 260);
    --highlight: oklch(0.5 0.07 260);
    --border: oklch(0.4 0.07 260);
    --border-muted: oklch(0.3 0.07 260);
    --primary: oklch(0.76 0.1 260);
    --primary-700: oklch(0.60 0.13 260);
    --primary-100: oklch(0.90 0.08 260);
    --secondary: oklch(0.70 0.15 170);
    --secondary-700: oklch(0.50 0.12 170);
    --secondary-100: oklch(0.88 0.10 170);
    --danger: oklch(0.7 0.07 30);
    --warning: oklch(0.7 0.07 100);
    --success: oklch(0.7 0.07 160);
    --info: oklch(0.7 0.07 260);

    /* Map Bootstrap variables to palette */
    --bs-body-bg: var(--bg);
    --bs-body-color: var(--text);
    --bs-muted: var(--text-muted);
    --bs-border-color: var(--border);

    --bs-primary: var(--primary);
    --bs-secondary: var(--secondary);
    --bs-success: var(--success);
    --bs-info: var(--info);
    --bs-warning: var(--warning);
    --bs-danger: var(--danger);
    --bs-light: var(--border-muted);

    /* Keep existing surface scale but nudge towards dark */
    --surface-0: #111827;
    --surface-1: #1F2937;
    --surface-2: #273549;
    --surface-3: #4B5563;

    /* Pillar colors (brighter for dark mode) */
    --pillar-growth: #5EEAD4;
    --pillar-growth-light: rgba(94, 234, 212, 0.15);
    --pillar-growth-medium: rgba(94, 234, 212, 0.35);
    
    --pillar-profitability: #34D399;
    --pillar-profitability-light: rgba(52, 211, 153, 0.15);
    --pillar-profitability-medium: rgba(52, 211, 153, 0.35);
    
    --pillar-health: #60A5FA;
    --pillar-health-light: rgba(96, 165, 250, 0.15);
    --pillar-health-medium: rgba(96, 165, 250, 0.35);
    
    --pillar-efficiency: #A78BFA;
    --pillar-efficiency-light: rgba(167, 139, 250, 0.15);
    --pillar-efficiency-medium: rgba(167, 139, 250, 0.35);
    
    --pillar-valuation: #FCD34D;
    --pillar-valuation-light: rgba(252, 211, 77, 0.15);
    --pillar-valuation-medium: rgba(252, 211, 77, 0.35);
  }
}

/* ─────── Manual Light override ─────────────────────────── */
[data-bs-theme="light"] {
  /* exactly the same as :root default */
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--text);
  --bs-border-color: var(--border);
  --bs-muted: var(--text-muted);

  --bs-primary: var(--primary);
  --bs-secondary: var(--secondary);

  --bs-success: var(--success);
  --bs-info: var(--info);
  --bs-warning: var(--warning);
  --bs-danger: var(--danger);
  --bs-light: var(--border-muted);
}

/* ─────── Manual Dark override ─────────────────────────── */
[data-bs-theme="dark"] {
  /* exactly the same as the system-dark block */
  /* Dark palette variables */
  --bg-dark: hsl(229 96% 3%);
  --bg: hsl(221 75% 6%);
  --bg-light: hsl(217 51% 10%);
  --text: hsl(217 100% 99%);
  --text-muted: hsl(217 52% 73%);
  --highlight: hsl(217 30% 42%);
  --border: hsl(217 38% 31%);
  --border-muted: hsl(217 54% 20%);
  --primary: hsl(217 78% 75%);
  --primary-700: hsl(217 85% 55%);
  --primary-100: hsl(213 96% 91%);
  --secondary: hsl(169 70% 60%);
  --secondary-700: hsl(170 77% 35%);
  --secondary-100: hsl(169 92% 89%);
  --danger: hsl(9 37% 65%);
  --warning: hsl(52 26% 54%);
  --success: hsl(147 24% 57%);
  --info: hsl(217 40% 66%);

  --bg-dark: oklch(0.1 0.035 260);
  --bg: oklch(0.15 0.035 260);
  --bg-light: oklch(0.2 0.035 260);
  --text: oklch(0.96 0.07 260);
  --text-muted: oklch(0.76 0.07 260);
  --highlight: oklch(0.5 0.07 260);
  --border: oklch(0.4 0.07 260);
  --border-muted: oklch(0.3 0.07 260);
  --primary: oklch(0.76 0.1 260);
  --primary-700: oklch(0.60 0.13 260);
  --primary-100: oklch(0.90 0.08 260);
  --secondary: oklch(0.70 0.15 170);
  --secondary-700: oklch(0.50 0.12 170);
  --secondary-100: oklch(0.88 0.10 170);
  --danger: oklch(0.7 0.07 30);
  --warning: oklch(0.7 0.07 100);
  --success: oklch(0.7 0.07 160);
  --info: oklch(0.7 0.07 260);

  /* Map Bootstrap variables to palette */
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--text);
  --bs-border-color: var(--border);
  --bs-muted: var(--text-muted);

  --bs-primary: var(--primary);
  --bs-secondary: var(--secondary);

  --bs-success: var(--success);
  --bs-info: var(--info);
  --bs-warning: var(--warning);
  --bs-danger: var(--danger);
  --bs-light: var(--border-muted);

  /* Surface scale for dark mode */
  --surface-0: #111827;
  --surface-1: #1F2937;
  --surface-2: #273549;
  --surface-3: #4B5563;

  /* Pillar colors (brighter for dark mode) */
  --pillar-growth: #5EEAD4;
  --pillar-growth-light: rgba(94, 234, 212, 0.15);
  --pillar-growth-medium: rgba(94, 234, 212, 0.35);
  
  --pillar-profitability: #34D399;
  --pillar-profitability-light: rgba(52, 211, 153, 0.15);
  --pillar-profitability-medium: rgba(52, 211, 153, 0.35);
  
  --pillar-health: #60A5FA;
  --pillar-health-light: rgba(96, 165, 250, 0.15);
  --pillar-health-medium: rgba(96, 165, 250, 0.35);
  
  --pillar-efficiency: #A78BFA;
  --pillar-efficiency-light: rgba(167, 139, 250, 0.15);
  --pillar-efficiency-medium: rgba(167, 139, 250, 0.35);
  
  --pillar-valuation: #FCD34D;
  --pillar-valuation-light: rgba(252, 211, 77, 0.15);
  --pillar-valuation-medium: rgba(252, 211, 77, 0.35);
}

/* ─────── Core utility overrides ───────────────────────── */
body {
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
  font-family: var(--ff) !important; /* maps to --font-family-b (Cabin) */
  font-weight: 600; /* semi-bold as requested */
}

/* Headings use Cabin semi-bold for stronger hierarchy */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-family-b);
  font-weight: 600;
}

/* Emphasis uses Source Sans Pro bold */
strong, b, .fw-bold {
  font-family: var(--font-family-c);
  font-weight: 700 !important;
}

/* Buttons and nav can follow heading font for better UI consistency */
.btn, .nav, .navbar, .dropdown-menu {
  font-family: var(--font-family-b);
}

.bg-body {
  background-color: var(--bs-body-bg) !important;
}

.text-body {
  color: var(--bs-body-color) !important;
}

.border {
  border-color: var(--bs-border-color) !important;
}

.bg-body {
  background-color: var(--bs-body-bg) !important;
}

.text-body {
  color: var(--bs-body-color) !important;
}

.border {
  border-color: var(--bs-border-color) !important;
}

/* Optional: support body.light/body.dark class toggles in addition to data-bs-theme */
body.light {
  /* Map Bootstrap variables to the already-defined LIGHT palette at :root */
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--text);
  --bs-border-color: var(--border);
  --bs-muted: var(--text-muted);

  --bs-primary: var(--primary);
  --bs-secondary: var(--secondary);
  --bs-success: var(--success);
  --bs-info: var(--info);
  --bs-warning: var(--warning);
  --bs-danger: var(--danger);
  --bs-light: var(--border-muted);
}

body.dark {
  /* Ensure dark palette + mapping when using a .dark class */
  --bg-dark: hsl(229 96% 3%);
  --bg: hsl(221 75% 6%);
  --bg-light: hsl(217 51% 10%);
  --text: hsl(217 100% 99%);
  --text-muted: hsl(217 52% 73%);
  --highlight: hsl(217 30% 42%);
  --border: hsl(217 38% 31%);
  --border-muted: hsl(217 54% 20%);
  --primary: hsl(217 78% 75%);
  --primary-700: hsl(217 85% 55%);
  --primary-100: hsl(213 96% 91%);
  --secondary: hsl(169 70% 60%);
  --secondary-700: hsl(170 77% 35%);
  --secondary-100: hsl(169 92% 89%);
  --danger: hsl(9 37% 65%);
  --warning: hsl(52 26% 54%);
  --success: hsl(147 24% 57%);
  --info: hsl(217 40% 66%);

  --bg-dark: oklch(0.1 0.035 260);
  --bg: oklch(0.15 0.035 260);
  --bg-light: oklch(0.2 0.035 260);
  --text: oklch(0.96 0.07 260);
  --text-muted: oklch(0.76 0.07 260);
  --highlight: oklch(0.5 0.07 260);
  --border: oklch(0.4 0.07 260);
  --border-muted: oklch(0.3 0.07 260);
  --primary: oklch(0.76 0.1 260);
  --primary-700: oklch(0.60 0.13 260);
  --primary-100: oklch(0.90 0.08 260);
  --secondary: oklch(0.70 0.15 170);
  --secondary-700: oklch(0.50 0.12 170);
  --secondary-100: oklch(0.88 0.10 170);
  --danger: oklch(0.7 0.07 30);
  --warning: oklch(0.7 0.07 100);
  --success: oklch(0.7 0.07 160);
  --info: oklch(0.7 0.07 260);

  --bs-body-bg: var(--bg);
  --bs-body-color: var(--text);
  --bs-border-color: var(--border);
  --bs-muted: var(--text-muted);
  --bs-primary: var(--primary);
  --bs-secondary: var(--secondary);
  --bs-success: var(--success);
  --bs-info: var(--info);
  --bs-warning: var(--warning);
  --bs-danger: var(--danger);
  --bs-light: var(--border-muted);

  /* Surface scale for dark mode */
  --surface-0: #111827;
  --surface-1: #1F2937;
  --surface-2: #273549;
  --surface-3: #4B5563;

  /* Pillar colors (brighter for dark mode) */
  --pillar-growth: #5EEAD4;
  --pillar-growth-light: rgba(94, 234, 212, 0.15);
  --pillar-growth-medium: rgba(94, 234, 212, 0.35);
  
  --pillar-profitability: #34D399;
  --pillar-profitability-light: rgba(52, 211, 153, 0.15);
  --pillar-profitability-medium: rgba(52, 211, 153, 0.35);
  
  --pillar-health: #60A5FA;
  --pillar-health-light: rgba(96, 165, 250, 0.15);
  --pillar-health-medium: rgba(96, 165, 250, 0.35);
  
  --pillar-efficiency: #A78BFA;
  --pillar-efficiency-light: rgba(167, 139, 250, 0.15);
  --pillar-efficiency-medium: rgba(167, 139, 250, 0.35);
  
  --pillar-valuation: #FCD34D;
  --pillar-valuation-light: rgba(252, 211, 77, 0.15);
  --pillar-valuation-medium: rgba(252, 211, 77, 0.35);
}