/* ==========================================================================
   finPRO — Colors & Typography tokens
   ========================================================================== */

/* Inter + JetBrains Mono via Google Fonts (closest match to the in-product
   font stack specified in DESIGN_SOURCE.md). The marketing/logo uses a
   rounded display face; we substitute Nunito for that role and FLAG to user. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Nunito:wght@700;800&display=swap");

:root {
  /* ---------- Brand ---------- */
  --brand-primary:        #0F8F8B;
  --brand-primary-hover:  #0B7570;
  --brand-primary-subtle: #E6F4F3;
  --brand-deep:           #063B39;
  --brand-accent-lime:    #B6E972;   /* logo / marketing only */

  /* ---------- Neutrals ---------- */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #FAFBFC;
  --neutral-100: #F4F6F8;
  --neutral-200: #E5E9ED;
  --neutral-300: #CBD2D9;
  --neutral-400: #9AA5B1;
  --neutral-500: #7B8794;
  --neutral-600: #52606D;
  --neutral-700: #3E4C59;
  --neutral-800: #1F2933;
  --neutral-900: #0F1419;

  /* ---------- Semantic ---------- */
  --success:         #0E8A5F;
  --success-subtle:  #E6F4EE;
  --warning:         #B86E00;
  --warning-subtle:  #FDF3E2;
  --danger:          #C0392B;
  --danger-subtle:   #FCEAE7;
  --info:            #2D6CDF;
  --info-subtle:     #E8EFFB;

  /* ---------- Charts ---------- */
  --chart-1: #0F8F8B;
  --chart-2: #2D6CDF;
  --chart-3: #7B5FCC;
  --chart-4: #E08A3C;
  --chart-5: #0E8A5F;
  --chart-6: #52606D;

  /* ---------- Spacing (4px base) ---------- */
  --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;

  /* ---------- Radii ---------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* ---------- Shadows ---------- */
  --shadow-none: none;
  --shadow-sm:   0 1px 2px rgba(15, 20, 25, 0.06);
  --shadow-md:   0 1px 3px rgba(15, 20, 25, 0.08), 0 1px 2px rgba(15, 20, 25, 0.04);
  --shadow-lg:   0 8px 24px rgba(15, 20, 25, 0.10), 0 2px 6px rgba(15, 20, 25, 0.06);
  --shadow-focus: 0 0 0 4px var(--brand-primary-subtle);

  /* ---------- Type families ---------- */
  --font-sans:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-display: "Nunito", "Inter", system-ui, sans-serif; /* marketing/logo */

  /* ---------- Type scale (UI) ---------- */
  --text-display:       32px / 40px var(--font-sans);
  --text-display-w:     600;
  --text-h1:            24px / 32px var(--font-sans);
  --text-h1-w:          600;
  --text-h2:            20px / 28px var(--font-sans);
  --text-h2-w:          600;
  --text-h3:            16px / 24px var(--font-sans);
  --text-h3-w:          600;
  --text-body:          14px / 20px var(--font-sans);
  --text-body-w:        400;
  --text-body-strong-w: 600;
  --text-small:         13px / 18px var(--font-sans);
  --text-caption:       12px / 16px var(--font-sans);
  --text-caption-w:     500;
  --text-micro:         11px / 14px var(--font-sans);
  --text-micro-w:       500;

  /* ---------- Numeric scale ---------- */
  --num-hero:        32px / 40px var(--font-sans);
  --num-hero-w:      700;
  --num-large:       24px / 32px var(--font-sans);
  --num-large-w:     600;
  --num-medium:      18px / 24px var(--font-sans);
  --num-medium-w:    600;
  --num-table:       14px / 20px var(--font-sans);
  --num-table-w:     500;
  --num-table-total-w: 700;

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 100ms;
  --dur-base: 150ms;
  --dur-slow: 200ms;

  /* ---------- Foreground / Background semantic aliases ---------- */
  --fg-1: var(--neutral-800);   /* primary text + headings */
  --fg-2: var(--neutral-700);   /* body */
  --fg-3: var(--neutral-600);   /* secondary metadata */
  --fg-muted: var(--neutral-500);
  --fg-disabled: var(--neutral-400);
  --bg-canvas:    var(--neutral-50);
  --bg-surface:   var(--neutral-0);
  --bg-subtle:    var(--neutral-100);
  --border-default: var(--neutral-200);
  --border-strong:  var(--neutral-300);
}

/* ==========================================================================
   Semantic typography classes — mirror the tokens above
   ========================================================================== */

.t-display {
  font: var(--text-display);
  font-weight: var(--text-display-w);
  letter-spacing: -0.01em;
  color: var(--fg-1);
}
.t-h1 {
  font: var(--text-h1);
  font-weight: var(--text-h1-w);
  letter-spacing: -0.005em;
  color: var(--fg-1);
}
.t-h2 {
  font: var(--text-h2);
  font-weight: var(--text-h2-w);
  color: var(--fg-1);
}
.t-h3 {
  font: var(--text-h3);
  font-weight: var(--text-h3-w);
  color: var(--fg-1);
}
.t-body {
  font: var(--text-body);
  font-weight: var(--text-body-w);
  color: var(--fg-2);
}
.t-body-strong {
  font: var(--text-body);
  font-weight: var(--text-body-strong-w);
  color: var(--fg-1);
}
.t-small {
  font: var(--text-small);
  color: var(--fg-3);
}
.t-caption {
  font: var(--text-caption);
  font-weight: var(--text-caption-w);
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.t-micro {
  font: var(--text-micro);
  font-weight: var(--text-micro-w);
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Numeric — always tabular */
.n-hero, .n-large, .n-medium, .n-table, .n-table-total {
  font-family: var(--font-sans);
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--fg-1);
}
.n-hero       { font: var(--num-hero);   font-weight: var(--num-hero-w); letter-spacing: -0.01em; }
.n-large      { font: var(--num-large);  font-weight: var(--num-large-w); letter-spacing: -0.005em; }
.n-medium     { font: var(--num-medium); font-weight: var(--num-medium-w); }
.n-table      { font: var(--num-table);  font-weight: var(--num-table-w); }
.n-table-total{ font: var(--num-table);  font-weight: var(--num-table-total-w); }

.mono {
  font-family: var(--font-mono);
}

/* Code */
code, .code {
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--neutral-100);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-xs);
  padding: 1px 6px;
  color: var(--neutral-800);
}

/* Sensible defaults so cards inherit something sane */
html, body {
  font-family: var(--font-sans);
  color: var(--fg-2);
  background: var(--bg-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}