/* ============================================
   iAgentMart — Design Tokens
   All visual constants live here.
   Change this file to re-theme the entire site.
   ============================================ */

:root {
  /* ---- Background ---- */
  --color-bg:             #FAFBFD;
  --color-surface:        #FFFFFF;
  --color-surface-raised: #F4F6FA;
  --color-surface-hover:  #EEF1F8;
  --color-border:         #E2E6EF;
  --color-border-light:   #EEF1F6;

  /* ---- Brand Accent ---- */
  --color-primary:        #4F6EF7;
  --color-primary-hover:  #3B5AE0;
  --color-primary-light:  #EBF0FF;
  --color-primary-glow:   rgba(79, 110, 247, 0.15);
  --color-secondary:      #22D3A7;
  --color-secondary-hover:#1ABF96;
  --color-secondary-light:#E6FBF5;

  /* ---- Semantic ---- */
  --color-success:        #22C55E;
  --color-warning:        #F59E0B;
  --color-danger:         #EF4444;

  /* ---- Text ---- */
  --color-text:           #1A1D2B;
  --color-text-secondary: #6B7394;
  --color-text-muted:     #9CA3C4;
  --color-text-inverse:   #FFFFFF;

  /* ---- Code ---- */
  --color-code-bg:        #F0F2F8;
  --color-code-text:      #3B3F5C;
  --color-code-keyword:   #7C3AED;
  --color-code-string:    #059669;
  --color-code-comment:   #9CA3AF;
  --color-code-function:  #2563EB;
  --color-code-number:    #D97706;

  /* ---- Gradient ---- */
  --gradient-primary:     linear-gradient(135deg, #4F6EF7 0%, #22D3A7 100%);
  --gradient-hero:        linear-gradient(180deg, #FAFBFD 0%, #EBF0FF 50%, #FAFBFD 100%);
  --gradient-card:        linear-gradient(135deg, rgba(79,110,247,0.04) 0%, rgba(34,211,167,0.04) 100%);
  --gradient-mesh:        radial-gradient(ellipse at 20% 50%, rgba(79,110,247,0.06) 0%, transparent 50%),
                          radial-gradient(ellipse at 80% 20%, rgba(34,211,167,0.05) 0%, transparent 50%),
                          radial-gradient(ellipse at 60% 80%, rgba(124,58,237,0.04) 0%, transparent 50%);

  /* ---- Shadows ---- */
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.03);
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.06);
  --shadow-lg:  0 8px 30px rgba(0,0,0,0.08);
  --shadow-xl:  0 20px 60px rgba(0,0,0,0.10);
  --shadow-glow:0 0 40px rgba(79,110,247,0.12);
  --shadow-card-hover: 0 8px 30px rgba(79,110,247,0.10);

  /* ---- Typography ---- */
  --font-sans:  'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:  'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
  --font-display: 'Inter', system-ui, sans-serif;

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

  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;

  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extrabold:800;

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

  /* ---- Border Radius ---- */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ---- Transitions ---- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --duration-slow:   400ms;

  /* ---- Layout ---- */
  --max-width:       1200px;
  --max-width-narrow:800px;
  --max-width-wide:  1400px;
  --nav-height:      72px;
}