/* =====================================================
   Prolancit — Colors & Type
   Mirrors client/src/index.css tokens.
   Exposes BOTH raw HSL tokens (per original) AND friendly
   aliases so designs can style quickly.
   ===================================================== */

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

:root {
  /* ---------- Raw tokens (HSL triplets, per original) ---------- */
  --background: 0 0% 100%;
  --foreground: 225 10% 10%;
  --border: 225 10% 90%;
  --card: 0 0% 100%;
  --card-foreground: 225 10% 10%;
  --card-border: 225 10% 92%;
  --popover: 0 0% 100%;
  --popover-foreground: 225 10% 10%;
  --primary: 217 92% 55%;
  --primary-foreground: 0 0% 100%;
  --secondary: 186 100% 50%;
  --secondary-foreground: 0 0% 100%;
  --muted: 225 10% 80%;
  --muted-foreground: 225 10% 40%;
  --accent: 45 96% 56%;
  --accent-foreground: 0 0% 0%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;
  --input: 225 10% 95%;
  --ring: 217 92% 55%;
  --chart-1: 217 92% 55%;
  --chart-2: 186 100% 50%;
  --chart-3: 160 84% 39%;
  --chart-4: 45 96% 56%;
  --chart-5: 217 92% 55%;

  /* ---------- Friendly hex aliases ---------- */
  --color-primary: #1F7AEC;        /* Brand blue */
  --color-primary-hover: #1a68c9;
  --color-primary-deep: #1e3a8a;   /* blue-900, used in testimonial nav */
  --color-secondary: #00DFFF;      /* Cyan accent */
  --color-accent: #F6C324;         /* Gold/yellow CTA accent */
  --color-accent-hover: #fcd34d;
  --color-success: #10B981;
  --color-destructive: #EF4444;

  --color-fg: #17181C;             /* Primary text */
  --color-fg-2: #5B5E66;           /* Muted/caption */
  --color-fg-inverse: #ffffff;
  --color-border-default: #E3E4E7;
  --color-card-border: #E8E9EC;
  --color-bg: #ffffff;
  --color-bg-muted: #F1F2F4;       /* Input bg */
  --color-bg-subtle: #F9FAFB;      /* gray-50, soft section bg */

  /* Dark hero palette — observed in hero + footer banner */
  --color-hero-a: #0f172a;         /* slate-900 */
  --color-hero-b: #064e3b;         /* green-900 (hero) */
  --color-hero-c: #1e3a8a;         /* blue-900 (cta banner) */
  --color-hero-grad: linear-gradient(135deg, #0f172a 0%, #064e3b 50%, #0f172a 100%);
  --color-cta-grad: linear-gradient(90deg, #0f172a 0%, #1e3a8a 50%, #0f172a 100%);
  --color-page-grad: linear-gradient(135deg, #f8f9fa 0%, #f0f4f8 50%, #e8f0f7 100%);

  /* Tagline green — used consistently on service section taglines */
  --color-tagline: #166534;        /* green-800 */

  /* ---------- Typography ---------- */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-serif: Georgia, serif;
  --font-mono: Menlo, monospace;

  --tracking-tight: -0.02em;
  --tracking-normal: 0em;
  --tracking-wide: 0.05em;
  --tracking-wider: 0.1em;

  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  /* Type scale (matches Tailwind defaults used in home.tsx) */
  --fs-xs: 0.75rem;     /* 12 */
  --fs-sm: 0.875rem;    /* 14 */
  --fs-base: 1rem;      /* 16 */
  --fs-lg: 1.125rem;    /* 18 */
  --fs-xl: 1.25rem;     /* 20 */
  --fs-2xl: 1.5rem;     /* 24 */
  --fs-3xl: 1.875rem;   /* 30 */
  --fs-4xl: 2.25rem;    /* 36 — section H2 */
  --fs-5xl: 3rem;       /* 48 */
  --fs-6xl: 3.75rem;    /* 60 — hero */

  /* ---------- Spacing, Radius ---------- */
  --spacing: 0.25rem;       /* 4px base */
  --radius: 0.5rem;         /* 8px */
  --radius-sm: calc(var(--radius) - 4px); /* 4 */
  --radius-md: calc(var(--radius) - 2px); /* 6 */
  --radius-lg: var(--radius);             /* 8 */
  --radius-xl: calc(var(--radius) + 4px); /* 12 */
  --radius-full: 9999px;

  /* ---------- Shadows (deliberately subtle) ---------- */
  --shadow-2xs: 0px 2px 0px 0px rgb(0 0 0 / 0.01);
  --shadow-xs:  0px 2px 0px 0px rgb(0 0 0 / 0.02);
  --shadow-sm:  0px 2px 0px 0px rgb(0 0 0 / 0.01), 0px 1px 2px -1px rgb(0 0 0 / 0.02);
  --shadow:     0px 2px 0px 0px rgb(0 0 0 / 0.01), 0px 1px 2px -1px rgb(0 0 0 / 0.02);
  --shadow-md:  0px 2px 0px 0px rgb(0 0 0 / 0.01), 0px 2px 4px -1px rgb(0 0 0 / 0.02);
  --shadow-lg:  0px 2px 0px 0px rgb(0 0 0 / 0.01), 0px 4px 6px -1px rgb(0 0 0 / 0.02);
  --shadow-xl:  0px 2px 0px 0px rgb(0 0 0 / 0.01), 0px 8px 10px -1px rgb(0 0 0 / 0.02);
  --shadow-2xl: 0px 2px 0px 0px rgb(0 0 0 / 0.01);

  /* Elevate utilities (hover/active tints) */
  --elevate-1: rgba(0,0,0, .03);
  --elevate-2: rgba(0,0,0, .08);
  --button-outline: rgba(0,0,0,.10);
  --badge-outline: rgba(0,0,0,.05);
}

/* =====================================================
   Semantic typography — ready to use directly
   ===================================================== */
html { font-family: var(--font-sans); color: var(--color-fg); }
body { font-family: var(--font-sans); color: var(--color-fg); background: var(--color-bg); }

.h-hero, h1.display {
  font-size: clamp(2rem, 5vw, var(--fs-6xl));
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
.h-section, h2 {
  font-size: var(--fs-4xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  color: var(--color-fg);
}
.h-subsection, h3 {
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: var(--leading-snug);
}
.h-card {
  font-size: var(--fs-lg);
  font-weight: 700;
}
.tagline {
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--color-tagline);
}
.eyebrow {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-fg-2);
}
p, .body {
  font-size: var(--fs-base);
  line-height: var(--leading-relaxed);
  color: var(--color-fg-2);
}
.caption, small {
  font-size: var(--fs-sm);
  color: var(--color-fg-2);
}
code, pre {
  font-family: var(--font-mono);
}

/* Gradient accent text used in hero ("eLearning Solutions") */
.grad-accent {
  background: linear-gradient(90deg, #fbbf24, #fde68a);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
/* Blue→cyan numeric gradient (4C Advantage numerals) */
.grad-numeric {
  background: linear-gradient(90deg, #2563eb, #06b6d4);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}