/* ============================================================
   Vichem — Color System
   Brand palette from "Bộ quy chuẩn thương hiệu Vichem v1.0".
   Two signature colors:
     • Xanh dương (Blue)  #1e5cab — trust + technology
     • Xanh lá   (Green)  #aad037 — nature, clean, safe (logo arrow)
   Secondary: dark blue #1a447b, olive green #8aab3e.
   ============================================================ */

:root {
  /* ---- Brand anchors (exact brand values) ---- */
  --vichem-blue: #1e5cab;        /* primary brand blue  R30 G92 B171 */
  --vichem-blue-dark: #1a447b;   /* secondary / gradient end        */
  --vichem-green: #aad037;       /* bright lime — logo arrow        */
  --vichem-green-olive: #8aab3e; /* secondary olive green           */

  /* ---- Blue scale ---- */
  --blue-50:  #eef4fb;
  --blue-100: #d8e6f5;
  --blue-200: #aecbea;
  --blue-300: #7ba8da;
  --blue-400: #4a82c6;
  --blue-500: #1e5cab;  /* = --vichem-blue */
  --blue-600: #1a4f95;
  --blue-700: #1a447b;  /* = --vichem-blue-dark */
  --blue-800: #163760;
  --blue-900: #122a49;

  /* ---- Green / lime scale ---- */
  --green-50:  #f6faea;
  --green-100: #eaf4cb;
  --green-200: #d9ec9d;
  --green-300: #c4e16b;
  --green-400: #aad037;  /* = --vichem-green (bright lime) */
  --green-500: #8aab3e;  /* = --vichem-green-olive */
  --green-600: #6f8a32;
  --green-700: #566a28;
  --green-800: #3f4d1f;
  --green-900: #2b3516;

  /* ---- Neutrals (cool grays, nudged toward brand blue) ---- */
  --gray-0:   #ffffff;
  --gray-50:  #f6f8fb;
  --gray-100: #eef1f6;
  --gray-200: #e0e6ee;
  --gray-300: #cad3df;
  --gray-400: #99a6b6;
  --gray-500: #6a7787;
  --gray-600: #4b5664;
  --gray-700: #353e4a;
  --gray-800: #222a34;
  --gray-900: #131a23;
  --ink:      #0d141d;

  /* ---- Semantic status ---- */
  --success: #4e9a35;
  --success-bg: #eaf4e2;
  --warning: #e09a2d;
  --warning-bg: #fbf0d8;
  --danger:  #d24545;
  --danger-bg: #fbe6e6;
  --info: var(--blue-500);
  --info-bg: var(--blue-50);

  /* ---- Brand gradient (logo on gradient nền) ---- */
  --gradient-brand: linear-gradient(120deg, #1e5cab 0%, #1a447b 100%);
  --gradient-fresh: linear-gradient(120deg, #1e5cab 0%, #8aab3e 100%);

  /* ============================================================
     Semantic aliases — reference these in components/UI, not raw scale
     ============================================================ */
  --color-primary: var(--blue-500);
  --color-primary-hover: var(--blue-600);
  --color-primary-active: var(--blue-700);
  --color-primary-contrast: #ffffff;

  --color-accent: var(--green-400);
  --color-accent-hover: var(--green-500);
  --color-accent-contrast: var(--blue-900);

  --text-strong: var(--ink);
  --text-body: var(--gray-700);
  --text-muted: var(--gray-500);
  --text-faint: var(--gray-400);
  --text-on-brand: #ffffff;
  --text-link: var(--blue-500);

  --surface-page: var(--gray-50);
  --surface-card: #ffffff;
  --surface-sunken: var(--gray-100);
  --surface-brand: var(--blue-500);
  --surface-brand-dark: var(--blue-700);
  --surface-inverse: var(--ink);

  --border-subtle: var(--gray-200);
  --border-default: var(--gray-300);
  --border-strong: var(--gray-400);
  --border-brand: var(--blue-500);

  --focus-ring: color-mix(in srgb, var(--blue-500) 45%, transparent);
}