/* ============================================================
 * Titanbay Design System — Colors & Type
 *
 * Source of truth: platform-ui/app/src/theme-titanbay.ts
 * (PrimeVue 4 / Aura preset). All variables mirror the
 * `--p-*` runtime tokens that the live app uses.
 *
 * Use these vars in HTML mockups and prototypes so visuals
 * track the production theme.
 * ============================================================ */

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

:root {
  /* -----------------------------------------------------------
   * PRIMARY — deep indigo/navy. The Titanbay brand color.
   * Use 500 as the default; 600/700 for hover/active.
   * --------------------------------------------------------- */
  --tb-primary-50:  #F4F6FE;
  --tb-primary-100: #DCE2FB;
  --tb-primary-200: #BAC2E6;
  --tb-primary-300: #8893C4;
  --tb-primary-400: #475190;
  --tb-primary-500: #20236C; /* brand */
  --tb-primary-600: #1B1C63;
  --tb-primary-700: #16165A;
  --tb-primary-800: #120F51;
  --tb-primary-900: #0D0749;
  --tb-primary-950: #0A0140;
  --tb-primary: var(--tb-primary-500);

  /* -----------------------------------------------------------
   * SURFACE / NEUTRAL — slate scale. Backgrounds, borders,
   * body text. App background is surface-50 (#F7F8F9).
   * --------------------------------------------------------- */
  --tb-surface-0:   #FFFFFF;
  --tb-surface-50:  #F7F8F9;
  --tb-surface-100: #F0F1F3;
  --tb-surface-200: #D8DCE2;
  --tb-surface-300: #C1C7D1;
  --tb-surface-400: #9AA5B4;
  --tb-surface-500: #64748B;
  --tb-surface-600: #5A687D;
  --tb-surface-700: #4B5768;
  --tb-surface-800: #37404C;
  --tb-surface-900: #232931;
  --tb-surface-950: #0F1115;

  /* App canvas — referenced widely in prototypes */
  --tb-app-bg: #EFF4F8;

  /* -----------------------------------------------------------
   * SEMANTIC TEXT
   * --------------------------------------------------------- */
  --tb-text-color:        var(--tb-surface-900); /* #232931 */
  --tb-text-hover:        var(--tb-surface-950);
  --tb-text-muted:        var(--tb-surface-500);
  --tb-text-muted-hover:  var(--tb-surface-600);
  --tb-text-on-primary:   var(--tb-surface-0);
  --tb-border-color:      var(--tb-surface-200);
  --tb-border-strong:     var(--tb-surface-300);

  /* -----------------------------------------------------------
   * SEMANTIC STATUS — pulled from PrimeVue severity defaults
   * + Tag overrides used for fund/onboarding statuses.
   * --------------------------------------------------------- */
  --tb-success:        #10B981;
  --tb-success-bg:     #ECFDF5;
  --tb-success-text:   #047857;

  --tb-warn:           #F59E0B;
  --tb-warn-bg:        #FEF3C7;
  --tb-warn-text:      #B45309;

  --tb-danger:         #EF4444;
  --tb-danger-bg:      #FEE2E2;
  --tb-danger-text:    #B91C1C;

  --tb-info:           #3B82F6;
  --tb-info-bg:        #DBEAFE;
  --tb-info-text:      #1D4ED8;

  /* "In review" / investment status — purple, used by
   * OnboardingStatusTag and OpportunityCardStatus. */
  --tb-purple-50:      #F5F3FF;
  --tb-purple-100:     #EDE9FE;
  --tb-purple-500:     #8B5CF6;
  --tb-purple-800:     #5B21B6;

  /* -----------------------------------------------------------
   * CHART PALETTE — recommended Palette 1 (Neutral & Balanced)
   * --------------------------------------------------------- */
  --tb-chart-blue:   #4C70F5;
  --tb-chart-teal:   #06B6D4;
  --tb-chart-green:  #10B981;
  --tb-chart-amber:  #F59E0B;
  --tb-chart-red:    #EF4444;
  --tb-chart-gray:   #6B7280;
  --tb-chart-purple: #8B5CF6;
  --tb-chart-slate:  #475569;

  /* -----------------------------------------------------------
   * TYPOGRAPHY — single family (Inter), PrimeVue scale.
   * --------------------------------------------------------- */
  --tb-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --tb-font-size-xxs:  0.625rem;  /* 10px */
  --tb-font-size-xs:   0.75rem;   /* 12px */
  --tb-font-size-sm:   0.875rem;  /* 14px */
  --tb-font-size-md:   1rem;      /* 16px */
  --tb-font-size-lg:   1.125rem;  /* 18px */
  --tb-font-size-xl:   1.25rem;   /* 20px */
  --tb-font-size-2xl:  1.5rem;    /* 24px */
  --tb-font-size-3xl:  1.75rem;   /* 28px */
  --tb-font-size-4xl:  1.875rem;  /* 30px */
  --tb-font-size-5xl:  2.25rem;   /* 36px */
  --tb-font-size-6xl:  2.5rem;    /* 40px */
  --tb-font-size-7xl:  3rem;      /* 48px */
  --tb-font-size-8xl:  3.75rem;   /* 60px */
  --tb-font-size-9xl:  4rem;      /* 64px */

  --tb-fw-regular:  400;
  --tb-fw-medium:   500;
  --tb-fw-semibold: 600;
  --tb-fw-bold:     700;

  --tb-lh-none:     1em;
  --tb-lh-tighter:  1.15em;
  --tb-lh-tight:    1.2em;
  --tb-lh-snug:     1.3em;
  --tb-lh-normal:   1.4em;
  --tb-lh-relaxed:  1.5em;

  --tb-ls-tighter: -0.005em;
  --tb-ls-normal:   0;
  --tb-ls-wide:     0.0025em;
  --tb-ls-wider:    0.005em;

  /* -----------------------------------------------------------
   * SPACING — codebase scale (PrimeVue tokens).
   * --------------------------------------------------------- */
  --tb-space-0:  0;
  --tb-space-1:  0.125rem;  /* 2px */
  --tb-space-2:  0.25rem;   /* 4px */
  --tb-space-3:  0.5rem;    /* 8px */
  --tb-space-4:  0.75rem;   /* 12px */
  --tb-space-5:  1rem;      /* 16px */
  --tb-space-6:  1.25rem;   /* 20px */
  --tb-space-7:  1.5rem;    /* 24px */
  --tb-space-8:  2rem;      /* 32px */
  --tb-space-9:  2.5rem;    /* 40px */
  --tb-space-10: 3rem;      /* 48px */
  --tb-space-11: 4rem;      /* 64px */
  --tb-space-12: 5rem;      /* 80px */

  /* -----------------------------------------------------------
   * RADII — Titanbay system: buttons are ALWAYS pill-shaped
   * (`--tb-radius-full`). Cards use `--tb-radius-xl` (12px).
   * See STYLING_IMPLEMENTATION_GUIDE.md: "ALL buttons MUST use
   * `rounded` prop — No exceptions."
   * --------------------------------------------------------- */
  --tb-radius-sm:   4px;
  --tb-radius-md:   6px;   /* inputs, selects */
  --tb-radius-lg:   8px;
  --tb-radius-xl:   12px;  /* cards, panels */
  --tb-radius-2xl:  16px;
  --tb-radius-full: 9999px;
  --tb-radius-button: var(--tb-radius-full); /* all buttons, pill-shaped */

  /* -----------------------------------------------------------
   * SHADOWS — soft, low-elevation. The platform leans on
   * "glass" surfaces (translucent white + blur) over hard shadow.
   * --------------------------------------------------------- */
  --tb-shadow-xs: 0 1px 2px 0 rgb(18 18 23 / 5%);
  --tb-shadow-sm: 0 2px 4px 0 rgb(0 0 0 / 6%);
  --tb-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -1px rgb(0 0 0 / 6%);
  --tb-shadow-lg: 0 4px 4px 0 rgb(165 191 255 / 10%);
  --tb-shadow-fund-hover: 0 8px 10px rgb(41 44 85 / 15%);

  /* "Glass" card — used in HeaderStats, masthead overlays */
  --tb-glass-bg:     rgb(255 255 255 / 60%);
  --tb-glass-blur:   blur(30px);
  --tb-glass-bg-strong: rgb(249 250 251 / 95%);
  --tb-glass-blur-strong: blur(8px);

  /* -----------------------------------------------------------
   * MOTION — single timing var; standard ease.
   * --------------------------------------------------------- */
  --tb-duration: 0.3s;
  --tb-ease:     ease;

  /* -----------------------------------------------------------
   * LAYOUT
   * --------------------------------------------------------- */
  --tb-nav-height:           80px;
  --tb-nav-height-collapsed: 60px;
  --tb-max-readable:  70ch;
  --tb-max-extended: 110ch;
}

/* ============================================================
 * SEMANTIC TYPE STYLES
 * Mirrors _typography.scss in the codebase.
 * ============================================================ */

body, .tb-body {
  font-family: var(--tb-font-family);
  font-weight: var(--tb-fw-regular);
  font-size: var(--tb-font-size-md);
  line-height: var(--tb-lh-relaxed);
  color: var(--tb-text-color);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Display — used for HeaderStats title, masthead H1 */
.tb-display {
  font-size: var(--tb-font-size-6xl);  /* 40px */
  font-weight: var(--tb-fw-regular);
  line-height: var(--tb-lh-tight);
  color: var(--tb-surface-900);
  letter-spacing: var(--tb-ls-tighter);
}

/* h2 — section titles */
h2, .tb-h2 {
  font-size: var(--tb-font-size-2xl); /* 24px */
  font-weight: var(--tb-fw-semibold);
  line-height: var(--tb-lh-snug);
  color: var(--tb-text-color);
  margin: 0;
}

/* h3 — sub-section */
h3, .tb-h3 {
  font-size: var(--tb-font-size-lg);  /* 18px */
  font-weight: var(--tb-fw-semibold);
  line-height: var(--tb-lh-snug);
  color: var(--tb-text-color);
  margin: 0;
}

/* h4 — large numeric values, fund names */
h4, .tb-h4 {
  font-size: var(--tb-font-size-3xl); /* 28px */
  font-weight: var(--tb-fw-regular);
  line-height: var(--tb-lh-tight);
  color: var(--tb-text-color);
  margin: 0;
}

h5, .tb-h5 {
  font-size: var(--tb-font-size-lg);
  font-weight: var(--tb-fw-semibold);
  line-height: var(--tb-lh-relaxed);
  margin: 0;
}

h6, .tb-h6 {
  font-size: var(--tb-font-size-md);
  font-weight: var(--tb-fw-semibold);
  line-height: var(--tb-lh-relaxed);
  color: var(--tb-text-color);
  margin: 0;
}

/* Paragraph */
p, .tb-p {
  font-size: var(--tb-font-size-md);
  line-height: var(--tb-lh-relaxed);
  color: var(--tb-text-color);
  margin: 0 0 var(--tb-space-5) 0;
}

/* Body small — table cells, captions */
.tb-body-sm {
  font-size: var(--tb-font-size-sm);
  line-height: var(--tb-lh-relaxed);
  color: var(--tb-text-color);
}

.tb-caption, small {
  font-size: var(--tb-font-size-xs);
  line-height: var(--tb-lh-normal);
  color: var(--tb-text-muted);
}

/* Label / overline */
.tb-label {
  font-size: var(--tb-font-size-sm);
  font-weight: var(--tb-fw-medium);
  color: var(--tb-text-color);
}

.tb-eyebrow {
  font-size: var(--tb-font-size-xs);
  font-weight: var(--tb-fw-medium);
  letter-spacing: var(--tb-ls-wider);
  text-transform: uppercase;
  color: var(--tb-text-muted);
}

.tb-text-muted   { color: var(--tb-text-muted); }
.tb-text-primary { color: var(--tb-primary); }
.tb-text-medium  { font-weight: var(--tb-fw-medium); }
.tb-text-semibold{ font-weight: var(--tb-fw-semibold); }

/* Numeric — tabular figures for tables / stat values */
.tb-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}