/*
 * HumanMetrics — Design Tokens
 * Drop this file into any project and import it.
 * Font: Manrope — https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap
 */

:root {
  /* ── Backgrounds ── */
  --hm-black:    #050505;
  --hm-card:     #111111;
  --hm-card2:    #1a1a1a;

  /* ── Borders ── */
  --hm-border:   #262626;
  --hm-border2:  #333333;

  /* ── Text ── */
  --hm-white:    #ffffff;
  --hm-body:     #E5E5E5;
  --hm-muted:    #A3A3A3;
  --hm-dim:      #555555;

  /* ── Brand accents ── */
  --hm-green:    #9CDA2B;   /* primary — CTAs, logo dot, highlights */
  --hm-teal:     #00CFE5;   /* hover states, underlines */
  --hm-blue:     #10A5F5;   /* data visualisation */
  --hm-peach:    #F4926A;   /* scroll cues, pull quotes */

  /* ── Semantic: Attention / Risk ── */
  --hm-attn-bg:  #3A1014;
  --hm-attn-bd:  #5C1A1F;
  --hm-attn-tx:  #FF4D4D;

  /* ── Semantic: Watch / Caution ── */
  --hm-watch-bg: #3D2800;
  --hm-watch-bd: #5C3D00;
  --hm-watch-tx: #F5A623;

  /* ── Semantic: Healthy / On Track ── */
  --hm-hlth-bg:  #0A2E13;
  --hm-hlth-bd:  #144A23;
  --hm-hlth-tx:  #74E600;

  /* ── Motion ── */
  --hm-ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Focus ── */
  /* All interactive elements must use :focus-visible (not :focus) to avoid
     showing rings on mouse clicks. Canonical rule:
       :focus-visible { outline: 2px solid var(--hm-green); outline-offset: 3px; }
     Use outline-offset: 2px for inputs (no gap needed at the border edge).
     Use var(--hm-attn-tx) for destructive (danger) actions only. */

  /* ── Layout ── */
  --hm-inner:      1100px;
  --hm-inner-wide: 1200px;
  --hm-inner-narrow: 860px;
  --hm-nav-height: 68px;
  --hm-section-pad: 100px;
  --hm-page-pad: 48px;
}