/*
 * ZEVIVO FINANCIAL-GRADE DESIGN SYSTEM
 * ============================================================
 * Core Design Tokens
 * 
 * This file establishes the single source of truth for all
 * typography, spacing, color, and structural tokens.
 * All other CSS files MUST reference these tokens instead of
 * using hardcoded magic numbers.
 * ============================================================
 */

:root {
  /* ============================================================
     1. COLOR SYSTEM
     ============================================================ */
  /* Primary Brand Colors */
  --color-primary:        #FF4521;  /* Zevivo Orange */
  --color-primary-hover:  #e03a1a;
  --color-primary-light:  rgba(255, 69, 33, 0.1);
  
  /* Secondary / Accent Colors */
  --color-secondary:      #28c840;  /* Green accent */
  --color-gold:           #c9a84c;
  
  /* Neutral / Dark Palette */
  --color-dark-base:      #1a2830;
  --color-dark-deep:      #222c30;
  --color-dark-surface:   #2c393e;
  
  /* Text Hierarchy */
  --color-text-primary:   #2e3642;
  --color-text-secondary: #4c575c;
  --color-text-tertiary:  #7c898d;
  --color-text-inverse:   #ffffff;
  
  /* Backgrounds & Surfaces */
  --color-bg-base:        #ffffff;
  --color-bg-alt:         #f7f9fa;
  --color-bg-dark:        var(--color-dark-base);
  
  /* Borders & Dividers */
  --color-border-light:   #eef1f2;
  --color-border-base:    #ced4d7;
  --color-border-dark:    rgba(58, 84, 95, 0.5);

  /* ============================================================
     2. TYPOGRAPHY SYSTEM (Fluid clamp scaling)
     ============================================================ */
  --font-primary:   'Catamaran', sans-serif;
  --font-secondary: 'Work Sans', sans-serif;

  /* Hero Titles (H1/H2 level) */
  --hero-title-xl:  clamp(2.5rem, 5.5vw, 4.5rem);    /* 40px → 72px (Homepage Main) */
  --hero-title-lg:  clamp(2.2rem, 4.5vw, 3.75rem);   /* 35px → 60px (Campaign/Trading) */
  --hero-title-md:  clamp(1.8rem, 3.5vw, 3rem);      /* 28px → 48px (Inner Product) */
  --hero-title-sm:  clamp(1.5rem, 3vw, 2.5rem);      /* 24px → 40px (Utility/Legal) */

  /* Body Text */
  --body-lg:        clamp(1.1rem, 1.5vw, 1.25rem);   /* 17.6px → 20px (Lead paragraphs) */
  --body-md:        clamp(1rem, 1.2vw, 1.1rem);      /* 16px → 17.6px (Standard body) */
  --body-sm:        clamp(0.85rem, 1vw, 0.95rem);    /* 13.6px → 15.2px (Small text/captions) */

  /* UI & CTA Text */
  --cta-text-lg:    clamp(0.95rem, 1.2vw, 1.05rem);  /* 15.2px → 16.8px */
  --cta-text-md:    clamp(0.85rem, 1vw, 0.95rem);    /* 13.6px → 15.2px */
  --cta-text-sm:    0.75rem;                         /* 12px */

  /* ============================================================
     3. SPACING & RHYTHM SYSTEM
     ============================================================ */
  /* Micro Spacing (Components) */
  --space-xxs:      4px;
  --space-xs:       8px;
  --space-sm:       16px;
  
  /* Macro Spacing (Layout) */
  --space-md:       24px;
  --space-lg:       32px;
  --space-xl:       48px;
  --space-xxl:      clamp(60px, 8vw, 100px);         /* Fluid section spacing */

  /* ============================================================
     4. RADIUS & SHADOW SYSTEM
     ============================================================ */
  /* Border Radius */
  --radius-sm:      4px;
  --radius-md:      8px;
  --radius-lg:      16px;
  --radius-pill:    9999px;                          /* For CTAs */

  /* Shadows */
  --shadow-sm:      0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-md:      0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg:      0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-hover:   0 12px 32px rgba(255, 69, 33, 0.15); /* Primary brand shadow */
}