/* ============================================================
   AveryGPT — Colors & Type foundations
   The AI-powered lending intelligence platform (commercial real estate)
   Source of truth: averygpt-app/src/index.css (Tailwind v4 @theme + shadcn)
   ============================================================

   FONT NOTE / SUBSTITUTION
   The product ships in "ABC Monument Grotesk" (Dinamo, commercial license).
   No font files were present in the codebase. We substitute the closest
   free Google Font: "Hanken Grotesk" (a neutral humanist grotesque with a
   similar x-height and even color). Poppins (loaded by the app's index.html)
   and Plus Jakarta Sans (the "OM" document-tool theme) are kept as-is.
   --> If you have the real Monument Grotesk webfonts, drop them in fonts/
       and swap --font-sans below.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,300..800;1,300..800&family=Plus+Jakarta+Sans:ital,wght@0,300..800;1,300..700&family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
  /* ---------- BRAND COLOR: PRIMARY (sky blue) ---------- */
  --primary:          #80cceb;  /* core brand blue */
  --primary-light:    #b3dbf4;
  --primary-lighter:  #ddeeff;
  --primary-dark:     #5fb8db;
  --primary-darker:   #3fa4cb;
  --primary-50:       #f0f9fd;  /* tint surface (section headers, hovers) */
  --primary-foreground: #ffffff;

  /* Logo-mark petal gradient (from logo SVG) */
  --mark-grad-from:   #4dc0e4;
  --mark-grad-to:     #9bc9ed;
  /* Active-nav gradient (header pills) */
  --nav-grad: linear-gradient(90deg, #80cceb 0%, #b3dbf4 50%, #ddeeff 100%);

  /* ---------- BRAND COLOR: SECONDARY (slate) ---------- */
  --secondary:        #3b4c5c;  /* deep slate — secondary buttons, ink accents */
  --secondary-light:  #556879;
  --secondary-dark:   #2a3a47;
  --secondary-foreground: #ffffff;

  /* ---------- NEUTRALS / FOREGROUND ---------- */
  --background:       #ffffff;
  --surface:          #f9fafb;  /* gray-50 — app canvas behind cards */
  --foreground:       oklch(35.74% 0.0363 250.39);   /* primary text (slate-ink) */
  --muted:            oklch(96.83% 0.0069 247.90);    /* muted fill */
  --muted-foreground: oklch(52.09% 0.012 67.56);      /* secondary text */
  --card:             #ffffff;
  --card-foreground:  oklch(20.70% 0.0380 265.07);
  --popover:          #ffffff;
  --border:           oklch(89.75% 0 0);              /* hairline borders */
  --input:            oklch(92.88% 0.0126 255.51);
  --ring:             oklch(51.18% 0.0363 250.39);

  /* Convenience gray ramp (matches Tailwind gray usage in app) */
  --gray-50:  #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;

  /* ---------- SEMANTIC / STATUS ---------- */
  --accent:            oklch(97.19% 0.0150 228.96);   /* faint blue accent fill */
  --accent-foreground: oklch(67.66% 0.1481 238.14);
  --destructive:       oklch(63.68% 0.2078 25.33);    /* error red */
  --destructive-foreground: #ffffff;
  --success:           #059669;  /* emerald-600 — "Sent" / positive */
  --success-bg:        #d1fae5;  /* emerald-100 */
  --success-fg:        #064e3b;  /* emerald-900 */
  --warning-bg:        #fffbeb;  /* amber-50  — desktop-only / notices */
  --warning-border:    #fcd34d;  /* amber-300 */
  --warning-fg:        #92400e;  /* amber-800 */
  /* Chat bubbles */
  --chat-user-bg:      #2563eb;  /* blue-600 */
  --chat-user-fg:      #ffffff;
  --chat-bot-bg:       #f3f4f6;  /* gray-100 */
  --chat-bot-fg:       #111827;

  /* Data-viz (charts) */
  --chart-1: oklch(67.66% 0.1481 238.14);  /* blue */
  --chart-2: oklch(53.33% 0.2491 292.48);  /* purple */
  --chart-3: oklch(82.83% 0.1556 80.14);   /* gold */
  --chart-4: oklch(65.38% 0.2123 7.34);    /* pink-red */
  --chart-5: oklch(79.51% 0.1803 148.84);  /* green */

  /* ---------- TYPE FAMILIES ---------- */
  --font-sans:   'Hanken Grotesk', 'ABC Monument Grotesk', Arial, Helvetica, sans-serif;
  --font-display:'Hanken Grotesk', 'ABC Monument Grotesk', Arial, sans-serif;
  --font-om:     'Plus Jakarta Sans', 'Inter', system-ui, sans-serif; /* OM document tool theme */
  --font-poppins:'Poppins', var(--font-sans);  /* marketing/promo accents */
  --font-mono:   ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;

  /* ---------- TYPE SCALE (app is dense; headings tracking-tight) ---------- */
  --tracking-tight:  -0.025em;   /* default tracking in app */
  --tracking-tighter:-0.05em;
  --leading-tight:   1.15;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;

  --text-xs:   12px;
  --text-sm:   14px;   /* body default in app UI */
  --text-base: 16px;
  --text-lg:   18px;   /* card titles / news headlines */
  --text-xl:   20px;
  --text-2xl:  24px;   /* welcome-back greeting */
  --text-3xl:  30px;
  --text-4xl:  36px;   /* page heroes (OM Summary AI) */
  --text-5xl:  48px;

  /* ---------- RADII ---------- */
  --radius:     10.4px;  /* 0.65rem — base */
  --radius-sm:  6.4px;
  --radius-md:  8.4px;
  --radius-lg:  10.4px;
  --radius-xl:  14.4px;  /* cards, chat bubbles, inputs containers */
  --radius-2xl: 18.4px;
  --radius-3xl: 24px;    /* welcome page hero panels */
  --radius-full: 9999px; /* nav pills, badges, avatars */

  /* ---------- SHADOWS (very soft, low-opacity) ---------- */
  --shadow-2xs: 0px 2px 10px 0px hsl(0 0% 0% / 0.03);
  --shadow-xs:  0px 2px 10px 0px hsl(0 0% 0% / 0.03);
  --shadow-sm:  0px 2px 10px 0px hsl(0 0% 0% / 0.05), 0px 1px 2px -1px hsl(0 0% 0% / 0.05);
  --shadow:     0px 2px 10px 0px hsl(0 0% 0% / 0.05), 0px 1px 2px -1px hsl(0 0% 0% / 0.05);
  --shadow-md:  0px 2px 10px 0px hsl(0 0% 0% / 0.05), 0px 2px 4px -1px hsl(0 0% 0% / 0.05);
  --shadow-lg:  0px 2px 10px 0px hsl(0 0% 0% / 0.05), 0px 4px 6px -1px hsl(0 0% 0% / 0.05);
  --shadow-xl:  0px 2px 10px 0px hsl(0 0% 0% / 0.05), 0px 8px 10px -1px hsl(0 0% 0% / 0.05);
  --shadow-2xl: 0px 2px 10px 0px hsl(0 0% 0% / 0.13);

  /* ---------- SPACING (4px base, Tailwind scale) ---------- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
  --space-12: 48px; --space-16: 64px;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES  (use directly, or as a reference)
   ============================================================ */

body {
  font-family: var(--font-sans);
  color: var(--foreground);
  background: var(--background);
  letter-spacing: var(--tracking-tight);
  -webkit-font-smoothing: antialiased;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--card-foreground);
}
h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.25;
}
.eyebrow {           /* breadcrumb / small label above a hero */
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--muted-foreground);
}
p, .body {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--foreground);
}
.body-lg { font-size: var(--text-lg); line-height: var(--leading-relaxed); }
small, .text-muted {
  font-size: var(--text-xs);
  color: var(--muted-foreground);
}
code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}
a, .link {
  color: var(--primary-darker);
  font-weight: 600;
  text-decoration: none;
}
a:hover, .link:hover { color: var(--primary-dark); }