/* TerraFab OS marketing site — design tokens.
   Source: TerraFab-OS-Website-Design-Options/HANDOVER-marketing-site.md §2.
   Extracted verbatim; every colour/radius/shadow/motion value the prototypes
   use maps to one of these. Consumed incrementally as each marketing page is
   rebuilt (see the handover doc's slice list) -- linking this file does not
   itself change any page's rendering. */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=IBM+Plex+Mono:wght@500;600&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Colour */
  --tf-sand:        #F5EEE3;  /* page background — never pure white */
  --tf-shell:       #FBF7F1;  /* cards, elevated surfaces, alternating sections */
  --tf-ink:         #16211F;  /* body text, logo mark */
  --tf-deep:        #0A2930;  /* dark sections, top utility bar, CTA panels */
  --tf-ocean:       #0F4C5C;  /* primary brand: links, stat band, numbered discs */
  --tf-ocean-mid:   #0F7A86;  /* timeline dots */
  --tf-ocean-text:  #0C6A72;  /* filename text, small teal labels */
  --tf-coral:       #E07856;  /* primary CTA fill, accent rules, eyebrows on dark */
  --tf-coral-press: #C9663F;  /* CTA hover */
  --tf-coral-deep:  #C0492B;  /* hold-point eyebrow */
  --tf-palm:        #2E5339;  /* eyebrows on light, certified/success state */
  --tf-amber:       #B9762B;  /* PENDING status pill */
  --tf-slate:       #3C5A62;  /* neutral file chip text */

  /* Alpha derivations (used as-is throughout) */
  --tf-line:        rgba(10,41,48,0.12);   /* 1px borders, footer/nav rules */
  --tf-line-soft:   rgba(10,41,48,0.08);
  --tf-body:        rgba(22,33,31,0.75);   /* long-form body copy on sand */
  --tf-body-muted:  rgba(22,33,31,0.65);
  --tf-body-faint:  rgba(22,33,31,0.45);
  --tf-on-dark:     rgba(245,238,227,0.70); /* body copy on --tf-deep */

  /* Radii */
  --tf-r-sm: 10px;  /* buttons, small cards, pills-that-arent-pills */
  --tf-r-md: 12px;  /* evidence file chips */
  --tf-r-lg: 18px;  /* cards, image frames, stat band */
  --tf-r-xl: 28px;  /* hero image, full-width CTA panels */

  /* Shadows — always a tint of deep, never black */
  --tf-shadow-sm: 0 6px 20px -12px rgba(10,41,48,0.18);
  --tf-shadow-md: 0 6px 20px -8px  rgba(10,41,48,0.18);
  --tf-shadow-lg: 0 22px 44px -18px rgba(10,41,48,0.25);
  --tf-shadow-hover: 0 14px 28px -14px rgba(10,41,48,0.22);

  /* Motion */
  --tf-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --tf-dur:  400ms;
}