/* FinTutor.ai — Color tokens
   60% navy structure · 30% white + tinted gray surfaces · 10% yellow accent (CTAs only) */
:root {
  /* ---- Navy (primary, 60%) ---- */
  --navy-900: #122749;
  --navy-800: #15315a;
  --navy-700: #1B3A6B; /* brand primary */
  --navy-600: #244a82;
  --navy-500: #345f9c;
  --navy-300: #8fa6c6;
  --navy-100: #d6e0ee;

  /* ---- Yellow (accent, 10% — CTAs / highlights only) ---- */
  --yellow-600: #d9b400;
  --yellow-500: #fcd718; /* brand accent */
  --yellow-300: #fde566;
  --yellow-100: #fff6cc;

  /* ---- Neutrals / surfaces (30%) ---- */
  --white: #ffffff;
  --gray-50:  #f4f6fa; /* light navy-tinted page bg */
  --gray-100: #e9edf4;
  --gray-200: #dbe1ea;
  --gray-300: #c4cdda;
  --gray-400: #9aa6b6;
  --gray-500: #5B6472; /* muted secondary text */
  --gray-700: #3a4250;
  --gray-900: #222222; /* primary text on light / on yellow */

  /* ---- Success (emerald) ---- */
  --emerald-700: #154a19;
  --emerald-600: #1B5E20; /* brand success */
  --emerald-100: #cfe6d1;
  --emerald-50:  #e9f3ea;

  /* ---- Functional accents (use sparingly, not brand) ---- */
  --danger-600: #b3261e;
  --danger-50:  #fbeae9;
  --warn-600:   #9a6b00;
  --warn-50:    #fdf4e0;

  /* ================= Semantic aliases ================= */
  --color-primary: var(--navy-700);
  --color-primary-hover: var(--navy-800);
  --color-primary-active: var(--navy-900);

  --color-accent: var(--yellow-500);
  --color-accent-hover: var(--yellow-600);
  --color-on-accent: var(--gray-900); /* ALWAYS #222 on yellow */

  --color-success: var(--emerald-600);
  --color-success-surface: var(--emerald-50);
  --color-danger: var(--danger-600);
  --color-danger-surface: var(--danger-50);

  /* Surfaces */
  --surface-page: var(--gray-50);
  --surface-card: var(--white);
  --surface-raised: var(--white);
  --surface-navy: var(--navy-700);
  --surface-navy-deep: var(--navy-900);
  --surface-subtle: var(--gray-100);

  /* Text */
  --text-strong: var(--navy-700);
  --text-body: var(--gray-900);
  --text-muted: var(--gray-500);
  --text-on-navy: var(--white);
  --text-on-navy-muted: var(--navy-100);
  --text-on-accent: var(--gray-900);
  --text-link: var(--navy-600);

  /* Borders / dividers */
  --border-subtle: var(--gray-200);
  --border-default: var(--gray-300);
  --border-strong: var(--navy-300);
  --border-focus: var(--navy-600);

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(36, 74, 130, 0.35);
}