/* ==========================================================================
   Lộc Phát — Color tokens
   Derived from the company logo: engineering blue + signal red, on a
   neutral steel-gray scale suited to an automotive-workshop-equipment brand.
   ========================================================================== */
:root {
  /* ---- Base: Blue (primary) — from logo mark ---- */
  --blue-950: #001B33;
  --blue-900: #00305C;
  --blue-800: #003C72;
  --blue-700: #00427D;
  --blue-600: #0057A6; /* logo blue */
  --blue-500: #1C74C7;
  --blue-400: #4A9AE0;
  --blue-300: #83BBEC;
  --blue-200: #BADAF5;
  --blue-100: #E4F0FB;
  --blue-50:  #F2F8FE;

  /* ---- Base: Red (accent) — from logo flag ---- */
  --red-900: #6E0E10;
  --red-700: #B01518;
  --red-600: #D91F22;
  --red-500: #E52421; /* logo red */
  --red-400: #EE514E;
  --red-300: #F4807D;
  --red-200: #F9B4B2;
  --red-100: #FCE0DF;
  --red-50:  #FDEEED;

  /* ---- Base: Steel neutrals ---- */
  --gray-950: #0F1418;
  --gray-900: #1A2129;
  --gray-800: #2A333D;
  --gray-700: #3E4A56;
  --gray-600: #57646F;
  --gray-500: #77848F;
  --gray-400: #9FABB4;
  --gray-300: #C4CCD3;
  --gray-200: #DEE3E7;
  --gray-100: #EEF1F3;
  --gray-50:  #F6F8F9;
  --white:    #FFFFFF;

  /* ---- Base: Signal (semantic) ---- */
  --green-600: #1E8E5A;
  --green-100: #DFF4E9;
  --amber-600: #C87F0A;
  --amber-100: #FBEBD1;

  /* ---- Semantic aliases ---- */
  --color-primary: var(--blue-600);
  --color-primary-hover: var(--blue-700);
  --color-primary-active: var(--blue-800);
  --color-accent: var(--red-500);
  --color-accent-hover: var(--red-600);
  --color-accent-active: var(--red-700);

  --text-primary: var(--gray-900);
  --text-secondary: var(--gray-600);
  --text-tertiary: var(--gray-500);
  --text-inverse: var(--white);
  --text-link: var(--blue-600);

  --surface-page: var(--gray-50);
  --surface-card: var(--white);
  --surface-sunken: var(--gray-100);
  --surface-dark: var(--gray-900);
  --surface-dark-raised: var(--gray-800);
  --surface-primary: var(--blue-600);
  --surface-primary-subtle: var(--blue-50);
  --surface-accent-subtle: var(--red-50);

  --border-default: var(--gray-200);
  --border-strong: var(--gray-300);
  --border-dark: var(--gray-700);
  --border-focus: var(--blue-500);

  --status-success-fg: var(--green-600);
  --status-success-bg: var(--green-100);
  --status-warning-fg: var(--amber-600);
  --status-warning-bg: var(--amber-100);
  --status-danger-fg: var(--red-600);
  --status-danger-bg: var(--red-50);
  --status-info-fg: var(--blue-600);
  --status-info-bg: var(--blue-50);
}