/* =============================================================
   tokens.css — X Net Sdn Bhd Design System Tokens
   All CSS custom properties. Import before any other stylesheet.
   ============================================================= */

:root {

  /* -----------------------------------------------------------
     BRAND COLORS (confirmed from logo files 2026-04-10)
     ----------------------------------------------------------- */
  --color-brand-blue:       #1A3BAE;  /* Royal blue — structural primary */
  --color-brand-blue-dark:  #142D8E;  /* Hover / active state */
  --color-brand-red:        #CC1A1A;  /* Crimson red — accent / CTA */
  --color-brand-red-dark:   #A81515;  /* Hover state for red buttons */

  /* Semantic roles */
  --color-primary:          var(--color-brand-blue);
  --color-primary-dark:     var(--color-brand-blue-dark);
  --color-accent:           var(--color-brand-red);
  --color-accent-dark:      var(--color-brand-red-dark);

  /* Neutrals */
  --color-bg:               #F5F7FA;
  --color-bg-alt:           #EEF2F7;
  --color-surface:          #FFFFFF;
  --color-border:           #E2E8F0;
  --color-text:             #1A1A1A;
  --color-text-muted:       #64748B;
  --color-success:          #16A34A;
  --color-white:            #FFFFFF;

  /* Primary tint (used for why-us section background) */
  --color-primary-tint:     rgba(26, 59, 174, 0.06);

  /* -----------------------------------------------------------
     TYPOGRAPHY
     ----------------------------------------------------------- */
  --font-heading:  'Poppins', 'Inter', sans-serif;
  --font-body:     'Inter', sans-serif;

  --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 */

  --font-normal:    400;
  --font-medium:    500;
  --font-semibold:  600;
  --font-bold:      700;

  --leading-tight:    1.2;
  --leading-snug:     1.4;
  --leading-normal:   1.6;
  --leading-relaxed:  1.8;

  /* -----------------------------------------------------------
     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;
  --space-32:  8rem;

  /* -----------------------------------------------------------
     BORDER RADIUS
     ----------------------------------------------------------- */
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    16px;
  --radius-full:  9999px;

  /* -----------------------------------------------------------
     SHADOWS
     ----------------------------------------------------------- */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.10);
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.12);

  /* -----------------------------------------------------------
     BREAKPOINTS (reference only — use in @media queries)
     ----------------------------------------------------------- */
  /* --bp-sm:  480px  */
  /* --bp-md:  768px  */
  /* --bp-lg:  1024px */
  /* --bp-xl:  1280px */

  /* -----------------------------------------------------------
     LAYOUT
     ----------------------------------------------------------- */
  --container-max:    1200px;
  --container-pad:    var(--space-4);
  --section-pad-y:    var(--space-16);
  --nav-height:       68px;
  --nav-height-compact: 56px;
}