/* PNOĒ — Color tokens
   Brand: clinical-grade metabolic testing. Vivid red signal color over a calm,
   premium palette of soft sky-blue and muted lavender-grey, anchored in ink-black
   editorial serif headings on white. */

:root {
  /* ---- Brand red (the signal color) ---- */
  --red-500: #f7213c;   /* primary — buttons, announcement bar, logo accent */
  --red-600: #e10a1e;   /* headings on light, hover/press */
  --red-700: #c00718;   /* deep press */
  --red-100: #ffe3e7;   /* tint surface */
  --red-050: #fff4f5;   /* faintest wash */

  /* ---- Ink / neutrals (warm-cool grey ramp) ---- */
  --ink-900: #0b0b0d;   /* serif headlines, logo, near-black */
  --ink-800: #1c1d22;
  --ink-700: #34353d;
  --ink-600: #4d4f59;   /* body text */
  --ink-500: #6c6e7a;   /* secondary text */
  --ink-400: #9a9ca9;   /* muted / captions */
  --ink-300: #c7c8d2;   /* borders strong */
  --ink-200: #e4e5ec;   /* hairline borders */
  --ink-100: #f1f2f6;   /* subtle fills */
  --ink-050: #f8f8fb;   /* off-white surface */
  --white:   #ffffff;

  /* ---- Sky blue (hero / breath imagery) ---- */
  --sky-400: #a9cbe4;
  --sky-300: #c6dcec;   /* hero gradient anchor */
  --sky-200: #d3e0ea;
  --sky-100: #e7f0f7;

  /* ---- Lavender / periwinkle mist (calm section grounds) ---- */
  --mist-500: #adaac2;  /* deepest mist */
  --mist-400: #bcbbd0;
  --mist-300: #c8c7d8;  /* section background anchor */
  --mist-200: #dcdbe7;
  --mist-100: #eeedf4;

  /* ---- Functional / data-viz (metabolic report metrics) ---- */
  --signal-fat: #2f8f6b;    /* fat oxidation / aerobic green */
  --signal-carb: #e8a13a;   /* carb burn / amber */
  --signal-zone2: #3a78c2;  /* aerobic threshold blue */
  --signal-vo2: var(--red-500);
  --signal-good: #2f8f6b;
  --signal-warn: #e8a13a;
  --signal-risk: #e10a1e;

  /* =====================================================
     SEMANTIC ALIASES — reference these in product code
     ===================================================== */

  /* surfaces */
  --surface-page: var(--white);
  --surface-page-alt: var(--ink-050);
  --surface-card: var(--white);
  --surface-raised: var(--white);
  --surface-sunken: var(--ink-100);
  --surface-mist: var(--mist-300);    /* calm lavender section */
  --surface-sky: var(--sky-300);      /* breath / hero section */
  --surface-inverse: var(--ink-900);  /* footer, dark panels */
  --surface-brand: var(--red-500);    /* announcement bar, accents */

  /* text */
  --text-display: var(--ink-900);     /* serif headlines */
  --text-heading: var(--ink-900);
  --text-body: var(--ink-600);
  --text-secondary: var(--ink-500);
  --text-muted: var(--ink-400);
  --text-on-brand: var(--white);
  --text-on-inverse: var(--ink-050);
  --text-brand: var(--red-600);       /* red eyebrow / accent headings */
  --text-link: var(--red-600);

  /* borders */
  --border-hairline: var(--ink-200);
  --border-default: var(--ink-300);
  --border-strong: var(--ink-700);
  --border-brand: var(--red-500);

  /* focus ring */
  --focus-ring: color-mix(in oklab, var(--red-500) 55%, transparent);
}