/* Sodali & Co theme overrides (Brand Guidelines, January 2025).
   Primary palette: Midnight Blue #0a232d (foundation), Illuminate Orange #fa6400 (highlight),
   Tranquil Blue #befafa (CTAs and infographics, never text), white, black for body copy.
   Secondary blues #235a6e #5a8296 #91aab4 #c8d2dc are reserved for tables. */
:root {
  /* Midnight Blue 80% / 60% / 40% as the neutral text ramp; body copy stays close to black */
  --text-primary: #0a232d;
  --text-secondary: color-mix(in srgb, #0a232d, white 20%);
  --text-muted: #3b5560; /* 7.3:1 on white */

  /* Secondary blue family for tables, lines and soft surfaces */
  --line: #c8d2dc;
  --line-mid: #91aab4;
  --stone: #f1f5f7;
  --bg-content: #f6f8fa;

  /* Semantic colours: errors move away from orange so they never compete with the highlight colour */
  --desert: #b42318;
  --forest: #1f6f50;

  /* Montserrat: headings in Bold, 100 tracking (0.1em) for CTAs and eyebrows per the type hierarchy */
  --fw-display-regular: 700;
  --fw-body-light: 400;
  --leading-display: 1.15;
  --tracking-eyebrow: 0.1em;
  --tracking-caps: 0.1em;
  --text-display-l: clamp(2.1rem, 3.8vw, 3.2rem);
  --text-display-m: clamp(1.6rem, 2.6vw, 2.2rem);
  --text-display-s: clamp(1.3rem, 1.9vw, 1.6rem);
  --text-body: 0.9375rem;

  /* Square, confident corners echo the logomark's geometry */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;

  /* Midnight Blue tinted elevation */
  --shadow-xs: 0 1px 2px rgba(10, 35, 45, 0.08);
  --shadow-sm: 0 2px 8px rgba(10, 35, 45, 0.08), 0 1px 2px rgba(10, 35, 45, 0.05);
  --shadow-md: 0 8px 28px rgba(10, 35, 45, 0.12), 0 2px 6px rgba(10, 35, 45, 0.06);
  --shadow-lg: 0 24px 64px rgba(10, 35, 45, 0.18), 0 6px 16px rgba(10, 35, 45, 0.08);
  --focus: 0 0 0 2px #ffffff, 0 0 0 4px #fa6400;
}

/* Headlines: Montserrat Bold, tight tracking is not part of the brand, so reset the editorial negative tracking */
h1, h2, h3, h4, .display { letter-spacing: 0; }
.page-header h1, .auth-brand h1, .auth-brand .cover-title { text-transform: uppercase; letter-spacing: 0.04em; }
.auth-brand p.statement { font-style: normal; font-weight: 600; }

/* Table headers in Secondary Blue, as the guidelines reserve that family for tables */
.table th { color: #235a6e; border-bottom-color: #5a8296; }
.table thead tr { background: #f1f5f7; }

/* Stats: Illuminate Orange pulls out key figures */
.stat .stat-value { color: #fa6400; }
.stat.stat-ok .stat-value { color: #0a232d; }

/* Tranquil Blue for the sidebar's active indicator and counters on Midnight Blue */
.sidebar .nav-link.active { border-left-color: #fa6400; }
.sidebar .nav-count { background: #befafa; color: #0a232d; }
.auth-brand li svg { color: #fa6400; }

/* Accent buttons (signing) carry Illuminate Orange with Midnight Blue text for contrast (8.9:1) */
.btn-accent, .btn-success { color: #0a232d; }
.btn-accent:hover, .btn-success:hover { color: #0a232d; }
.btn-accent:disabled:hover, .btn-success:disabled:hover { color: #0a232d; }
.badge-info { background: #e6f7f7; color: #0a232d; border-color: #befafa; }
.alert-info { background: #e6f7f7; color: #0a232d; border-color: #befafa; }
.comment.submission { background: #e6f7f7; border-left-color: #0a232d; }
::selection { background: #befafa; }

/* Logo lockups: the master lockup is 3.45:1, so these heights keep every placement at or above the 160 px
   minimum digital width; the surrounding padding provides the safe space (the height of the S) */
.sidebar .brand img { height: 48px; }
.sidebar .brand { padding: 28px 22px 22px; }
.logo img { height: 48px; }
.logo-lg img { height: 56px; }