/* ============================================================
   TIK TRUCK — Brand Color System Logi ERP 
   ============================================================ */

:root {

   /* ----------------------------------------------------------
     BRAND PALETTE — Primary
  ---------------------------------------------------------- */
   --tt-navy: #1B2A4A;
   /* Deep Gulf Navy  — brand primary     */

   --tt-gold: #D4A017;
   /* Gulf Gold       — brand secondary   */
   --tt-orange: #F4631E;
   /* Sandstorm Orange — accent / CTA     */
   --tt-cream: #F6F2EA;
   /* Oasis Cream     — light background  */

   /* ----------------------------------------------------------
     BRAND PALETTE — Supporting
  ---------------------------------------------------------- */
   --tt-slate: #3D4A5C;
   /* Slate           — body text / UI    */
   --tt-sand: #C9BBA0;
   /* Desert Sand     — dividers / muted  */
   --tt-white: #FFFFFF;
   /* White           — clean surfaces    */
   --tt-midnight: #0D1A2E;
   /* Midnight        — dark backgrounds  */

   /* ----------------------------------------------------------
     SEMANTIC — Danger / Error
  ---------------------------------------------------------- */
   --tt-danger: #D63B3B;
   /* strong — text, icons, borders       */
   --tt-danger-dark: #A12828;
   /* darker — text on light bg           */
   --tt-danger-deep: #7A1F1F;
   /* deepest — body text inside banners  */
   --tt-danger-bg: #FDEAEA;
   /* tint   — banner / badge background  */

   /* ----------------------------------------------------------
     SEMANTIC — Warning
  ---------------------------------------------------------- */
   --tt-warning: #E8920A;
   /* strong — text, icons, borders       */
   --tt-warning-dark: #9B5F05;
   /* darker — text on light bg           */
   --tt-warning-deep: #7A4A03;
   /* deepest — body text inside banners  */
   --tt-warning-bg: #FEF3DC;
   /* tint   — banner / badge background  */

   /* ----------------------------------------------------------
     SEMANTIC — Success
  ---------------------------------------------------------- */
   --tt-success: #2A8A52;
   /* strong — text, icons, borders       */
   --tt-success-dark: #1A5C35;
   /* darker — text on light bg           */
   --tt-success-deep: #134A28;
   /* deepest — body text inside banners  */
   --tt-success-bg: #E2F5EC;
   /* tint   — banner / badge background  */

   /* ----------------------------------------------------------
     SEMANTIC — Info
  ---------------------------------------------------------- */
   --tt-info: #2B7FC1;
   /* strong — text, icons, borders       */
   --tt-info-dark: #1A5A90;
   /* darker — text on light bg           */
   --tt-info-deep: #104270;
   /* deepest — body text inside banners  */
   --tt-info-bg: #E3F0FB;
   /* tint   — banner / badge background  */

   /* ----------------------------------------------------------
     SEMANTIC — Alert (Brand Orange)
  ---------------------------------------------------------- */
   --tt-alert: #F4631E;
   /* strong — same as brand accent       */
   --tt-alert-dark: #B84410;
   /* darker — text on light bg           */
   --tt-alert-deep: #8A3209;
   /* deepest — body text inside banners  */
   --tt-alert-bg: #FEE8DC;
   /* tint   — banner / badge background  */

   /* ----------------------------------------------------------
     SEMANTIC — Neutral / Inactive
  ---------------------------------------------------------- */
   --tt-neutral: #6B7280;
   /* strong — text, icons, borders       */
   --tt-neutral-dark: #4B5563;
   /* darker — text on light bg           */
   --tt-neutral-bg: #F1F2F4;
   /* tint   — banner / badge background  */

   /* Focus ring (keyboard / focus-visible) */
   --tt-focus-ring: var(--tt-info);
   --tt-focus-ring-offset: 2px;

}

/* You are compelled to use only these colors in the project. */