/* ============================================================
   Deleg · Color tokens
   Navy = competence & reliability. Orange = energy & humanity.
   Neutrals (slate) build structure in the interface.
   ============================================================ */
:root {
  /* ---- Brand core ---- */
  --deleg-navy: #152547;        /* Primary · brand · headlines */
  --deleg-navy-deep: #0F2756;   /* Button fills, deeper navy   */
  --deleg-navy-900: #0A1C3E;
  --deleg-orange: #F28C28;      /* Energy · CTA · highlight     */

  /* ---- Tints (soft brand washes used behind sections) ---- */
  --deleg-sky: #A5C8F5;         /* light brand blue */
  --deleg-sky-tint: rgba(165, 200, 245, 0.10);
  --deleg-navy-tint: rgba(21, 37, 71, 0.06);

  /* ---- Neutrals (slate ramp) ---- */
  --slate-950: #020817;   /* near-black text on white   */
  --slate-700: #334155;
  --slate-600: #475569;   /* secondary text (#5B6B84 family) */
  --slate-500: #64748B;   /* muted / placeholder text   */
  --slate-400: #94A3B8;   /* faint text / icons         */
  --slate-300: #CBD5E1;
  --slate-200: #E2E8F0;   /* borders · dividers         */
  --slate-100: #F1F5F9;   /* surface · cards · secondary bg */
  --slate-50:  #F6F9FD;   /* faintest surface wash      */
  --white: #FFFFFF;

  /* ---- Functional ---- */
  --link-blue: #4775D1;   /* interactive · focus rings  */
  --success: #16A34A;     /* completed states           */
  --error: #EF4444;       /* alerts · destructive       */

  /* ---- Semantic aliases (use these in UI) ---- */
  --color-primary: var(--deleg-navy);
  --color-primary-press: var(--deleg-navy-900);
  --color-accent: var(--deleg-orange);
  --text-strong: var(--slate-950);
  --text-body: var(--slate-600);
  --text-muted: var(--slate-500);
  --text-on-navy: rgba(255, 255, 255, 0.85);
  --text-on-navy-muted: rgba(255, 255, 255, 0.55);

  --surface-page: var(--white);
  --surface-card: var(--white);
  --surface-sunken: var(--slate-100);
  --surface-section: var(--slate-50);
  --surface-brand: var(--deleg-navy);

  --border-default: var(--slate-200);
  --border-strong: var(--slate-300);
  --focus-ring: var(--link-blue);

  --btn-primary-bg: var(--deleg-navy-deep);
  --btn-primary-fg: var(--white);
  --btn-accent-bg: var(--deleg-orange);
  --btn-accent-fg: var(--white);
}