/* NMG — Color tokens
   Source of truth: NMG CI 2023 corporate colors.
   White (clean), Blue (friendly / emphasis), Navy (trust), Gray (neutral), Black (text). */

:root {
  /* ---- Brand core (exact CI values) ---- */
  --nmg-white: #ffffff;
  --nmg-blue: #2080ff;   /* R32 G128 B255  — primary, friendly, emphasis */
  --nmg-navy: #003c55;   /* R0  G60  B85   — trust, graphic elements */
  --nmg-gray: #8088a1;   /* R128 G136 B161 — neutral */
  --nmg-black: #000000;

  /* ---- Blue scale (primary) ---- */
  --blue-50:  #eaf3ff;
  --blue-100: #d2e5ff;
  --blue-200: #a5cbff;
  --blue-300: #6ba8ff;
  --blue-400: #2080ff;  /* = brand blue */
  --blue-500: #1a6fe6;
  --blue-600: #1259c4;
  --blue-700: #0e459b;
  --blue-800: #0b3578;
  --blue-900: #08285c;

  /* ---- Navy scale (deep / graphic) ---- */
  --navy-50:  #e6eef2;
  --navy-100: #c2d4dd;
  --navy-300: #4d7689;
  --navy-500: #015875;
  --navy-600: #004b65;
  --navy-700: #003c55;  /* = brand navy */
  --navy-800: #002d40;
  --navy-900: #001d2b;

  /* ---- Gray / neutral scale ---- */
  --gray-50:  #f5f6f9;
  --gray-100: #eceef3;
  --gray-200: #dce0e9;
  --gray-300: #c4cad8;
  --gray-400: #a3abc0;
  --gray-500: #8088a1;  /* = brand gray */
  --gray-600: #656d85;
  --gray-700: #4c5368;
  --gray-800: #353a49;
  --gray-900: #1c1f29;

  /* ---- Ink ---- */
  --black: #000000;
  --white: #ffffff;

  /* ---- Semantic (status) ---- */
  --success: #1e9e63;
  --warning: #e6a417;
  --danger:  #e0483d;
  --info:    var(--blue-400);

  /* ================= SEMANTIC ALIASES ================= */

  /* Surfaces */
  --surface-page: var(--white);
  --surface-muted: var(--gray-50);
  --surface-card: var(--white);
  --surface-inverse: var(--navy-900);   /* dark sections / social posts */
  --surface-brand: var(--blue-400);

  /* Text */
  --text-strong: var(--gray-900);
  --text-body: var(--gray-800);
  --text-muted: var(--gray-600);
  --text-subtle: var(--gray-500);
  --text-on-brand: var(--white);
  --text-on-dark: var(--white);
  --text-link: var(--blue-500);
  --text-accent: var(--blue-400);

  /* Borders */
  --border-subtle: var(--gray-200);
  --border-default: var(--gray-300);
  --border-strong: var(--gray-400);
  --border-brand: var(--blue-400);

  /* Interaction */
  --focus-ring: var(--blue-300);

  /* Dark-section glow (social posts / hero) */
  --glow-blue: rgba(32, 128, 255, 0.55);
}