/* =============================================================================
   Design Tokens — CallCenturion™ Marketing Site
   Matches the colour palette and type scale from the existing portal suite.
   ============================================================================= */

:root {

  /* ── Brand colours ────────────────────────────────────────────────────────── */
  --color-primary:          #1E5EFF;
  --color-primary-dark:     #1648cc;
  --color-primary-light:    #4a7fff;

  --color-cyan:             #40E0D0;
  --color-cyan-dark:        #32b8aa;
  --color-cyan-light:       #6ae8db;

  --gradient-brand:         linear-gradient(135deg, #4A90E2 0%, #40E0D0 100%);
  --gradient-hero:          linear-gradient(135deg, #090f1f 0%, #0c1a3d 45%, #091730 100%);
  --gradient-cta:           linear-gradient(135deg, #0a1426 0%, #0f2248 55%, #0a1c3a 100%);

  /* ── Neutrals ─────────────────────────────────────────────────────────────── */
  --color-bg:               #F5F7FA;
  --color-bg-white:         #FFFFFF;
  --color-bg-dark:          #090f1f;

  /* ── Text ─────────────────────────────────────────────────────────────────── */
  --color-text:             #1A202C;
  --color-text-secondary:   #4A5568;
  --color-text-muted:       #718096;

  /* ── State colours ────────────────────────────────────────────────────────── */
  --color-success:          #48BB78;
  --color-success-bg:       #F0FFF4;
  --color-success-border:   #9AE6B4;

  --color-warning:          #ECC94B;
  --color-warning-bg:       #FFFFF0;
  --color-warning-border:   #FAF089;

  --color-danger:           #F56565;
  --color-danger-bg:        #FFF5F5;
  --color-danger-border:    #FEB2B2;

  /* ── Borders ──────────────────────────────────────────────────────────────── */
  --color-border:           #E2E8F0;
  --color-border-dark:      #CBD5E0;

  /* ── Typography ───────────────────────────────────────────────────────────── */
  --font:                   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --fw-regular:             400;
  --fw-medium:              500;
  --fw-semibold:            600;
  --fw-bold:                700;
  --fw-extrabold:           800;

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

  --lh-tight:   1.2;
  --lh-snug:    1.375;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  /* ── Spacing (4 px base grid) ─────────────────────────────────────────────── */
  --sp-1:   0.25rem;
  --sp-2:   0.5rem;
  --sp-3:   0.75rem;
  --sp-4:   1rem;
  --sp-5:   1.25rem;
  --sp-6:   1.5rem;
  --sp-8:   2rem;
  --sp-10:  2.5rem;
  --sp-12:  3rem;
  --sp-16:  4rem;
  --sp-20:  5rem;
  --sp-24:  6rem;

  /* ── Border radius ────────────────────────────────────────────────────────── */
  --r-sm:   0.25rem;
  --r-md:   0.5rem;
  --r-lg:   0.75rem;
  --r-xl:   1rem;
  --r-2xl:  1.5rem;
  --r-full: 9999px;

  /* ── Shadows ──────────────────────────────────────────────────────────────── */
  --sh-xs:           0 1px 2px rgba(0,0,0,0.04);
  --sh-sm:           0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --sh-md:           0 4px 8px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.04);
  --sh-lg:           0 10px 24px rgba(0,0,0,0.09), 0 4px 8px rgba(0,0,0,0.05);
  --sh-xl:           0 20px 40px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.05);
  --sh-primary:      0 4px 16px rgba(30,94,255,0.28);
  --sh-primary-lg:   0 8px 28px rgba(30,94,255,0.38);

  /* ── Transitions ──────────────────────────────────────────────────────────── */
  --t-fast:  150ms ease;
  --t-base:  250ms ease;
  --t-slow:  350ms ease;

  /* ── Layout ───────────────────────────────────────────────────────────────── */
  --nav-h:       72px;
  --container:   1200px;
}