/* Eterna Regeneratives — color tokens
   Source: Brand Identity Brief v2 (June 2026), §4 Colour direction */
:root {
  /* Base palette */
  --eterna-navy: #07233F;        /* primary identity colour */
  --eterna-navy-deep: #01203D;   /* deepest navy, covers & formal docs */
  --clinical-white: #FFFFFF;     /* default background */
  --warm-ivory: #F8F6F1;         /* soft premium background */
  --mineral-blue: #DDEBF4;       /* scientific tint: diagrams, data panels */
  --calcium-stone: #E5E7E8;      /* neutral material tone: dividers, cards */
  --soft-graphite: #262E36;      /* body copy */
  --regenerative-green: #7A9D8B; /* very restrained accent only */

  /* Derived tints (oklch-harmonised with the base palette) */
  --navy-80: #395064;
  --navy-60: #6A7C8C;
  --navy-40: #9CA8B3;
  --navy-12: #E1E5E9;
  --mineral-blue-50: #EEF5FA;
  --green-tint: #EDF2EF;

  /* Semantic — text */
  --text-heading: var(--eterna-navy);
  --text-body: var(--soft-graphite);
  --text-muted: var(--navy-60);
  --text-label: var(--navy-80);
  --text-inverse: var(--clinical-white);
  --text-inverse-muted: rgba(255, 255, 255, 0.66);

  /* Semantic — surfaces */
  --surface-page: var(--clinical-white);
  --surface-soft: var(--warm-ivory);
  --surface-data: var(--mineral-blue);
  --surface-data-soft: var(--mineral-blue-50);
  --surface-card: var(--clinical-white);
  --surface-inverse: var(--eterna-navy);
  --surface-inverse-deep: var(--eterna-navy-deep);

  /* Semantic — lines & structure */
  --border-hairline: var(--calcium-stone);
  --border-strong: var(--navy-40);
  --border-inverse: rgba(255, 255, 255, 0.18);
  --divider: var(--calcium-stone);

  /* Semantic — interactive */
  --interactive: var(--eterna-navy);
  --interactive-hover: #0C3257;
  --interactive-active: var(--eterna-navy-deep);
  --link: var(--eterna-navy);
  --link-hover: #0C3257;
  --focus-ring: rgba(7, 35, 63, 0.35);

  /* Semantic — accent (use sparingly) */
  --accent: var(--regenerative-green);
  --accent-surface: var(--green-tint);
}