/* Set Box sizing for all divs and elements to control widths and padding etc */

:root {
  /* Brand palette */
  --deep-navy: #001e50;
  --regal-navy: #003183;
  --glaucous: #6387c4;
  --oxblood: #9d0001;
  --mahogany-red: #be081d;
  --racing-red: #ff001d;
  --amber-flame: #ffb100;
  --school-bus-yellow: #ffc400;
  --white: #ffffff;
  --black: #000000;

  /* Navy tints (derived) */
  --navy-ink: #00153a; /* darker than deep-navy, for deep rows */
  --navy-line: #1a3a6e; /* borders on navy rows */
  --glaucous-light: #e6edf8; /* pale blue panel */
  --glaucous-mid: #c9d7ef; /* pale blue border */

  /* Cool gray scale (tuned to sit beside the navy) */
  --gray-50: #f5f7fa;
  --gray-100: #eceff4;
  --gray-200: #dde2ea;
  --gray-300: #c4cbd7;
  --gray-400: #9aa3b4;
  --gray-500: #6f7a8f; /* large text / icons only on white */
  --gray-600: #525c70; /* body-safe secondary text */
  --gray-700: #3b4456;
  --gray-800: #262d3c;
  --gray-900: #151a26;

  /* Semantic roles */
  --text: var(--gray-900);
  --text-muted: var(--gray-600);
  --heading: var(--deep-navy);
  --link: var(--regal-navy);
  --link-hover: var(--mahogany-red);
  --accent: var(--mahogany-red);
  --accent-hover: var(--oxblood);
  --highlight: var(--school-bus-yellow);
  --border: var(--gray-200);

  /* Translucent whites for navy rows */
  --white-60: rgba(255, 255, 255, 0.6);
  --white-75: rgba(255, 255, 255, 0.75);
  --white-15: rgba(255, 255, 255, 0.15);

  /* Typography */
  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: Poppins, sans-serif; /* the site's existing body font */

  --h1-size: clamp(36px, 5vw, 60px);
  --h2-size: clamp(30px, 3.6vw, 46px);
  --h3-size: clamp(22px, 2.4vw, 28px);
  --h4-size: clamp(18px, 2vw, 22px);
  --p-size: clamp(15px, 1.2vw, 17px);
  --small-text: clamp(13px, 1.1vw, 15px);

  /* Spacing */
  --section-pad-v: clamp(56px, 8vw, 96px);
  --section-pad-h: clamp(20px, 5vw, 40px);
  --card-pad: clamp(20px, 2.5vw, 30px);
  --radius: 6px;
  --radius-lg: 10px;
  --container: 1200px;

  /* Effects */
  --shadow-sm: 0 4px 16px rgba(0, 30, 80, 0.06);
  --shadow-md: 0 12px 36px rgba(0, 30, 80, 0.12);
  --shadow-red: 0 8px 20px rgba(190, 8, 29, 0.3);
  --transition: 0.2s ease;
  --hover-lift: translateY(-3px);
}