/* Alternative FS design tokens — brand teal-blue on deep navy */

:root {
  /* Dark backgrounds — deep teal-navy tones */
  --navy-950: #001520;
  --navy-900: #002233;
  --navy-800: #004460;
  --navy-700: #005676;
  --navy-600: #006884;

  /* Brand primary — #0082AF spectrum ("brass" keeps the original design's naming) */
  --brass-300: #80C9E4;
  --brass-400: #3FAFD6;
  --brass-500: #0082AF;
  --brass-600: #006B91;
  --brass-700: #005474;

  /* Brand green */
  --sage-400: #5DAA7A;
  --sage-500: #3D9060;
  --sage-600: #1D733C;

  /* Off-whites for text on dark backgrounds */
  --cream-50:  #F8FCFF;
  --cream-100: #EEF6FB;
  --cream-200: #D4ECF7;

  /* Text on navy at the opacities used throughout the design */
  --text:        rgba(212, 236, 247, 0.70);
  --text-muted:  rgba(212, 236, 247, 0.60);
  --text-soft:   rgba(212, 236, 247, 0.50);
  --text-faint:  rgba(212, 236, 247, 0.40);
  --text-ghost:  rgba(212, 236, 247, 0.35);

  /* Brand alpha helpers */
  --brand-10: rgba(0, 130, 175, 0.10);
  --brand-20: rgba(0, 130, 175, 0.20);
  --brand-30: rgba(0, 130, 175, 0.30);
  --brand-40: rgba(0, 130, 175, 0.40);
  --brand-50: rgba(0, 130, 175, 0.50);
  --brand-60: rgba(0, 130, 175, 0.60);
  --sage-20:  rgba(61, 144, 96, 0.20);
  --sage-30:  rgba(61, 144, 96, 0.30);
  --sage-60:  rgba(61, 144, 96, 0.60);

  /* Type — Calibri, with Carlito (metric-compatible) as the web fallback */
  --font: Calibri, 'Carlito', 'Segoe UI', system-ui, sans-serif;

  --text-xs:  0.75rem;
  --text-sm:  0.875rem;
  --text-md:  1rem;
  --text-lg:  1.125rem;
  --text-xl:  1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --display-md: clamp(1.75rem, 3vw, 2.75rem);
  --display-lg: clamp(2.25rem, 4vw, 3.75rem);
  --display-xl: clamp(3rem, 6vw, 5.5rem);

  /* Layout */
  --container:     80rem;
  --container-md:  56rem;
  --container-sm:  48rem;
  --container-pad: 1rem;
  --header-h:      4rem;

  --radius:    0.75rem;
  --radius-sm: 0.5rem;
  --radius-xs: 0.375rem;

  --shadow-navy: 0 20px 60px rgba(0, 21, 32, 0.6);
  --shadow-brass: 0 0 40px rgba(0, 130, 175, 0.2);
  --focus-ring: 2px solid var(--brass-500);
}

@media (min-width: 640px) {
  :root { --container-pad: 1.5rem; }
}

@media (min-width: 1024px) {
  :root { --container-pad: 2rem; }
}