/* ============================================================
   Network of Trusted Networks — Color tokens
   Source palette extracted from the live WordPress site:
   #07111e #0b2348 #009fd4 #4a6480 #f2f6fa #c8d8e8 #ffffff
   Derived steps computed in oklch to stay harmonious.
   ============================================================ */
:root {
  /* ---- Brand navy (deep institutional blue) ---- */
  --navy-950: #07111e;   /* hero / darkest surface  — source */
  --navy-900: #0a1a31;   /* dark surface raised */
  --navy-800: #0b2348;   /* PRIMARY brand navy      — source */
  --navy-700: #143063;
  --navy-600: #1d3f7e;
  --navy-500: #2b5499;

  /* ---- Cyan (signal / accent) ---- */
  --cyan-700: #006f95;
  --cyan-600: #0089b8;   /* accent hover (darker) */
  --cyan-500: #009fd4;   /* PRIMARY accent          — source */
  --cyan-400: #2bb4e3;   /* accent on dark / lighter hover */
  --cyan-300: #7fd2f0;
  --cyan-100: #d6eefa;   /* tint surface */

  /* ---- Slate (cool neutral text/ui) ---- */
  --slate-700: #2c3e54;
  --slate-600: #3a516c;
  --slate-500: #4a6480;  /* muted body / captions   — source */
  --slate-400: #6f88a4;
  --slate-300: #97acc4;
  --slate-200: #c8d8e8;  /* borders on light        — source */
  --slate-100: #e2ecf5;
  --slate-50:  #f2f6fa;  /* light section surface   — source */

  --white: #ffffff;
  --black: #07111e;

  /* ---- Semantic status ---- */
  --status-success: #1f9d6b;
  --status-success-tint: #e3f4ec;
  --status-warning: #d98a16;
  --status-warning-tint: #fbf0db;
  --status-danger: #d24b4b;
  --status-danger-tint: #fae3e3;
  --status-info: var(--cyan-500);
  --status-info-tint: var(--cyan-100);

  /* ============================================================
     Semantic aliases — reach for these in components
     ============================================================ */

  /* Surfaces */
  --surface-page: var(--white);
  --surface-subtle: var(--slate-50);
  --surface-card: var(--white);
  --surface-inverse: var(--navy-950);   /* dark hero/footer */
  --surface-inverse-raised: var(--navy-900);
  --surface-brand: var(--navy-800);
  --surface-accent: var(--cyan-500);
  --surface-accent-tint: var(--cyan-100);

  /* Text */
  --text-strong: var(--navy-950);   /* headings on light */
  --text-body: var(--slate-700);    /* body on light */
  --text-muted: var(--slate-500);   /* captions / meta */
  --text-faint: var(--slate-400);
  --text-on-dark: var(--white);
  --text-on-dark-muted: #9fb4cd;
  --text-accent: var(--cyan-600);   /* cyan link/text on light (AA) */
  --text-accent-on-dark: var(--cyan-400);
  --text-inverse: var(--navy-950);

  /* Borders & lines */
  --border-subtle: var(--slate-100);
  --border-default: var(--slate-200);
  --border-strong: var(--slate-300);
  --border-on-dark: rgba(255,255,255,0.12);
  --border-on-dark-strong: rgba(255,255,255,0.22);
  --border-accent: var(--cyan-500);

  /* Interactive accent (buttons / links) */
  --accent: var(--cyan-500);
  --accent-hover: var(--cyan-600);
  --accent-active: var(--cyan-700);
  --accent-fg: var(--white);

  --focus-ring: rgba(0,159,212,0.45);
  --overlay-scrim: rgba(7,17,30,0.62);
}