/* ==========================================================================
   Gateway Design System — Colors & Type
   Source: Gateway codebase (Next.js 15 / Tailwind v4)
   - Primary brand color: Gateway Orange (from logo + CTAs, #ff7a00 / #ea580c family)
   - Secondary: Cyan (#0891b2) used for tech/intelligence/accents
   - Neutral: Slate/Gray scale (Tailwind). Gateway is LIGHT-MODE ONLY on
     marketing surfaces; admin dashboards use a dark slate theme.
   ========================================================================== */

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

:root {
  /* ---- Brand: Orange (Gateway primary) ---- */
  --gw-orange-50:  #fff7ed;
  --gw-orange-100: #ffedd5;
  --gw-orange-200: #fed7aa;
  --gw-orange-300: #fdba74;
  --gw-orange-400: #fb923c;
  --gw-orange-500: #ff7a00;   /* primary logo/CTA orange */
  --gw-orange-600: #ea580c;   /* hover / signup accents */
  --gw-orange-700: #E85F00;   /* shadow / dark orange */
  --gw-orange-800: #9a3412;
  --gw-amber-500:  #f59e0b;
  --gw-amber-400:  #FCBB3B;

  /* ---- Brand: Cyan (intelligence / tech) ---- */
  --gw-cyan-50:  #ecfeff;
  --gw-cyan-100: #cffafe;
  --gw-cyan-300: #67e8f9;
  --gw-cyan-400: #22d3ee;
  --gw-cyan-500: #06b6d4;
  --gw-cyan-600: #0891b2;     /* canonical brand cyan */
  --gw-cyan-700: #0e7490;
  --gw-sky-blue: #2FB8FF;     /* illustration blue */

  /* ---- Neutral: Slate/Gray (Tailwind Slate) ---- */
  --gw-white:     #ffffff;
  --gw-gray-50:   #f9fafb;
  --gw-gray-100:  #f3f4f6;
  --gw-gray-200:  #e5e7eb;
  --gw-gray-300:  #d1d5db;
  --gw-gray-400:  #9ca3af;
  --gw-gray-500:  #6b7280;
  --gw-gray-600:  #4b5563;
  --gw-gray-700:  #374151;
  --gw-gray-800:  #1f2937;
  --gw-gray-900:  #111827;

  --gw-slate-50:  #f8fafc;
  --gw-slate-400: #94a3b8;
  --gw-slate-700: #334155;
  --gw-slate-800: #1e293b;
  --gw-slate-900: #0f172a;   /* dark admin bg */
  --gw-slate-950: #020617;

  /* ---- Semantic ---- */
  --gw-bg:            var(--gw-white);
  --gw-bg-muted:      var(--gw-gray-50);
  --gw-bg-subtle:     var(--gw-gray-100);
  --gw-surface:       var(--gw-white);
  --gw-surface-alt:   var(--gw-gray-50);
  --gw-border:        var(--gw-gray-200);
  --gw-border-strong: var(--gw-gray-300);

  --gw-fg:            var(--gw-gray-900);     /* text-gray-900 */
  --gw-fg-2:          var(--gw-gray-600);     /* body text */
  --gw-fg-3:          var(--gw-gray-500);     /* caption/meta */
  --gw-fg-inverse:    var(--gw-white);

  --gw-primary:         var(--gw-orange-500);
  --gw-primary-hover:   var(--gw-orange-600);
  --gw-primary-contrast:#ffffff;
  --gw-accent:          var(--gw-cyan-600);
  --gw-accent-hover:    var(--gw-cyan-700);

  --gw-success: #059669;  /* emerald-600 */
  --gw-warning: #f59e0b;
  --gw-danger:  #dc2626;
  --gw-info:    var(--gw-cyan-600);

  /* Dark (admin) */
  --gw-dark-bg:       var(--gw-slate-950);
  --gw-dark-surface:  rgba(15,23,42,0.5);   /* slate-900/50 */
  --gw-dark-border:   rgba(51,65,85,0.5);   /* slate-700/50 */
  --gw-dark-fg:       #ffffff;
  --gw-dark-fg-2:     var(--gw-slate-400);

  /* ---- Radius ---- */
  --gw-radius-xs: 4px;
  --gw-radius-sm: 6px;
  --gw-radius-md: 8px;
  --gw-radius-lg: 12px;
  --gw-radius-xl: 16px;
  --gw-radius-2xl: 20px;
  --gw-radius-full: 9999px;

  /* ---- Spacing scale (Tailwind-ish) ---- */
  --gw-space-1: 4px;
  --gw-space-2: 8px;
  --gw-space-3: 12px;
  --gw-space-4: 16px;
  --gw-space-5: 20px;
  --gw-space-6: 24px;
  --gw-space-8: 32px;
  --gw-space-10: 40px;
  --gw-space-12: 48px;
  --gw-space-16: 64px;
  --gw-space-20: 80px;
  --gw-space-24: 96px;

  /* ---- Shadows ---- */
  --gw-shadow-xs: 0 1px 2px rgba(17,24,39,0.04);
  --gw-shadow-sm: 0 1px 2px rgba(17,24,39,0.06), 0 1px 1px rgba(17,24,39,0.04);
  --gw-shadow-md: 0 4px 10px -2px rgba(17,24,39,0.08), 0 2px 4px -2px rgba(17,24,39,0.04);
  --gw-shadow-lg: 0 10px 25px -5px rgba(17,24,39,0.10), 0 8px 10px -6px rgba(17,24,39,0.06);
  --gw-shadow-xl: 0 20px 40px -12px rgba(17,24,39,0.18);
  --gw-shadow-2xl:0 25px 60px -15px rgba(0,0,0,0.30);
  --gw-shadow-orange: 0 14px 30px -10px rgba(234,88,12,0.35);
  --gw-shadow-cyan:   0 14px 30px -10px rgba(8,145,178,0.25);

  /* ---- Motion ---- */
  --gw-ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --gw-ease-out:  cubic-bezier(0, 0, 0.2, 1);
  --gw-dur-fast:  150ms;
  --gw-dur:       300ms;
  --gw-dur-slow:  500ms;

  /* ---- Typography ---- */
  --gw-font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
                  "Segoe UI", Helvetica, Arial, sans-serif;
  --gw-font-mono: 'SF Mono', ui-monospace, Menlo, Consolas, monospace;

  /* Fluid-ish sizes (mobile → desktop) */
  --gw-text-xs:   12px;
  --gw-text-sm:   14px;
  --gw-text-base: 16px;
  --gw-text-lg:   18px;
  --gw-text-xl:   20px;
  --gw-text-2xl:  24px;
  --gw-text-3xl:  30px;
  --gw-text-4xl:  36px;
  --gw-text-5xl:  48px;
  --gw-text-6xl:  60px;

  --gw-leading-tight:  1.1;
  --gw-leading-snug:   1.25;
  --gw-leading-normal: 1.5;
  --gw-leading-loose:  1.7;

  --gw-tracking-tight:  -0.02em;
  --gw-tracking-normal: 0;
  --gw-tracking-wide:   0.04em;

  /* ---- Semantic type ---- */
  --gw-h1-size:   clamp(32px, 5vw, 60px);
  --gw-h1-weight: 700;
  --gw-h1-lh:     var(--gw-leading-tight);
  --gw-h1-ls:     var(--gw-tracking-tight);

  --gw-h2-size:   clamp(26px, 3.5vw, 42px);
  --gw-h2-weight: 700;
  --gw-h2-lh:     1.15;
  --gw-h2-ls:     var(--gw-tracking-tight);

  --gw-h3-size:   clamp(20px, 2.2vw, 24px);
  --gw-h3-weight: 600;
  --gw-h3-lh:     1.3;

  --gw-p-size:    16px;
  --gw-p-weight:  400;
  --gw-p-lh:      var(--gw-leading-loose);

  --gw-small-size: 14px;
  --gw-caption-size: 12px;
  --gw-caption-tracking: 0.08em;
}

/* ---- Element defaults ---- */
html { font-family: var(--gw-font-sans); color: var(--gw-fg); background: var(--gw-bg); }
body { font-family: var(--gw-font-sans); color: var(--gw-fg); }

h1, .gw-h1 {
  font-size: var(--gw-h1-size);
  font-weight: var(--gw-h1-weight);
  line-height: var(--gw-h1-lh);
  letter-spacing: var(--gw-h1-ls);
  color: var(--gw-fg);
}
h2, .gw-h2 {
  font-size: var(--gw-h2-size);
  font-weight: var(--gw-h2-weight);
  line-height: var(--gw-h2-lh);
  letter-spacing: var(--gw-h2-ls);
  color: var(--gw-fg);
}
h3, .gw-h3 {
  font-size: var(--gw-h3-size);
  font-weight: var(--gw-h3-weight);
  line-height: var(--gw-h3-lh);
  color: var(--gw-fg);
}
p, .gw-p {
  font-size: var(--gw-p-size);
  line-height: var(--gw-p-lh);
  color: var(--gw-fg-2);
}
small, .gw-small { font-size: var(--gw-small-size); color: var(--gw-fg-3); }
.gw-caption {
  font-size: var(--gw-caption-size);
  letter-spacing: var(--gw-caption-tracking);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gw-fg-3);
}
code, .gw-code {
  font-family: var(--gw-font-mono);
  font-size: 0.92em;
  background: var(--gw-gray-100);
  padding: 2px 6px;
  border-radius: var(--gw-radius-sm);
  color: var(--gw-gray-800);
}

/* Hero gradient used on marketing */
.gw-text-gradient-hero {
  background: linear-gradient(90deg, var(--gw-orange-400), var(--gw-orange-500) 40%, var(--gw-cyan-500));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.gw-text-gradient-orange {
  background: linear-gradient(90deg, var(--gw-orange-600), var(--gw-amber-500));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}