/*
 * FinBedrock Design System 0.1.2 | 2026-10-27
 * Canonical values. Opt in with .fb-ds-v01; no global theme overrides.
 * Logo samples: navy #031339, blue #0667BD, azure #26A7FE, sky #6BC9FE.
 * Samples are from the published raster logo, not a vector brand master.
 * Dark palette: same hook as research.css and the calculators (Kadence colour
 * switch / data-theme), never prefers-color-scheme alone, so a block never
 * turns dark on a white page. Dark = "Slate" (softer blue-grey), chosen 2026-10-27.
 */
.fb-ds-v01 {
  --fb-color-brand-navy: #031339;
  --fb-color-brand-blue: #0667BD;
  --fb-color-brand-azure: #26A7FE;
  --fb-color-brand-sky: #6BC9FE;
  --fb-color-heading: #031339;
  --fb-color-text: #14213A;
  --fb-color-muted: #52637A;
  --fb-color-action: #0667BD;
  --fb-color-action-hover: #034F94;
  --fb-color-action-pressed: #033F77;
  --fb-color-on-action: #FFFFFF;
  --fb-color-result-bg: #031339;
  --fb-color-result-border: #031339;
  --fb-color-on-result: #FFFFFF;
  --fb-color-on-navy-muted: #BED2EC;
  --fb-color-page: #F5F8FC;
  --fb-color-surface: #FFFFFF;
  --fb-color-soft: #EDF6FF;
  --fb-color-border: #DCE5F0;
  --fb-color-input-border: #7C8EA6;
  --fb-color-focus: #0667BD;
  --fb-color-rating: #A86B00;
  --fb-color-success: #176742;
  --fb-color-success-bg: #ECF8F1;
  --fb-color-warning: #805300;
  --fb-color-warning-bg: #FFF8E8;
  --fb-color-error: #AF2634;
  --fb-color-error-bg: #FFF1F2;
  --fb-color-disabled-bg: #E8EEF5;
  --fb-color-disabled-text: #52637A;
  --fb-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --fb-font-mono: ui-monospace, SFMono-Regular, Consolas, monospace;
  --fb-text-xs: 0.75rem;
  --fb-text-sm: 0.875rem;
  --fb-text-md: 1rem;
  --fb-text-body: 1.0625rem; /* 17px, as the live site */
  --fb-text-lg: 1.375rem;
  --fb-text-h2: clamp(1.5rem, 1.3rem + 0.6vw, 1.75rem); /* 24–28px */
  --fb-text-h1: clamp(1.75rem, 1.4rem + 1.1vw, 2.25rem); /* 28–36px */
  --fb-text-display: clamp(2.25rem, 1.5rem + 2.8vw, 3.5rem); /* hero only */
  --fb-leading-body: 1.65;
  --fb-leading-heading: 1.12;
  --fb-weight-regular: 400;
  --fb-weight-medium: 500;
  --fb-weight-semibold: 600;
  --fb-weight-bold: 700;
  --fb-space-1: 0.25rem;
  --fb-space-2: 0.5rem;
  --fb-space-3: 0.75rem;
  --fb-space-4: 1rem;
  --fb-space-5: 1.25rem;
  --fb-space-6: 1.5rem;
  --fb-space-8: 2rem;
  --fb-space-12: 3rem;
  --fb-space-16: 4rem;
  --fb-space-24: 6rem;
  --fb-layout-wide: 77.5rem; /* 1240px, same as style.css §1 LAYOUT WRAPPERS */
  --fb-layout-tool: 65rem;
  --fb-layout-article: 45rem;
  --fb-gutter: clamp(1.25rem, 4vw, 3rem);
  --fb-radius-control: 0.375rem;
  --fb-radius-card: 0.75rem;
  --fb-radius-feature: 1rem;
  --fb-radius-pill: 999px;
  --fb-shadow-card: 0 4px 20px rgb(3 19 57 / 5%);
  --fb-shadow-hover: 0 10px 28px rgb(3 19 57 / 10%);
  --fb-shadow-btn-hover: 0 6px 18px rgb(6 103 189 / 35%);
  --fb-duration-fast: 140ms;
  --fb-duration-normal: 200ms;
  --fb-duration-enter: 280ms;
  --fb-ease: cubic-bezier(0.2, 0, 0, 1);
  color-scheme: light;
}
.color-switch-dark .fb-ds-v01,
[data-theme="dark"] .fb-ds-v01 {
  --fb-color-heading: #FFFFFF;
  --fb-color-text: #E4EAF3;
  --fb-color-muted: #B3BFD2;
  --fb-color-action: #5BBBFF;
  --fb-color-action-hover: #7CCBFF;
  --fb-color-action-pressed: #A3DAFF;
  --fb-color-on-action: #031339;
  --fb-color-result-bg: #0B1733;
  --fb-color-result-border: #405073;
  --fb-color-on-result: #FFFFFF;
  --fb-color-page: #1B2539;
  --fb-color-surface: #243049;
  --fb-color-soft: #2D3A56;
  --fb-color-border: #405073;
  --fb-color-input-border: #8C9DBB;
  --fb-color-focus: #7CCBFF;
  --fb-color-rating: #F2C97A;
  --fb-color-success: #86D9A3;
  --fb-color-success-bg: #1C3A2B;
  --fb-color-warning: #F2C97A;
  --fb-color-warning-bg: #3D3218;
  --fb-color-error: #F8A5AD;
  --fb-color-error-bg: #45222B;
  --fb-color-disabled-bg: #2D3A56;
  --fb-color-disabled-text: #B3BFD2;
  --fb-shadow-card: 0 4px 20px rgb(0 0 0 / 20%);
  --fb-shadow-hover: 0 10px 28px rgb(0 0 0 / 30%);
  --fb-shadow-btn-hover: 0 6px 20px rgb(91 187 255 / 30%);
  color-scheme: dark;
}