/*
 * Global theme definitions for the OnaviXpay dashboard.
 *
 * The original palette included a number of disparate greens and greys that
 * could clash when used together. To clean things up while keeping the
 * distinctive teal as the core brand colour ("màu xanh cổ vịt"), we unify
 * the supporting shades around that base tone.  Lighter tints of teal
 * provide soft backgrounds, slightly muted accents work for secondary
 * elements, and darker teal tones replace stark blacks for improved
 * contrast without overwhelming the eyes.  Greys have been softened to
 * harmonise with the teal family.
 */

:root {
  /* Core brand colours */
  --primary-color: #008080;        /* main teal tone */
  --primary-dark-color: #006666;   /* deeper teal for hovers/borders */
  --secondary-color: #009090;      /* muted accent teal for secondary elements */

  --tertiary-color: #20B2AA;         /* brighter teal for highlights and accents */

  /* Neutrals */
  --light-color: #f8f9f9;          /* off‑white for text/icons on dark backgrounds */
  --dark-color: #023b3b;           /* dark teal replacing plain black */
  --white: #ffffff;

  /* Text colours */
  --text-color: #022f2f;           /* primary body text colour – dark teal */
  --text-light: #f8f9f9;           /* inverted text on coloured backgrounds */
  --text-gray: #6c757d;            /* softened grey for tertiary text */

  /* Backgrounds */
  --background-color: #eef7f7;     /* very light teal for page backgrounds */
  --section-bg: #e5f2f2;           /* slightly darker than background for alternating sections */
  --surface-bg: #ffffff;           /* clean white for cards and panels */

  /* Miscellaneous */
  --bs-secondary-color: #95a5a6;   /* gentle grey used by Bootstrap components */
}

/* Base page styling */
body {
  background-color: var(--background-color);
  color: var(--text-color);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}