/* ============================================================
   HIBEX REVAMP — Design Tokens
   Palette: Industrial precision meets Singapore-based trust.
   Primary: Deep navy (#0D1F3C) — authority & reliability
   Accent:  Electric cyan (#00C2E0) — technology & precision
   Warm:    Steel orange (#E85D2F) — energy & industrial heat
   Surface: Cool grey (#F5F6F8) — clean, clinical, modern
   ============================================================ */

:root {
  /* --- Brand Colours --- */
  --col-navy:         #0D1F3C;
  --col-navy-light:   #1A3560;
  --col-navy-muted:   #2E4A72;
  --col-cyan:         #00C2E0;
  --col-cyan-dark:    #0099B8;
  --col-cyan-pale:    #E0F8FC;
  --col-orange:       #E85D2F;
  --col-orange-dark:  #C44820;
  --col-orange-pale:  #FDF0EB;

  /* --- Neutral Ramp --- */
  --col-grey-50:      #F5F6F8;
  --col-grey-100:     #EAECF0;
  --col-grey-200:     #D1D5DB;
  --col-grey-400:     #9CA3AF;
  --col-grey-600:     #4B5563;
  --col-grey-800:     #1F2937;
  --col-grey-900:     #111827;

  /* --- Semantic --- */
  --col-bg:           #FFFFFF;
  --col-bg-alt:       var(--col-grey-50);
  --col-bg-dark:      var(--col-navy);
  --col-text:         var(--col-grey-900);
  --col-text-muted:   var(--col-grey-600);
  --col-text-on-dark: #FFFFFF;
  --col-border:       var(--col-grey-200);
  --col-border-light: var(--col-grey-100);

  /* --- Typography --- */
  --font-display:     'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body:        'Inter', 'Helvetica Neue', sans-serif;
  --font-mono:        'JetBrains Mono', 'Courier New', monospace;

  /* --- Type Scale --- */
  --text-xs:    0.75rem;    /* 12px */
  --text-sm:    0.875rem;   /* 14px */
  --text-base:  1rem;       /* 16px */
  --text-lg:    1.125rem;   /* 18px */
  --text-xl:    1.25rem;    /* 20px */
  --text-2xl:   1.5rem;     /* 24px */
  --text-3xl:   1.875rem;   /* 30px */
  --text-4xl:   2.25rem;    /* 36px */
  --text-5xl:   3rem;       /* 48px */
  --text-6xl:   3.75rem;    /* 60px */
  --text-7xl:   4.5rem;     /* 72px */

  /* --- Spacing --- */
  --space-1:    0.25rem;
  --space-2:    0.5rem;
  --space-3:    0.75rem;
  --space-4:    1rem;
  --space-5:    1.25rem;
  --space-6:    1.5rem;
  --space-8:    2rem;
  --space-10:   2.5rem;
  --space-12:   3rem;
  --space-16:   4rem;
  --space-20:   5rem;
  --space-24:   6rem;

  /* --- Layout --- */
  --max-width:        1280px;
  --max-width-text:   720px;
  --gutter:           clamp(1rem, 4vw, 3rem);
  --nav-height:       72px;

  /* --- Radii --- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* --- Shadows --- */
  --shadow-sm:  0 1px 3px rgba(13,31,60,.08), 0 1px 2px rgba(13,31,60,.05);
  --shadow-md:  0 4px 12px rgba(13,31,60,.10), 0 2px 4px rgba(13,31,60,.06);
  --shadow-lg:  0 16px 40px rgba(13,31,60,.14), 0 4px 8px rgba(13,31,60,.08);
  --shadow-xl:  0 32px 64px rgba(13,31,60,.18);

  /* --- Motion --- */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.7, 0, 0.84, 0);
  --ease-inout: cubic-bezier(0.45, 0, 0.55, 1);
  --dur-fast:   150ms;
  --dur-base:   250ms;
  --dur-slow:   400ms;

  /* --- Z-index --- */
  --z-below:    -1;
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-nav:      200;
  --z-modal:    300;
  --z-toast:    400;
}