/* incirqel — color tokens. Source: Corporate Design guide (Sage + Ink Navy direction) */
:root {
  /* Base palette */
  --ink-navy: #16243F;
  --sage: #78C295;
  --copper: #E0684B;
  --copper-hover: #C55A3F;
  --copper-text: #A8422E;   /* copper as text on light — ≥4.5:1 */
  --pine: #2E8E63;
  --cloud: #C9D2E0;
  --mist: #F7F8FB;
  --white: #FFFFFF;
  --error: #C4453C;

  /* Derived tints (oklch-adjacent mixes of base palette) */
  --navy-800: #1D2F52;      /* raised surface on navy */
  --navy-700: #263A63;      /* borders/dividers on navy */
  --sage-tint: #EAF6EF;     /* small surfaces/badges only; NOT a page ground */
  --cloud-50: #E9EDF4;      /* between mist and cloud */

  /* Semantic — light (Mist) context */
  --surface-page: var(--mist);      /* cool-neutral ground keeps the system deep-tech, not eco */
  --surface-card: var(--white);
  --surface-accent: var(--sage);
  --surface-hero: var(--sage);      /* Sage = focal hero/feature plane */
  --text-on-hero: var(--ink-navy);  /* body/headline on Sage hero */
  --text-body: var(--ink-navy);
  --text-secondary: #4A5872; /* navy at ~70% on light */
  --text-on-accent: var(--ink-navy);
  --link: var(--pine);
  --border-subtle: var(--cloud);
  --btn-primary-bg: var(--ink-navy);
  --btn-primary-fg: var(--mist);
  --signal: var(--copper);
  --signal-hover: var(--copper-hover);
  --success: var(--pine);
  --focus-ring: rgba(46, 142, 99, 0.45);
}

/* Dark (Ink Navy) context — apply to navy sections: contrast band, not dominant base */
.theme-navy {
  --surface-page: var(--ink-navy);
  --surface-card: var(--navy-800);
  --surface-accent: var(--sage);
  --surface-hero: var(--navy-800); /* on navy, hero plane steps up, not Sage-flooded */
  --text-on-hero: var(--mist);
  --text-body: var(--mist);
  --text-secondary: #A9B6CC;
  --text-on-accent: var(--ink-navy);
  --link: var(--sage);
  --border-subtle: var(--navy-700);
  --btn-primary-bg: var(--sage);
  --btn-primary-fg: var(--ink-navy);
}