/* ============================================================
   ListedKit AI — Colors & Type
   ============================================================
   Source of truth derived from tailwind.config.js in
   Harmony-Venture-Labs/listedkit-site (main).
   Font: Gabarito (Google Fonts). Loaded in index/html via:
   <link href="https://fonts.googleapis.com/css2?family=Gabarito:wght@400;500;600;700;800&display=swap" rel="stylesheet">
   ============================================================ */

:root {
  /* ---- Brand colors (raw) ---- */
  --lk-mint:           #92FFBA;  /* Ava logo, highlights, underlines */
  --lk-chocolate:      #021B2E;  /* Primary text & dark navy surfaces (also navy-900, aiva-dark) */
  --lk-milk:           #F0F4F7;  /* Soft blue-tinted background (also light-blue) */
  --lk-aiva-green:     #1F8B6F;  /* Hero gradient start, primary action tint */
  --lk-aiva-bright:    #00C287;  /* Hero gradient end, vibrant green */
  --lk-aiva-dark-green:#0F7B30;
  --lk-aiva-medium:    #1E7B34;
  --lk-aiva-softgray:  #F8F9FA;  /* Section backgrounds */
  --lk-yellow:         #FFD900;  /* CTA — single-use, primary action only */
  --lk-dark-gray:      #1E1E1E;  /* Text on yellow buttons */

  /* ---- Functional colors (from Ava Brand Guide 2026) ---- */
  --fn-error:    #DC2626;  /* Red — system errors, critical alerts */
  --fn-error-bg: #FEE2E2;
  --fn-success:  #0F7B30;  /* Green — confirmations, completed states */
  --fn-success-bg:#DCFCE7;
  --fn-warning:  #D97706;  /* Amber — deadlines, time-sensitive */
  --fn-warning-bg:#FEF3C7;
  --fn-info:     #2563EB;  /* Blue — neutral notices, tips */
  --fn-info-bg:  #DBEAFE;

  /* ---- Neutrals (Tailwind gray scale — used widely) ---- */
  --gray-50:  #F9FAFB;
  --gray-100: #F3F4F6;
  --gray-200: #E5E7EB;
  --gray-300: #D1D5DB;
  --gray-400: #9CA3AF;
  --gray-500: #6B7280;
  --gray-600: #4B5563;
  --gray-700: #374151;
  --gray-800: #1F2937;
  --gray-900: #111827;

  /* ---- Semantic tokens ---- */
  --bg:            #FFFFFF;
  --bg-soft:       var(--lk-aiva-softgray);
  --bg-tinted:     var(--lk-milk);
  --bg-dark:       var(--lk-chocolate);

  --fg-1:          var(--lk-chocolate);  /* Primary heading / body-dark */
  --fg-2:          var(--gray-700);      /* Body */
  --fg-3:          var(--gray-500);      /* Muted / captions */
  --fg-on-dark:    #FFFFFF;
  --fg-on-dark-2:  rgba(255,255,255,0.9);
  --fg-on-dark-3:  rgba(255,255,255,0.7);

  --accent:        var(--lk-aiva-green);
  --accent-strong: var(--lk-aiva-bright);
  --accent-soft:   var(--lk-mint);
  --cta-bg:        var(--lk-yellow);
  --cta-fg:        var(--lk-dark-gray);

  --border:        var(--gray-200);
  --border-strong: var(--gray-300);
  --divider:       var(--gray-100);

  /* ---- Gradients ---- */
  --grad-hero:    linear-gradient(135deg, #1F8B6F 0%, #00C287 100%); /* 135° per Brand Guide; ↓ alt */
  --grad-hero-down: linear-gradient(180deg, #1F8B6F 0%, #00C287 100%);
  --grad-mint:    linear-gradient(135deg, #92FFBA 0%, #00C287 100%);
  --grad-night:   linear-gradient(180deg, #021B2E 0%, #0A2A42 100%);

  /* ---- Type ---- */
  --font-sans: 'Gabarito', ui-sans-serif, system-ui, -apple-system,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Type scale (site uses Tailwind: text-6xl 60px, 5xl 48px, 4xl 36px, 3xl 30px, 2xl 24px, xl 20px, lg 18px, base 16px, sm 14px, xs 12px) */
  --fs-display-xl: clamp(2.75rem, 5vw + 0.5rem, 3.75rem);   /* 44 → 60 */
  --fs-display:    clamp(2.25rem, 4vw + 0.5rem, 3rem);       /* 36 → 48 */
  --fs-h1:         2.25rem;  /* 36 */
  --fs-h2:         1.875rem; /* 30 */
  --fs-h3:         1.5rem;   /* 24 */
  --fs-h4:         1.25rem;  /* 20 */
  --fs-lead:       1.25rem;  /* 20 */
  --fs-body:       1rem;     /* 16 */
  --fs-small:      0.875rem; /* 14 */
  --fs-xs:         0.75rem;  /* 12 */

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-black:   800;  /* Display XL only per Brand Guide 2026 */

  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;

  /* ---- Radii ---- */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   12px;   /* cards (rounded-xl = 12px in Tailwind) */
  --r-xl:   16px;   /* cards (rounded-2xl) — navbar pill */
  --r-2xl:  24px;
  --r-pill: 9999px; /* CTAs, nav pill, badges */

  /* ---- Spacing (Tailwind-aligned) ---- */
  --sp-0:  0;
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  /* ---- Shadows ---- */
  --shadow-xs: 0 1px 2px rgba(2, 27, 46, 0.04);
  --shadow-sm: 0 1px 3px rgba(2, 27, 46, 0.06), 0 1px 2px rgba(2, 27, 46, 0.04);
  --shadow-md: 0 4px 10px rgba(2, 27, 46, 0.06), 0 2px 4px rgba(2, 27, 46, 0.04);
  --shadow-lg: 0 10px 24px rgba(2, 27, 46, 0.08), 0 4px 8px rgba(2, 27, 46, 0.04);
  --shadow-xl: 0 20px 40px rgba(2, 27, 46, 0.12), 0 8px 16px rgba(2, 27, 46, 0.06);
  --shadow-2xl:0 28px 60px rgba(2, 27, 46, 0.18);
  --shadow-cta:0 10px 24px rgba(255, 217, 0, 0.35);
  --shadow-mint:0 10px 24px rgba(0, 194, 135, 0.25);

  /* ---- 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-base: 300ms;
  --dur-slow: 500ms;
}

/* ============================================================
   Base element styles
   ============================================================ */
html, body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  color: var(--fg-1);
  background: var(--bg);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.display-xl {
  font-size: var(--fs-display-xl);
  font-weight: var(--fw-black); /* 800 — reserved for hero display */
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}
h2, .h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
h3, .h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
h4, .h4 {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}
p, .body {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}
small, .small, .caption {
  font-size: var(--fs-small);
  color: var(--fg-3);
}
.eyebrow {
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-3);
}
.lead {
  font-size: var(--fs-lead);
  color: var(--fg-2);
  line-height: var(--lh-relaxed);
}
code, kbd, pre {
  font-family: var(--font-mono);
}