/**
 * tokens.css — MJC Fintech Design Token System ("Financial Waves")
 *
 * ⚠️  THIS IS THE SINGLE SOURCE OF TRUTH FOR ALL DESIGN VALUES.
 *     Never hardcode colours, fonts, or spacing anywhere else.
 *     All values verified against Figma file:
 *     https://www.figma.com/design/TNTRqvjruq3HQupqPeiRgy/MJC-Design-Project?node-id=59-134
 *
 * Table of Contents:
 *   1. Typography (Font Families, Scale)
 *   2. Colour Palette
 *   3. Gradients
 *   4. Spacing Scale
 *   5. Layout
 *   6. Border Radius
 *   7. Shadows
 *   8. Transitions
 *   9. Z-index
 */

:root {

  /* =====================================================
     1. TYPOGRAPHY
     ===================================================== */

  /* Font families — loaded via Google Fonts in functions.php */
  --font-heading : 'Space Grotesk', sans-serif;
  --font-body    : 'DM Sans',       sans-serif;
  --font-mono    : 'JetBrains Mono', monospace;

  /* Type scale */
  --text-h1      : 4.5rem;    /* 72px — Hero headings                        */
  --text-h2      : 3rem;      /* 48px — Section headings                     */
  --text-h3      : 1.5rem;    /* 24px — Card / feature headings              */
  --text-h4      : 1.125rem;  /* 18px — Sub-labels                           */
  --text-body-lg : 1.125rem;  /* 18px — Lead paragraphs                      */
  --text-body    : 1rem;      /* 16px — Standard body                        */
  --text-sm      : 0.875rem;  /* 14px — Captions, meta, tags                 */
  --text-xs      : 0.75rem;   /* 12px — Labels, breadcrumbs                  */

  /* Line heights */
  --lh-heading   : 1.1;
  --lh-subheading: 1.15;
  --lh-h3        : 1.3;
  --lh-body      : 1.7;
  --lh-body-lg   : 1.6;
  --lh-sm        : 1.6;
  --lh-xs        : 1.5;

  /* Font weights */
  --fw-regular   : 400;
  --fw-medium    : 500;
  --fw-bold      : 700;


  /* =====================================================
     2. COLOUR PALETTE
     ===================================================== */

  /* Dark/Navy — primary backgrounds (from Figma) */
  --color-navy        : #0A2540;   /* Deep navy — hero & footer bg            */
  --color-navy-mid    : #0F2942;   /* Mid-navy — secondary dark sections      */
  --color-navy-light  : #1E5F8C;   /* Lighter navy — gradient endpoint        */

  /* Accent — Teal (from Figma) */
  --color-teal        : #2BBFCE;   /* Primary CTA / accent (brighter)         */
  --color-teal-light  : #4ECDCC;   /* Hover state for teal                    */

  /* Accent — Cyan */
  --color-cyan        : #22D3EE;   /* Highlight, gradient tip, large numbers  */
  --color-cyan-light  : #67E8F9;   /* Soft icon fills / subtle tints          */

  /* Text on dark backgrounds (from Figma) */
  --color-white       : #FFFFFF;   /* Primary text                            */
  --color-white-muted : #E8F4F8;   /* Secondary text / card text on dark      */
  --color-white-faint : #D1D5DC;   /* Body text on dark backgrounds           */

  /* Light surface backgrounds */
  --color-surface     : #E8F4F8;   /* Light page bg (from Figma)              */
  --color-surface-card: #FFFFFF;   /* Card bg (light sections)                */
  --color-text-light  : #4A5565;   /* Body text on light backgrounds          */
  --color-text-heading-light: #0A2540; /* Heading text on light backgrounds   */

  /* Borders */
  --color-border      : #E2E8F0;   /* Dividers / borders on light bg          */
  --color-border-dark : #1E3A5F;   /* Borders on dark bg                      */

  /* Tag / pill component */
  --color-tag-bg      : #1E3A5F;   /* Tag background                          */
  --color-tag-text    : #22D3EE;   /* Tag text (= --color-cyan)               */

  /* Utility / Brand */
  --color-whatsapp    : #25D366;   /* WhatsApp CTA button                     */
  --color-whatsapp-hover: #1ebe5a;


  /* =====================================================
     3. GRADIENTS
     ===================================================== */

  /* Hero / dark section background gradient (from Figma) */
  --gradient-hero: linear-gradient(
    161deg,
    #0A2540 7.5%,
    #1E5F8C 92.5%
  );

  /* Cyan text gradient for headings (from Figma) */
  --gradient-cyan-text: linear-gradient(
    178deg,
    #2BBFCE 0%,
    #4ECDCC 100%
  );

  /* Teal stats gradient band (from Figma) */
  --gradient-stats: linear-gradient(
    90deg,
    #2BBFCE 0%,
    #1E5F8C 50%,
    #0A2540 100%
  );

  /* Teal → Cyan — used for feature icons, hover overlays */
  --gradient-accent: linear-gradient(
    135deg,
    var(--color-teal)  0%,
    var(--color-teal-light) 100%
  );

  /* Subtle card hover glow */
  --gradient-card-glow: linear-gradient(
    135deg,
    rgba(43, 191, 206, 0.08) 0%,
    rgba(78, 205, 204, 0.04) 100%
  );


  /* =====================================================
     4. SPACING SCALE (8px base grid)
     ===================================================== */

  --space-1  : 0.25rem;   /*  4px */
  --space-2  : 0.5rem;    /*  8px */
  --space-3  : 0.75rem;   /* 12px */
  --space-4  : 1rem;      /* 16px */
  --space-5  : 1.5rem;    /* 24px */
  --space-6  : 2rem;      /* 32px */
  --space-7  : 3rem;      /* 48px */
  --space-8  : 4rem;      /* 64px */
  --space-9  : 6rem;      /* 96px */
  --space-10 : 8rem;      /* 128px */


  /* =====================================================
     5. LAYOUT
     ===================================================== */

  --container-max     : 1190px;
  --container-padding : 4rem;        /* 64px desktop */
  --section-padding-y : 6rem;        /* 96px desktop */


  /* =====================================================
     6. BORDER RADIUS
     ===================================================== */

  --radius-sm   : 6px;
  --radius-md   : 12px;
  --radius-lg   : 24px;
  --radius-pill : 999px;


  /* =====================================================
     7. SHADOWS
     ===================================================== */

  --shadow-sm  : 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-md  : 0 4px 16px rgba(0, 0, 0, 0.15);
  --shadow-lg  : 0 8px 32px rgba(0, 0, 0, 0.2);
  --shadow-card: 0 2px 12px rgba(10, 22, 40, 0.08);

  /* Teal glow for CTAs */
  --shadow-teal: 0 0 20px rgba(13, 148, 136, 0.35);


  /* =====================================================
     8. TRANSITIONS
     ===================================================== */

  --transition-fast   : 150ms ease;
  --transition-base   : 250ms ease;
  --transition-slow   : 400ms ease;
  --transition-spring : 300ms cubic-bezier(0.34, 1.56, 0.64, 1);


  /* =====================================================
     9. Z-INDEX SCALE
     ===================================================== */

  --z-below    : -1;
  --z-base     : 0;
  --z-raised   : 10;
  --z-dropdown : 100;
  --z-sticky   : 200;
  --z-overlay  : 300;
  --z-modal    : 400;
  --z-toast    : 500;

}


/* =====================================================
   RESPONSIVE OVERRIDES
   ===================================================== */

@media (max-width: 1024px) {
  :root {
    --text-h1            : 3.5rem;   /* Scale down for tablets */
    --text-h2            : 2.25rem;
    --container-padding  : 2rem;     /* 32px */
    --section-padding-y  : 4rem;     /* 64px */
  }
}

@media (max-width: 768px) {
  :root {
    --text-h1            : 2.5rem;   /* Scale down for mobile */
    --text-h2            : 1.875rem;
    --text-h3            : 1.25rem;
    --container-padding  : 1.5rem;   /* 24px */
    --section-padding-y  : 3rem;     /* 48px */
  }
}