/* ==========================================================================
   CORPEX Design Tokens — CSS Custom Properties
   ========================================================================== */

:root {
  /* ── Brand Colors ── */
  --cx-navy:        #0B1D3A;
  --cx-navy-light:  #112B55;
  --cx-teal:        #00A5B5;
  --cx-teal-dark:   #008A98;
  --cx-teal-light:  #00D4E8;
  --cx-accent:      #4ECDC4;
  --cx-gold:        #F4B942;

  /* ── Neutrals ── */
  --cx-white:       #FFFFFF;
  --cx-gray-50:     #F8F9FB;
  --cx-gray-100:    #EEF1F5;
  --cx-gray-200:    #DDE2EA;
  --cx-gray-300:    #B8C1CE;
  --cx-gray-400:    #8C99AB;
  --cx-gray-500:    #6B7A8D;
  --cx-gray-600:    #4F5B6B;
  --cx-gray-700:    #374151;
  --cx-gray-800:    #1F2937;
  --cx-gray-900:    #111827;

  /* ── Semantic ── */
  --cx-success:     #22C55E;
  --cx-warning:     #F59E0B;
  --cx-error:       #EF4444;
  --cx-info:        var(--cx-teal);

  /* ── Typography ── */
  --font-primary:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:      'JetBrains Mono', 'Fira Code', monospace;

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

  --fw-light:     300;
  --fw-normal:    400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  --lh-tight:   1.2;
  --lh-snug:    1.375;
  --lh-normal:  1.6;
  --lh-relaxed: 1.75;

  --ls-tight:  -0.025em;
  --ls-normal:  0;
  --ls-wide:    0.05em;
  --ls-wider:   0.1em;

  /* ── Spacing ── */
  --sp-1:   0.25rem;   /*  4px */
  --sp-2:   0.5rem;    /*  8px */
  --sp-3:   0.75rem;   /* 12px */
  --sp-4:   1rem;      /* 16px */
  --sp-5:   1.25rem;   /* 20px */
  --sp-6:   1.5rem;    /* 24px */
  --sp-8:   2rem;      /* 32px */
  --sp-10:  2.5rem;    /* 40px */
  --sp-12:  3rem;      /* 48px */
  --sp-16:  4rem;      /* 64px */
  --sp-20:  5rem;      /* 80px */
  --sp-24:  6rem;      /* 96px */

  /* ── Layout ── */
  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:   1024px;
  --container-xl:   1200px;
  --container-2xl:  1400px;

  /* ── Shadows ── */
  --shadow-sm:   0 1px 2px rgba(11,29,58,0.05);
  --shadow-md:   0 4px 6px -1px rgba(11,29,58,0.08), 0 2px 4px -2px rgba(11,29,58,0.05);
  --shadow-lg:   0 10px 15px -3px rgba(11,29,58,0.08), 0 4px 6px -4px rgba(11,29,58,0.05);
  --shadow-xl:   0 20px 25px -5px rgba(11,29,58,0.1), 0 8px 10px -6px rgba(11,29,58,0.05);
  --shadow-glow: 0 0 20px rgba(0,165,181,0.15);
  --shadow-card: 0 1px 3px rgba(11,29,58,0.06), 0 4px 16px rgba(11,29,58,0.06);

  /* ── Borders ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ── Transitions ── */
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   500ms;

  /* ── Z-index ── */
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-fixed:     300;
  --z-overlay:   400;
  --z-modal:     500;
  --z-toast:     600;
}