/* Emusys Academy — color tokens (dark theme). Palette confirmed:
   #02041B (ink, base bg), #0B1250 (navy, surfaces), #CF9837 (gold, primary/accent), #E2E2E2 (body text). */

:root {
  /* ── Base brand ─────────────────────────────── */
  --ink: #02041B;           /* deepest — page background */
  --navy: #0B1250;          /* surfaces — cards, subtle sections */
  --navy-700: #141B5E;      /* elevated surface — card on top of navy */
  --gold: #CF9837;          /* primary/accent (client-confirmed) */
  --gold-600: #B0812F;      /* hover/pressed */
  --gold-700: #956D28;      /* active/pressed */
  --white: #FFFFFF;

  /* ── Gold tints (derived) ───────────────────── */
  --gold-100: #F3D89D;
  --gold-200: #E7C179;
  --gold-300: #DCAE58;

  /* ── Neutrals (light, for text/borders on dark bg) ── */
  --gray-050: #E2E2E2;      /* brightest neutral — body text (client-confirmed) */
  --gray-100: #C7C7CE;
  --gray-200: #A9A9B4;
  --gray-300: #8B8B9A;      /* muted text */
  --gray-400: #6E6E82;
  --gray-500: #52526A;
  --gray-600: #3A3A54;      /* strong border */
  --gray-700: #24243A;      /* default border */
  --gray-800: #14142A;

  /* ── Semantic status (adjusted for dark bg contrast) ── */
  --success: #34C77C;
  --success-bg: rgba(52, 199, 124, 0.12);
  --warning: #E3872E;
  --warning-bg: rgba(227, 135, 46, 0.12);
  --danger: #F4615A;
  --danger-bg: rgba(244, 97, 90, 0.12);
  --info: #5B8DEF;
  --info-bg: rgba(91, 141, 239, 0.12);

  /* ── Semantic aliases ───────────────────────── */
  --text-heading: var(--white);
  --text-body: var(--gray-050);
  --text-muted: var(--gray-300);
  --text-on-brand: var(--ink);   /* dark text on gold — better contrast than white */
  --text-link: var(--gold);

  --surface-page: var(--ink);
  --surface-subtle: var(--navy);
  --surface-card: var(--navy-700);
  --surface-brand: var(--gold);
  --surface-brand-subtle: rgba(207, 152, 55, 0.12);
  --surface-dark: var(--ink);

  --border-default: var(--gray-700);
  --border-strong: var(--gray-600);
  --border-focus: var(--gold);

  --cta: var(--gold);
  --cta-hover: var(--gold-600);
  --cta-active: var(--gold-700);
}