/* ============================================================
   Dividis Capital — Color System
   Navy grounds. Emerald signals forward motion. Gold marks what matters.
   ============================================================ */

:root {
  /* ---- Brand primitives ---- */
  --navy-900: #060912;   /* deepest — near black, used for full-bleed grounds */
  --navy-800: #0a0f1e;   /* PRIMARY brand navy */
  --navy-700: #111831;
  --navy-600: #1a2342;
  --navy-500: #26315a;
  --navy-400: #3a4775;
  --navy-300: #5b6796;
  --navy-200: #8b95b8;
  --navy-100: #c2c8dc;
  --navy-50:  #eef0f6;

  --emerald-900: #064e3b;
  --emerald-800: #065f46;
  --emerald-700: #047857;
  --emerald-600: #059669;
  --emerald-500: #10b981;   /* ACCENT brand emerald */
  --emerald-400: #34d399;
  --emerald-300: #6ee7b7;
  --emerald-200: #a7f3d0;
  --emerald-100: #d1fae5;
  --emerald-50:  #ecfdf5;

  --gold-700: #b8860b;
  --gold-600: #d4a418;
  --gold-500: #f5c842;   /* HIGHLIGHT brand gold */
  --gold-400: #f7d469;
  --gold-300: #fae29b;
  --gold-200: #fcefc7;
  --gold-100: #fef7e3;

  /* ---- Neutrals (cool slate, tuned to navy) ---- */
  --slate-950: #0b0e16;
  --slate-900: #14181f;
  --slate-800: #1f242e;
  --slate-700: #313845;
  --slate-600: #4a5260;
  --slate-500: #6b7280;
  --slate-400: #97a0ad;
  --slate-300: #c5cbd4;
  --slate-200: #e0e4ea;
  --slate-100: #eef1f5;
  --slate-50:  #f7f9fb;
  --white:     #ffffff;

  /* ---- Semantic status ---- */
  --status-success: var(--emerald-500);
  --status-success-bg: var(--emerald-50);
  --status-warning: var(--gold-600);
  --status-warning-bg: var(--gold-100);
  --status-danger: #dc2626;
  --status-danger-bg: #fef2f2;
  --status-info: #2563eb;
  --status-info-bg: #eff6ff;

  /* ============================================================
     Semantic aliases — light surface (default app/marketing)
     ============================================================ */
  --bg-base: var(--slate-50);
  --surface-card: var(--white);
  --surface-raised: var(--white);
  --surface-sunken: var(--slate-100);
  --surface-inverse: var(--navy-800);

  --text-strong: var(--navy-800);
  --text-body: var(--slate-700);
  --text-muted: var(--slate-500);
  --text-subtle: var(--slate-400);
  --text-on-navy: var(--slate-100);
  --text-on-navy-muted: var(--navy-200);
  --text-accent: var(--emerald-600);
  --text-link: var(--emerald-700);

  --border-subtle: var(--slate-200);
  --border-default: var(--slate-300);
  --border-strong: var(--slate-400);
  --border-focus: var(--emerald-500);

  --accent: var(--emerald-500);
  --accent-hover: var(--emerald-600);
  --accent-press: var(--emerald-700);
  --highlight: var(--gold-500);

  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--emerald-500) 35%, transparent);
}

/* ============================================================
   Dark / navy theme scope — wrap a region in [data-theme="navy"]
   ============================================================ */
[data-theme="navy"] {
  --bg-base: var(--navy-800);
  --surface-card: var(--navy-700);
  --surface-raised: var(--navy-600);
  --surface-sunken: var(--navy-900);
  --surface-inverse: var(--white);

  --text-strong: var(--white);
  --text-body: var(--navy-100);
  --text-muted: var(--navy-200);
  --text-subtle: var(--navy-300);
  --text-accent: var(--emerald-400);
  --text-link: var(--emerald-400);

  --border-subtle: var(--navy-600);
  --border-default: var(--navy-500);
  --border-strong: var(--navy-400);

  --accent: var(--emerald-500);
  --accent-hover: var(--emerald-400);
}