/* ============================================================
   VARIABLES.CSS — Design Tokens & Custom Properties
   ============================================================ */

:root {

  /* ---- Background Colors ---- */
  --color-bg:            #07090f;
  --color-surface:       #0d1117;
  --color-card:          #111827;
  --color-card-hover:    #1b2438;

  /* ---- Border Colors ---- */
  --color-border:        rgba(255, 255, 255, 0.06);
  --color-border-light:  rgba(255, 255, 255, 0.10);
  --color-border-accent: rgba(59, 130, 246, 0.28);

  /* ---- Brand Colors ---- */
  --color-primary:       #3b82f6;
  --color-primary-dark:  #2563eb;
  --color-primary-light: #60a5fa;
  --color-secondary:     #22d3ee;
  --color-secondary-dark:#0ea5e9;

  /* ---- Text Colors ---- */
  --color-text-primary:  #f1f5f9;
  --color-text-secondary:#94a3b8;
  --color-text-muted:    #64748b;

  /* ---- Semantic Colors ---- */
  --color-success:       #10b981;
  --color-warning:       #f59e0b;
  --color-danger:        #ef4444;

  /* ---- Service Card Accent Palette ---- */
  --color-blue:          #3b82f6;
  --color-blue-bg:       rgba(59,  130, 246, 0.10);
  --color-blue-border:   rgba(59,  130, 246, 0.22);

  --color-cyan:          #22d3ee;
  --color-cyan-bg:       rgba(34,  211, 238, 0.10);
  --color-cyan-border:   rgba(34,  211, 238, 0.22);

  --color-violet:        #a78bfa;
  --color-violet-bg:     rgba(167, 139, 250, 0.10);
  --color-violet-border: rgba(167, 139, 250, 0.22);

  --color-emerald:       #34d399;
  --color-emerald-bg:    rgba(52,  211, 153, 0.10);
  --color-emerald-border:rgba(52,  211, 153, 0.22);

  --color-orange:        #fb923c;
  --color-orange-bg:     rgba(251, 146,  60, 0.10);
  --color-orange-border: rgba(251, 146,  60, 0.22);

  --color-amber:         #fbbf24;
  --color-amber-bg:      rgba(251, 191,  36, 0.10);
  --color-amber-border:  rgba(251, 191,  36, 0.22);

  /* ---- Gradients ---- */
  --gradient-primary:         linear-gradient(135deg, #3b82f6 0%, #22d3ee 100%);
  --gradient-primary-reverse: linear-gradient(135deg, #22d3ee 0%, #3b82f6 100%);
  --gradient-subtle:          linear-gradient(135deg, rgba(59,130,246,0.15) 0%, rgba(34,211,238,0.15) 100%);
  --gradient-dark:            linear-gradient(180deg, var(--color-bg) 0%, var(--color-surface) 100%);
  --gradient-hero:            radial-gradient(ellipse 100% 60% at 50% -10%, rgba(59,130,246,0.14) 0%, transparent 100%);

  /* ---- Shadows ---- */
  --shadow-xs:   0 1px 2px  rgba(0, 0, 0, 0.40);
  --shadow-sm:   0 2px 4px  rgba(0, 0, 0, 0.50);
  --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.55);
  --shadow-lg:   0 10px 28px rgba(0, 0, 0, 0.65);
  --shadow-xl:   0 20px 48px rgba(0, 0, 0, 0.75);
  --shadow-card: 0 1px 3px rgba(0,0,0,0.4), 0 0 0 1px var(--color-border);
  --shadow-glow: 0 0 40px rgba(59, 130, 246, 0.18);
  --shadow-glow-sm: 0 0 20px rgba(59, 130, 246, 0.12);
  --shadow-btn:  0 4px 18px rgba(59, 130, 246, 0.35);
  --shadow-btn-hover: 0 8px 28px rgba(59, 130, 246, 0.50);

  /* ---- Spacing Scale (4px base) ---- */
  --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-7:   1.75rem;   /* 28px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-14:  3.5rem;    /* 56px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px */

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

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

  /* ---- Line Heights ---- */
  --leading-none:    1;
  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;
  --leading-loose:   1.8;

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

  /* ---- Transitions ---- */
  --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:       cubic-bezier(0, 0, 0.2, 1);
  --ease-in:        cubic-bezier(0.4, 0, 1, 1);
  --ease-spring:    cubic-bezier(0.175, 0.885, 0.32, 1.275);

  --transition-fast:   150ms var(--ease-in-out);
  --transition-base:   250ms var(--ease-in-out);
  --transition-slow:   400ms var(--ease-in-out);
  --transition-slower: 600ms var(--ease-in-out);

  /* ---- Layout ---- */
  --container-max:   1200px;
  --container-pad:   clamp(1rem, 5vw, 2rem);
  --nav-height:      72px;
  --section-pad-y:   clamp(4.5rem, 10vw, 7rem);

  /* ---- Z-Index Layers ---- */
  --z-base:     1;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
}