/* tokens.css — single source of the visual system (constitution Principle III).
   :root block transcribed verbatim from
   specs/001-apalala-static-site/contracts/design-tokens.md.
   style.css and pages consume these custom properties only — no raw hex
   or font names outside this file. */

:root {
  /* Brand & ink — teal scale (primary) */
  --c-teal-950: #10303A;  /* page/footer dark bg */
  --c-teal-900: #123842;
  --c-teal-800: #1A4E5A;  /* headings on light, section dark bg */
  --c-teal-700: #23545F;
  --c-ming-dark: #1A4E5A;  /* official Apalala brand green — header bar (owner feedback 2026-10-05) */
  --c-teal-600: #2C505C;
  --c-teal-500: #3C6472;  /* secondary text on dark */
  --c-teal-400: #467082;
  --c-teal-200: #9DC9DC;  /* light accent on dark */

  /* Accents */
  --c-orange-400: #F19A3E; /* CTA/links/underlines */
  --c-orange-600: #E36414; /* hover/strong accent */
  --c-lime-400:   #A3D948; /* stats/success, Apalala dragon green */
  --c-salmon-200: #FFB4A2; /* soft highlight */

  /* Neutrals */
  --c-white: #FFFFFF;
  --c-paper: #F7F5F0;      /* warm section bg */
  --c-mist:  #F5F7FA;      /* cool section bg */
  --c-haze:  #E8EFF2;      /* card bg */
  --c-line:  #E3EAEE;      /* hairlines */
  --c-sand:  #E4E1DA;      /* warm hairline */
  --c-ink:   #1F2937;      /* body text on light */
  --c-slate: #374151;
  --c-gray-600: #4B5563;   /* secondary text */
  --c-gray-500: #6B7280;
  --c-gray-400: #9CA3AF;   /* muted */

  /* Typography */
  --font-head: "Poppins", Arial, sans-serif;         /* weights 500/600/700 */
  --font-body: "Roboto Flex", "Segoe UI", Arial, sans-serif; /* 400/500/700 */
  --fs-hero: clamp(2.25rem, 5vw, 3.5rem);
  --fs-h2: clamp(1.6rem, 3vw, 2.25rem);
  --fs-h3: 1.25rem;
  --fs-body: 1.0625rem;
  --fs-small: 0.875rem;
  --lh-body: 1.65;
  --lh-head: 1.15;

  /* Space & shape */
  --s-1: 4px;  --s-2: 8px;  --s-3: 16px; --s-4: 24px;
  --s-5: 40px; --s-6: 64px; --s-7: 104px;
  --r-sm: 8px; --r-md: 14px; --r-pill: 999px;
  --shadow-card: 0 1px 2px rgba(16,48,58,.06), 0 8px 24px rgba(16,48,58,.08);
  --container: 1120px;
}

/* Self-hosted fonts (contract rule 3) — never a Google Fonts URL.
   Paths are relative to public/css/. */
@font-face {
  font-family: "Poppins";
  src: url("../assets/fonts/poppins-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../assets/fonts/poppins-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../assets/fonts/poppins-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto Flex";
  src: url("../assets/fonts/roboto-flex-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  font-variation-settings: "opsz" 11;
}

/* added: T016–T018 design-parity pass */
:root {
  --fs-stat: clamp(2rem, 4vw, 2.75rem);            /* big-number stat scale, above --fs-h2 */
  --header-h: calc(var(--s-6) + var(--s-3));        /* sticky header height, single source */
  --tap: 44px;                                      /* min touch target (WCAG 2.5.5) */
}