/* VTS Design System — Primitive tokens (Layer 1)
   Raw, context-free color ramps. Prefixed --p-* to match PrimeNG.
   Values mirror the PrimeOne / Aura primitive palette (Tailwind-derived),
   with a bespoke VTS Red ramp anchored on Viettel red #EE0033.
   Never reference these directly in components — go through semantic.css. */

:root {
  /* ---- Base ---- */
  --p-white: #ffffff;
  --p-black: #000000;

  /* ---- VTS Red (brand) — anchored on #EE0033 (500) ---- */
  --p-vtsred-50: #fff1f3;
  --p-vtsred-100: #ffe0e5;
  --p-vtsred-200: #fec2cd;
  --p-vtsred-300: #fc92a6;
  --p-vtsred-400: #f75a78;
  --p-vtsred-500: #ee0033;
  --p-vtsred-600: #ce002c;
  --p-vtsred-700: #a80024;
  --p-vtsred-800: #8a0321;
  --p-vtsred-900: #730a1f;
  --p-vtsred-950: #40030e;

  /* ---- Slate (surface / neutral) ---- */
  --p-slate-0: #ffffff;
  --p-slate-50: rgb(248, 250, 252);
  --p-slate-100: rgb(241, 245, 249);
  --p-slate-200: rgb(226, 232, 240);
  --p-slate-300: rgb(203, 213, 225);
  --p-slate-400: rgb(148, 163, 184);
  --p-slate-500: rgb(100, 116, 139);
  --p-slate-600: rgb(71, 85, 105);
  --p-slate-700: rgb(51, 65, 85);
  --p-slate-800: rgb(30, 41, 59);
  --p-slate-900: rgb(15, 23, 42);
  --p-slate-950: rgb(2, 6, 23);

  /* ---- Green (success) ---- */
  --p-green-50: rgb(240, 253, 244);
  --p-green-100: rgb(220, 252, 231);
  --p-green-200: rgb(187, 247, 208);
  --p-green-300: rgb(134, 239, 172);
  --p-green-400: rgb(74, 222, 128);
  --p-green-500: rgb(34, 197, 94);
  --p-green-600: rgb(22, 163, 74);
  --p-green-700: rgb(21, 128, 61);
  --p-green-800: rgb(22, 101, 52);
  --p-green-900: rgb(20, 83, 45);
  --p-green-950: rgb(5, 46, 22);

  /* ---- Sky (info) ---- */
  --p-sky-50: rgb(240, 249, 255);
  --p-sky-100: rgb(224, 242, 254);
  --p-sky-200: rgb(186, 230, 253);
  --p-sky-300: rgb(125, 211, 252);
  --p-sky-400: rgb(56, 189, 248);
  --p-sky-500: rgb(14, 165, 233);
  --p-sky-600: rgb(2, 132, 199);
  --p-sky-700: rgb(3, 105, 161);
  --p-sky-800: rgb(7, 89, 133);
  --p-sky-900: rgb(12, 74, 110);
  --p-sky-950: rgb(8, 47, 73);

  /* ---- Amber (warn) ---- */
  --p-amber-50: rgb(255, 251, 235);
  --p-amber-100: rgb(254, 243, 199);
  --p-amber-200: rgb(253, 230, 138);
  --p-amber-300: rgb(252, 211, 77);
  --p-amber-400: rgb(251, 191, 36);
  --p-amber-500: rgb(245, 158, 11);
  --p-amber-600: rgb(217, 119, 6);
  --p-amber-700: rgb(180, 83, 9);
  --p-amber-800: rgb(146, 64, 14);
  --p-amber-900: rgb(120, 53, 15);
  --p-amber-950: rgb(69, 26, 3);

  /* ---- Red (danger) ---- */
  --p-red-50: rgb(254, 242, 242);
  --p-red-100: rgb(254, 226, 226);
  --p-red-200: rgb(254, 202, 202);
  --p-red-300: rgb(252, 165, 165);
  --p-red-400: rgb(248, 113, 113);
  --p-red-500: rgb(239, 68, 68);
  --p-red-600: rgb(220, 38, 38);
  --p-red-700: rgb(185, 28, 28);
  --p-red-800: rgb(153, 27, 27);
  --p-red-900: rgb(127, 29, 29);
  --p-red-950: rgb(69, 10, 10);

  /* ---- Purple (help) ---- */
  --p-purple-50: rgb(250, 245, 255);
  --p-purple-100: rgb(243, 232, 255);
  --p-purple-200: rgb(233, 213, 255);
  --p-purple-300: rgb(216, 180, 254);
  --p-purple-400: rgb(192, 132, 252);
  --p-purple-500: rgb(168, 85, 247);
  --p-purple-600: rgb(147, 51, 234);
  --p-purple-700: rgb(126, 34, 206);
  --p-purple-800: rgb(107, 33, 168);
  --p-purple-900: rgb(88, 28, 135);
  --p-purple-950: rgb(59, 7, 100);

  /* ---- Border radius primitives ---- */
  --p-border-radius-none: 0;
  --p-border-radius-xs: 2px;
  --p-border-radius-sm: 4px;
  --p-border-radius-md: 6px;
  --p-border-radius-lg: 8px;
  --p-border-radius-xl: 12px;
  --p-border-radius-pill: 999px;
}