/* ============================================================
   JITS Innovation Labs — Color tokens
   Palette lifted verbatim from the Tailwind classes used across
   the marketing site (slate / blue / cyan / emerald / amber).
   ============================================================ */
:root {
  /* --- Neutral: slate ramp (the backbone of the brand) --- */
  --slate-950: #020617; /* footer */
  --slate-900: #0f172a; /* hero / dark sections / primary text */
  --slate-800: #1e293b;
  --slate-700: #334155;
  --slate-600: #475569; /* body text */
  --slate-500: #64748b; /* muted text */
  --slate-400: #94a3b8; /* text on dark */
  --slate-300: #cbd5e1;
  --slate-200: #e2e8f0; /* borders */
  --slate-100: #f1f5f9; /* hairline borders / dividers */
  --slate-50:  #f8fafc; /* alt section surface */
  --white:     #ffffff;

  /* --- Blue: primary brand / links / accents --- */
  --blue-700: #1d4ed8;
  --blue-600: #2563eb; /* primary brand */
  --blue-500: #3b82f6;
  --blue-400: #60a5fa; /* brand accent on dark */
  --blue-100: #dbeafe;
  --blue-50:  #eff6ff;

  /* --- Cyan: gradient partner / secondary accent --- */
  --cyan-700: #0e7490;
  --cyan-600: #0891b2;
  --cyan-500: #06b6d4; /* logo / gradient endpoint */
  --cyan-300: #67e8f9;
  --cyan-50:  #ecfeff;

  /* --- Emerald: primary CTA / success / positive metrics --- */
  --emerald-600: #059669;
  --emerald-500: #10b981; /* "Contact Sales" CTA */
  --emerald-400: #34d399;
  --emerald-50:  #ecfdf5;

  /* --- Amber: tertiary highlight (speed / energy) --- */
  --amber-500: #f59e0b;
  --amber-400: #fbbf24;

  /* --- Indigo: occasional 4th solution accent --- */
  --indigo-500: #6366f1;

  /* ==========================================================
     Semantic aliases — reference these in components
     ========================================================== */
  /* Text */
  --text-strong:  var(--slate-900); /* headings */
  --text-body:    var(--slate-600); /* paragraphs */
  --text-muted:   var(--slate-500); /* captions, labels */
  --text-on-dark: var(--slate-300);
  --text-on-dark-muted: var(--slate-400);
  --text-inverse: var(--white);
  --text-link:    var(--blue-600);
  --text-link-hover: var(--blue-700);

  /* Surfaces */
  --surface-page:     var(--white);
  --surface-alt:      var(--slate-50);  /* alternating section bg */
  --surface-card:     var(--white);
  --surface-dark:     var(--slate-900); /* hero / feature-on-dark */
  --surface-darker:   var(--slate-950); /* footer */
  --surface-card-dark: rgba(30, 41, 59, 0.5); /* slate-800/50 glass card on dark */
  --surface-icon:     var(--slate-50);  /* icon tile background */

  /* Borders */
  --border-default: var(--slate-200);
  --border-subtle:  var(--slate-100);
  --border-dark:    var(--slate-800);
  --border-glass:   rgba(255, 255, 255, 0.1);

  /* Brand / interactive */
  --brand-primary:      var(--blue-600);
  --brand-primary-hover: var(--blue-700);
  --brand-accent:       var(--cyan-500);
  --action-primary:     var(--emerald-500); /* main CTA fill */
  --action-primary-hover: var(--emerald-600);
  --focus-ring:         var(--blue-500);

  /* Status */
  --success: var(--emerald-500);
  --info:    var(--blue-600);
  --warning: var(--amber-500);

  /* Signature gradients */
  --gradient-brand: linear-gradient(90deg, var(--blue-600), var(--cyan-500));       /* text & CTA banner */
  --gradient-brand-tr: linear-gradient(to top right, var(--blue-500), var(--cyan-500));
  --gradient-heading: linear-gradient(90deg, var(--blue-400), var(--cyan-300));     /* hero headline on dark */
  --gradient-cta-banner: linear-gradient(90deg, var(--blue-700), var(--cyan-600));
}