/* ================================================
   OCPL Logistics - Design Tokens / CSS Variables
   ================================================ */

:root {

  /* ── Colors ── */
  --color-primary:       #EE5600;
  --color-primary-hover: #D44E00;
  --color-secondary:     #113F70;
  --color-secondary-hover:#0D3159;

  --color-neutral-1:  #181919;
  --color-neutral-2:  #2E2F30;
  --color-neutral-3:  #5C5D5E;
  --color-neutral-4:  #A9A9A9;
  --color-neutral-5:  #C7CBCD;
  --color-neutral-6:  #E1E3E4;
  --color-neutral-7:  #F3F3F3;
  --color-neutral-8:  #FFFFFF;
  --color-cards-bg:   #F5F7F9;
  --color-border:     #D8D8D8;

  --color-accent-yellow: #FFD600;
  --color-icon-bg:    #FCEFF0;

  /* ── Typography – Families ── */
  --font-heading:  'B612', sans-serif;
  --font-body:     'Lato', sans-serif;
  --font-sub:      'Sarabun', sans-serif;
  --font-accent:   'Nunito', sans-serif;

  /* ── Font Sizes ── */
  --fs-h1:      64px;
  --fs-h2:      40px;
  --fs-h3:      25px;
  --fs-h4:      20px;
  --fs-h5:      18px;
  --fs-h6:      16px;
  --fs-body:    18px;
  --fs-body-sm: 16px;
  --fs-caption: 12px;
  --fs-btn:     14px;
  --fs-tag:     16px;

  /* ── Font Weights ── */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  /* ── Line Heights ── */
  --lh-heading: 1.3;
  --lh-body:    1.65;
  --lh-caption: 1.4;

  /* ── Letter Spacing ── */
  --ls-tag:    1.52px;
  --ls-btn:    0.91px;

  /* ── Spacing ── */
  --space-xs:   8px;
  --space-sm:  12px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 60px;
  --space-4xl: 80px;
  --space-5xl: 120px;

  /* ── Border Radius ── */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-full:9999px;

  /* ── Shadows ── */
  --shadow-card:   0 2px 12px rgba(0,0,0,0.08);
  --shadow-header: 0 2px 20px rgba(0,0,0,0.10);

  /* ── Transitions ── */
  --transition-fast:   0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow:   0.5s ease;

  /* ── Layout ── */
  --container-max:  1392px;
  --container-pad:  60px;

  /* ── Gradients ── */
  --grad-overlay-left: linear-gradient(to right, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.1) 100%);
  --grad-accent:       linear-gradient(-58deg, #FFD600 13.866%, #FF007A 104.79%);
  --grad-bar:          linear-gradient(-11deg, #FFD600 13.866%, #FF007A 104.79%);
}