/* ============================================================
 * STAFFVIRTUAL Design System
 * Colors and Type — canonical CSS variables
 * ============================================================
 *
 * Source of truth: staffvirtual-landing/ codebase (live production)
 * Supplemented by: BRAND_ASSETS_REFERENCE.md + DESIGN_PRD.md
 *
 * Fonts (active in production):
 *   - Inter (Google Fonts)         — body, UI, default sans
 *   - Plus Jakarta Sans (Google)   — display/headlines (`font-jakarta`)
 *
 * Note: DESIGN_PRD.md references General Sans / Gambetta / Gentium,
 * but the actual layout.tsx loads Inter + Plus Jakarta Sans. Live
 * code wins.
 * ============================================================ */

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

:root {
  /* ——— Brand colors (primary palette) ——— */
  --sv-blue:          #1888FF;   /* Primary — CTAs, links, brand accents */
  --sv-blue-dark:     #1470D6;   /* Primary hover / pressed */
  --sv-blue-deep:     #004B8D;   /* Secondary — gradient endpoints, depth */

  /* ——— Neutrals ——— */
  --sv-ink:           #1E1E1E;   /* Foreground — body text, headings */
  --sv-ink-soft:      #231F20;   /* Alt ink (brand-ref warm black) */
  --sv-white:         #FFFFFF;   /* Pure surface */
  --sv-light:         #F9FAFB;   /* Page alt bg, soft surfaces */
  --sv-alabaster:     #F8F8EB;   /* Warm alt bg (from brand-ref) */

  --sv-gray-900:      #111827;
  --sv-gray-800:      #1F2937;
  --sv-gray-700:      #374151;
  --sv-gray-600:      #4B5563;   /* Muted text */
  --sv-gray-500:      #6B7280;
  --sv-gray-400:      #9CA3AF;
  --sv-gray-300:      #D1D5DB;   /* Borders */
  --sv-gray-200:      #E5E7EB;
  --sv-gray-100:      #F3F4F6;
  --sv-gray-50:       #F9FAFB;

  /* ——— Semantic (functional) ——— */
  --sv-success:       #16A34A;   /* Annual savings figures */
  --sv-success-soft:  #DCFCE7;
  --sv-warning:       #F59E0B;
  --sv-danger:        #DC2626;
  --sv-info:          var(--sv-blue);

  /* ——— Tints (for subtle backgrounds) ——— */
  --sv-blue-10:       rgba(24, 136, 255, 0.10);
  --sv-blue-05:       rgba(24, 136, 255, 0.05);
  --sv-blue-20:       rgba(24, 136, 255, 0.20);

  /* ——— Semantic roles (map to brand) ——— */
  --bg:               var(--sv-white);
  --bg-alt:           var(--sv-light);
  --bg-inverse:       var(--sv-ink);
  --fg:               var(--sv-ink);
  --fg-muted:         var(--sv-gray-600);
  --fg-subtle:        var(--sv-gray-500);
  --fg-inverse:       var(--sv-white);
  --border:           var(--sv-gray-200);
  --border-strong:    var(--sv-gray-300);
  --primary:          var(--sv-blue);
  --primary-hover:    var(--sv-blue-dark);
  --focus-ring:       var(--sv-blue);

  /* ——— Gradients ——— */
  --gradient-hero:       linear-gradient(to bottom, var(--sv-light), var(--sv-white));
  --gradient-blue:       linear-gradient(135deg, #1888FF 0%, #004B8D 100%);
  --gradient-blue-soft:  linear-gradient(135deg, rgba(24,136,255,0.05), rgba(0,75,141,0.05));
  --gradient-dark:       linear-gradient(180deg, #1E1E1E 0%, #0B0B0B 100%);

  /* ——— Typography families ——— */
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* ——— Type scale (Tailwind-aligned) ——— */
  --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 */
  --fs-5xl:   3rem;       /* 48 */
  --fs-6xl:   3.75rem;    /* 60 */
  --fs-7xl:   4.5rem;     /* 72 */

  /* ——— Weights ——— */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extra:    800;

  /* ——— Line heights ——— */
  --lh-tight:    1.1;
  --lh-snug:     1.25;
  --lh-normal:   1.5;
  --lh-relaxed:  1.65;

  /* ——— Tracking ——— */
  --tracking-tighter: -0.02em;
  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.025em;
  --tracking-wider:   0.05em;

  /* ——— Radii ——— */
  --radius-sm:    0.25rem;   /* 4  — pill-like chips */
  --radius-md:    0.5rem;    /* 8  — buttons, inputs */
  --radius-lg:    0.75rem;   /* 12 — cards */
  --radius-xl:    1rem;      /* 16 — prominent cards */
  --radius-2xl:   1.5rem;    /* 24 — hero cards */
  --radius-full:  9999px;    /* pills, badges, avatars */

  /* ——— Shadows ——— */
  --shadow-xs:  0 1px 2px rgba(17, 24, 39, 0.04);
  --shadow-sm:  0 1px 3px rgba(17, 24, 39, 0.06), 0 1px 2px rgba(17, 24, 39, 0.04);
  --shadow-md:  0 4px 6px -1px rgba(17, 24, 39, 0.08), 0 2px 4px -2px rgba(17, 24, 39, 0.04);
  --shadow-lg:  0 10px 15px -3px rgba(17, 24, 39, 0.08), 0 4px 6px -4px rgba(17, 24, 39, 0.04);
  --shadow-xl:  0 20px 25px -5px rgba(17, 24, 39, 0.10), 0 8px 10px -6px rgba(17, 24, 39, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(17, 24, 39, 0.18);
  --shadow-blue: 0 10px 30px -8px rgba(24, 136, 255, 0.35);

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

  /* ——— Container ——— */
  --container-max: 1400px;
  --container-pad: 2rem;

  /* ——— Motion ——— */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    150ms;
  --dur-med:     250ms;
  --dur-slow:    400ms;
}

/* ============================================================
 * Base typography
 * ============================================================ */

html, body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Semantic type roles */
.sv-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--primary);
}

.sv-h1, h1 {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5vw, 4.5rem);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tighter);
  color: var(--fg);
}

.sv-h2, h2 {
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 4vw, 3rem);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

.sv-h3, h3 {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--fg);
}

.sv-h4, h4 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--fg);
}

.sv-lead {
  font-family: var(--font-sans);
  font-size: var(--fs-xl);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
}

.sv-body, p {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--fg);
}

.sv-small {
  font-size: var(--fs-sm);
  color: var(--fg-muted);
}

.sv-micro {
  font-size: var(--fs-xs);
  color: var(--fg-subtle);
}

.sv-stat {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  font-weight: var(--fw-bold);
  color: var(--primary);
  line-height: 1;
  letter-spacing: var(--tracking-tighter);
}

.sv-quote {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-style: italic;
  color: var(--fg-muted);
  line-height: var(--lh-relaxed);
}

code, .sv-code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--sv-gray-100);
  padding: 0.15em 0.4em;
  border-radius: var(--radius-sm);
  color: var(--fg);
}