/* ==========================================================================
   Turquoise Key: design tokens
   Single source of truth for brand colours, type, spacing and radii.
   Contrast rule: turquoise and lime are NEVER used as text on sand or white.
   Text on light backgrounds uses --deep-teal or --dark-text (WCAG AA checked).
   ========================================================================== */

@font-face { font-family: "Inter"; src: url("../fonts/inter-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito Sans"; src: url("../fonts/nunito-sans-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito Sans"; src: url("../fonts/nunito-sans-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }

:root {
  /* Brand palette */
  --turquoise: #1CC5C0;  /* accent, buttons (with dark text), links on --dark-text only */
  --deep-teal: #0B5C6B;  /* headings, secondary buttons, footer */
  --palm-green: #2F9E6B; /* positive status, small decorative accents (not text) */
  --sea-glass: #BFEDE6;  /* section backgrounds, cards */
  --sand: #F6EEDC;       /* page background */
  --lime: #D4F03C;       /* small highlights only (focus ring on dark, underline bars) */
  --coral: #FF7A59;      /* status badges, CTA highlight (with dark text) */
  --dark-text: #0E2A30;  /* body text */
  --white: #FFFFFF;

  /* Type */
  --font-heading: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-body: 1.0625rem;
  --fs-small: 0.9rem;
  --fs-h1: clamp(2.25rem, 6vw, 3.75rem);
  --fs-h2: clamp(1.75rem, 4vw, 2.5rem);
  --fs-h3: 1.2rem;

  /* Layout */
  --max-width: 1180px;
  --gutter: 1rem;
  --radius: 16px;
  --radius-pill: 999px;
  --space-section: clamp(3rem, 8vw, 5.5rem);
  --shadow: 0 6px 24px rgba(14, 42, 48, 0.08);
  --focus-ring: 3px solid var(--deep-teal);
}