/* HMC24 landing - brand tokens. THE one place for colours, type, radii and
 * shadows: every other stylesheet only reads these variables. Same palette
 * as the app (apps/mobile). To re-brand, edit the values below (see
 * apps/landing/README.md); text colours keep WCAG AA on their backgrounds. */
:root {
  /* Brand */
  --brand-primary: #0B6E6E;          /* Deep Teal: buttons, links, headings */
  --brand-primary-strong: #085858;   /* hover / pressed */
  --brand-primary-soft: #E3F5F1;     /* tinted panels, icon chips */
  --brand-on-primary: #FFFFFF;
  --brand-accent: #FF7A59;           /* Coral: the warm human touch (decorative fill only) */
  --brand-accent-soft: #FFE9E2;
  --brand-accent-ink: #A93E24;       /* coral-family text on light backgrounds (AA) */
  --brand-aqua: #2EE6C5;             /* Aqua: energy, the "24" (decorative fill only) */
  --brand-midnight: #001424;         /* dark brand ground */
  --brand-on-primary-soft: #BFF5EA;  /* light aqua text on Deep Teal (5:1) */
  --brand-alert: #D92D20;            /* emergency red: SOS / alerts ONLY */
  --brand-alert-soft: #FBE7E4;
  --brand-alert-ink: #A11F16;
  --brand-success: #2E9E6A;
  --brand-success-soft: #DFF2E8;
  --brand-success-ink: #1C6E49;

  /* Surfaces + text */
  --color-bg: #F5F4F0;               /* calm off-white page background */
  --color-surface: #FFFFFF;
  --color-surface-alt: #EFEEE9;
  --color-border: #DCE3E1;
  --color-text: #013351;
  --color-text-secondary: #59696F;   /* ≥ 4.6:1 on --color-bg and surfaces */
  --color-footer: #001424;           /* dark footer band (white text) */
  --color-focus: #0B6E6E;
  --color-focus-ring: rgba(46, 230, 197, .55);

  /* Typography */
  --font-text: 'Cairo', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
  --font-display: 'Cairo', system-ui, sans-serif;
  --font-latin: 'Poppins', 'Cairo', system-ui, sans-serif;
  --fs-sm: .9rem;
  --fs-base: 1.0625rem;
  --fs-lg: 1.2rem;
  --fs-xl: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  --fs-2xl: clamp(1.7rem, 1.25rem + 2vw, 2.5rem);
  --fs-hero: clamp(2rem, 1.3rem + 3.4vw, 3.5rem);
  --lh-text: 1.75;
  --lh-tight: 1.3;

  /* Shape + depth */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(1, 51, 81, .06), 0 1px 3px rgba(1, 51, 81, .08);
  --shadow-md: 0 8px 24px rgba(11, 110, 110, .10);
  --shadow-lg: 0 20px 48px rgba(11, 110, 110, .16);

  /* Layout */
  --container: 1160px;
  --gutter: clamp(1rem, .6rem + 2vw, 2rem);
  --section-space: clamp(3.5rem, 2.5rem + 4vw, 6rem);
  --header-h: 68px;
}