/* The cfo-team design system, re-skinned.
 *
 * Same token structure, same Tailwind mapping, same house rules (no sharp
 * corners on containers, tabular figures, uppercase labels). Only the palette
 * differs: a muted ink-and-green set rather than the blue prism, because this
 * app is one room instead of two and does not need a second identity.
 *
 * Colours are space-separated RGB so Tailwind's opacity modifiers
 * (`bg-primary/10`, `border-warning/40`) still resolve.
 */

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

:root {
  --shadow-atmospheric: 0 20px 60px -10px rgba(28, 27, 25, 0.07);
  --blur-glass: 20px;
  --duration-fast: 0.2s;
  --duration-standard: 0.6s;

  --radius: 1.5rem;
  --radius-card: 2.5rem;
  --radius-cta: 3rem;

  /* ---- Light ---- */
  --background: 251 250 248;          /* #fbfaf8 — warm paper, never white */
  --foreground: 28 27 25;             /* #1c1b19 — ink, never black */
  --card: 255 255 255;
  --card-foreground: 28 27 25;
  --popover: 255 255 255;
  --popover-foreground: 28 27 25;
  --primary: 31 111 92;               /* #1f6f5c */
  --primary-foreground: 255 255 255;
  --secondary: 238 245 242;           /* #eef5f2 — the primary at a whisper */
  --secondary-foreground: 31 111 92;
  --muted: 244 242 238;
  --muted-foreground: 107 104 98;     /* #6b6862 */
  --accent: 238 245 242;
  --accent-foreground: 31 111 92;
  --destructive: 160 51 32;
  --destructive-foreground: 255 255 255;
  --warning: 138 75 42;               /* #8a4b2a */
  --warning-foreground: 255 255 255;
  --success: 31 111 92;
  --success-foreground: 255 255 255;
  --border: 230 226 219;              /* #e6e2db — felt, not seen */
  --input: 230 226 219;
  --ring: 31 111 92;
}

.dark {
  --shadow-atmospheric: 0 20px 60px -10px rgba(0, 0, 0, 0.5);

  --background: 22 24 26;             /* #16181a */
  --foreground: 232 230 227;          /* #e8e6e3 */
  --card: 30 33 36;                   /* #1e2124 */
  --card-foreground: 232 230 227;
  --popover: 30 33 36;
  --popover-foreground: 232 230 227;
  --primary: 111 195 168;             /* #6fc3a8 — the green, lit */
  --primary-foreground: 14 26 23;
  --secondary: 28 43 39;              /* #1c2b27 */
  --secondary-foreground: 111 195 168;
  --muted: 28 31 34;
  --muted-foreground: 154 151 146;    /* #9a9792 */
  --accent: 28 43 39;
  --accent-foreground: 111 195 168;
  --destructive: 255 180 169;
  --destructive-foreground: 70 10 4;
  --warning: 217 154 108;             /* #d99a6c */
  --warning-foreground: 40 22 8;
  --success: 111 195 168;
  --success-foreground: 14 26 23;
  --border: 46 50 54;                 /* #2e3236 */
  --input: 46 50 54;
  --ring: 111 195 168;
}

* { border-color: rgb(var(--border)); }

body {
  background: rgb(var(--background));
  color: rgb(var(--foreground));
  -webkit-font-smoothing: antialiased;
}

/* Money never jitters between rows. */
.tabular, table, .money, .font-mono { font-variant-numeric: tabular-nums; }

h1, h2, h3 { letter-spacing: -0.02em; font-weight: 800; }

.brand-label {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  font-size: 0.75rem;
}

.atmospheric-shadow { box-shadow: var(--shadow-atmospheric); }
.glass-nav {
  backdrop-filter: blur(var(--blur-glass));
  -webkit-backdrop-filter: blur(var(--blur-glass));
}

@keyframes slideUpFade {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}
.animate-slide-up-fade { animation: slideUpFade var(--duration-standard) ease-out both; }

/* The one thing a chat needs that a dashboard does not. */
@keyframes blinkFade { 0%, 60%, 100% { opacity: .2 } 30% { opacity: 1 } }
.dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; margin-right: 4px; animation: blinkFade 1.2s infinite;
}
.dot:nth-child(2) { animation-delay: .15s }
.dot:nth-child(3) { animation-delay: .3s }

/* The answer arrives as prose with the odd list. Give it room without pulling
   in a markdown renderer. */
.answer { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; }
.answer strong { font-weight: 700; }

/* A statement wants a table. The answer body is pre-wrap for prose, so the
   table has to opt back out of it. */
.answer-table {
  white-space: normal;
  margin: 0.875rem 0;
  overflow-x: auto;                   /* narrow screens scroll the table, not the page */
  border: 1px solid rgb(var(--border));
  border-radius: 0.75rem;
}
.answer-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}
.answer-table th {
  padding: 0.625rem 0.875rem;
  white-space: nowrap;
  background: rgb(var(--muted));
  color: rgb(var(--muted-foreground));
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.answer-table td {
  padding: 0.5rem 0.875rem;
  border-top: 1px solid rgb(var(--border));
}
/* A totals row is the one the eye goes to, and the model marks it in bold. */
.answer-table td strong { font-weight: 700; }
.answer-table tbody tr:hover td { background: rgb(var(--muted) / 0.45); }

/* Section headings and rules inside an answer. Both are spans, because the
   answer body is pre-wrap and a block element would add its own line breaks
   on top of the newlines already in the text. */
.answer-h {
  display: block;
  margin: 1rem 0 0.35rem;
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
}
.answer-h:first-child { margin-top: 0; }
.answer-hr {
  display: block;
  height: 1px;
  margin: 1rem 0;
  background: rgb(var(--border));
}