@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
    /* Brand Colors (Extracted from logo.png) */
    --brand-cyan: #00c6fb;
    --brand-blue: #005bea;
    --brand-gradient: linear-gradient(135deg, var(--brand-cyan) 0%, var(--brand-blue) 100%);
    
    /* UI Theme Colors */
    --primary-color: var(--brand-blue);
    --accent-color: var(--brand-cyan);
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-dark: #0f172a;
    
    --text-primary: #0f172a;      /* Deep Slate/Charcoal */
    --text-secondary: #475569;    /* Medium Muted Gray */
    --text-muted: #64748b;        /* Light Muted Gray */
    --text-light: #ffffff;
    
    --border-color: #e2e8f0;
    
    /* Font Families */
    --font-heading: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
    --font-body: 'Inter', system-ui, sans-serif;

    /* Fluid Typographic Scale (Responsive using clamp) */
    --text-h1: clamp(2.25rem, 5vw + 1rem, 3.75rem);       /* Mobile ~36px, Desktop ~60px */
    --text-h2: clamp(1.85rem, 4vw + 0.8rem, 2.75rem);     /* Mobile ~30px, Desktop ~44px */
    --text-h3: clamp(1.5rem, 3vw + 0.6rem, 2.25rem);      /* Mobile ~24px, Desktop ~36px */
    --text-h4: clamp(1.25rem, 2vw + 0.5rem, 1.75rem);     /* Mobile ~20px, Desktop ~28px */
    --text-h5: clamp(1.1rem, 1.5vw + 0.4rem, 1.35rem);    /* Mobile ~17.6px, Desktop ~21.6px */
    --text-h6: clamp(1rem, 1vw + 0.3rem, 1.15rem);        /* Mobile ~16px, Desktop ~18.4px */
    --text-body: clamp(0.95rem, 0.5vw + 0.8rem, 1.05rem); /* Mobile ~15.2px, Desktop ~16.8px */
    --text-small: clamp(0.8rem, 0.3vw + 0.7rem, 0.9rem);  /* Mobile ~12.8px, Desktop ~14.4px */
    
    /* Layout Constants */
    --line-height-heading: 1.2;
    --line-height-body: 1.6;
    --border-radius-sm: 8px;
    --border-radius-md: 12px;
    --border-radius-lg: 20px;
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}