/* Bloom — frozen design tokens · v1.0
 * --------------------------------------------------------------------------
 * Companion to BLOOM-SPEC.md. These are the only values you should reach for
 * when building Bloom surfaces. If a hex isn't in here, it doesn't belong.
 *
 * Engineering: import this once in main.tsx (or the equivalent) and
 * everything that references --bloom-* will Just Work. The companion
 * Tailwind extension lives in `bloom-tailwind.config.js` (next to this).
 */

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

:root {
  /* ============== TYPE ============== */
  --bloom-font-display: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --bloom-font-mono:    'JetBrains Mono', ui-monospace, "SF Mono", Menlo, monospace;

  /* ============== BRAND ============== */
  --bloom-brand-500: #7f09fc;   /* the only hero color */
  --bloom-brand-600: #6a07d6;   /* hover */
  --bloom-brand-700: #5806b0;   /* press */
  --bloom-brand-100: #f3e8ff;   /* purple-100 chip bg */
  --bloom-brand-50:  #faf5ff;

  --bloom-violet-500: #a855f7;  /* second stop on the gradient button */

  /* ============== PASTEL TINTS ============== */
  /* Consolidated around the purple family. No blush/pink — it clashed with
   * the brand purple. Mint covers "positive financial"; sky covers
   * info/volume; sand is the only warm accent and stays desaturated. */
  --bloom-lavender:    #efe6ff;
  --bloom-lavender-2:  #e0d0ff;
  --bloom-lavender-ink:#5b21b6;

  --bloom-lilac:       #ede9fe;     /* deeper-purple variant */
  --bloom-lilac-2:     #d6cffb;
  --bloom-lilac-ink:   #4c1d95;

  --bloom-mint:        #def5ec;
  --bloom-mint-2:      #b8e6d3;
  --bloom-mint-ink:    #0f766e;

  --bloom-sky:         #e0f2fe;
  --bloom-sky-2:       #a8d6ff;
  --bloom-sky-ink:     #075985;

  --bloom-sand:        #fef3c7;     /* warm but desaturated */
  --bloom-sand-2:      #fde68a;
  --bloom-sand-ink:    #92400e;

  /* ============== TIER COLORS (don't change) ============== */
  --bloom-tier-1: #10b981;
  --bloom-tier-2: #0ea5e9;
  --bloom-tier-3: #f59e0b;
  --bloom-tier-4: #8b5cf6;

  /* ============== SEMANTIC ============== */
  --bloom-success:    #10b981;
  --bloom-success-bg: #def5ec;
  --bloom-danger:     #e11d48;
  --bloom-danger-bg:  #fef2f2;
  --bloom-warning:    #f59e0b;
  --bloom-warning-bg: #fef3c7;
  --bloom-info:       #3b82f6;
  --bloom-info-bg:    #e0f2fe;

  /* ============== NEUTRALS ============== */
  --bloom-cream:    #fdfaf6;  /* app shell bg */
  --bloom-shell:    #f7f0ea;  /* sidebar bg / hover bg / nested panel */
  --bloom-paper:    #ffffff;  /* card surface */
  --bloom-line:     #ece5db;  /* hairline border */

  --bloom-ink-0:    #0f0f12;  /* hero numerals */
  --bloom-ink-1:    #1a1325;  /* primary text */
  --bloom-ink-2:    #46395e;  /* secondary text */
  --bloom-ink-3:    #807191;  /* meta text */
  --bloom-ink-4:    #b8acc7;  /* disabled / placeholder */

  /* ============== RADII (only three) ============== */
  --bloom-r-chip:  14px;
  --bloom-r-card:  28px;
  --bloom-r-pill:  9999px;

  /* ============== SHADOWS ============== */
  --bloom-shadow-card:       0 1px 2px rgba(0, 0, 0, 0.04);
  --bloom-shadow-card-hover: 0 6px 16px -4px rgba(0, 0, 0, 0.08);
  --bloom-shadow-purple:     0 8px 20px -6px rgba(127, 9, 252, 0.45);
  --bloom-shadow-modal:      0 25px 50px -12px rgba(0, 0, 0, 0.2);
  --bloom-shadow-pop:        0 12px 28px -8px rgba(0, 0, 0, 0.18);

  /* ============== MOTION ============== */
  --bloom-ease:        cubic-bezier(0.32, 0.72, 0.34, 1); /* @kind other */
  --bloom-dur-fast:    120ms; /* @kind other */
  --bloom-dur-base:    180ms; /* @kind other */
  --bloom-dur-slow:    280ms; /* @kind other */

  /* ============== GRADIENTS ============== */
  /* Hero gradient — all in the lavender/purple family for tonal consistency
   * with the brand. The previous warm-to-cool wash clashed. */
  --bloom-grad-hero: linear-gradient(120deg, #f5edff 0%, #ece0ff 50%, #ddd2ff 100%); /* @kind color */
  --bloom-grad-button: linear-gradient(90deg, #7f09fc 0%, #a855f7 100%); /* @kind color */
  --bloom-grad-nav: linear-gradient(135deg, #7f09fc 0%, #a855f7 100%); /* @kind color */

  /* ============== LAYOUT CONSTANTS ============== */
  --bloom-sidebar-w:     240px;
  --bloom-sidebar-w-min: 76px;
  --bloom-content-max:   1180px;
  --bloom-topbar-h:      56px;

  /* ============== THEMEABLE SEMANTIC TOKENS (light defaults) ============== */
  /* New tokens introduced so the few hard-coded literals scattered through the
   * components can flip cleanly in dark mode. Light values reproduce the
   * original look 1:1. */

  /* Rate / delta colors (good / mid / bad) used in tables + KPI rate cells */
  --bloom-pos: #047857;
  --bloom-mid: #b45309;
  --bloom-neg: #b91c1c;
  --bloom-ink-indigo: #4338ca;  /* indigo data-accent text on a surface */

  /* Chart gridlines (kept just off the card surface) */
  --bloom-grid: #f1ece4;

  /* Decorative overlays */
  --bloom-tile-orb:  rgba(255,255,255,0.55);  /* KPI/pastel-tile corner sheen */
  --bloom-hero-orb:  rgba(255,255,255,0.35);  /* hero blur orb */
  --bloom-skeleton-hi: #ffffff;               /* loading shimmer highlight */
  --bloom-hover-soft:  rgba(255,255,255,0.60); /* sidebar item hover wash */
  --bloom-hover-border:#e0d0ff;               /* feature-card hover border */

  /* Brand purple as TEXT on a surface (vs as a fill). Light = the hero color. */
  --bloom-brand-on-surface: #6a07d6;

  /* Icon-chip gradients — match the sidebar section tints */
  --bloom-chip-lavender: linear-gradient(135deg, #efe6ff 0%, #ddd2ff 100%); /* @kind color */
  --bloom-chip-mint:     linear-gradient(135deg, #def5ec 0%, #b8e6d3 100%); /* @kind color */
  --bloom-chip-sand:     linear-gradient(135deg, #fff8dc 0%, #fcd97a 100%); /* @kind color */
  --bloom-chip-sky:      linear-gradient(135deg, #e0f2fe 0%, #a8d6ff 100%); /* @kind color */
  --bloom-chip-lilac:    linear-gradient(135deg, #ede9fe 0%, #b794f4 100%); /* @kind color */

  /* Result-count chip (referrals filter bar) */
  --bloom-chip-grad:   linear-gradient(135deg, #f3e8ff 0%, #faf5ff 100%); /* @kind color */
  --bloom-chip-border: #e9d5ff;

  /* Referral card — internal (purple) */
  --rc-int-stripe:    #7f09fc;
  --rc-int-bg:        linear-gradient(180deg, #f3e8ff 0%, #ffffff 60%);
  --rc-int-border:    #e9d5ff;
  --rc-int-header:    rgba(127,9,252,0.06);
  --rc-int-badge-bg:  rgba(127,9,252,0.10);
  --rc-int-badge-ink: #5b21b6;
  --rc-int-status-bg: #faf5ff;
  --rc-int-status-ink:#5b21b6;
  --rc-int-footer:    rgba(127,9,252,0.04);

  /* Referral card — external (amber) */
  --rc-ext-stripe:    #d97706;
  --rc-ext-bg:        linear-gradient(180deg, #fef3c7 0%, #ffffff 60%);
  --rc-ext-border:    #fde68a;
  --rc-ext-header:    rgba(217,119,6,0.06);
  --rc-ext-badge-bg:  rgba(217,119,6,0.12);
  --rc-ext-badge-ink: #92400e;
  --rc-ext-status-bg: #fef3c7;
  --rc-ext-status-ink:#92400e;
  --rc-ext-footer:    rgba(217,119,6,0.04);

  /* Referral detail modal section tints */
  --bloom-section-tint-int: rgba(127,9,252,0.06);
  --bloom-section-ink-int:  #5b21b6;
  --bloom-section-tint-ext: rgba(217,119,6,0.06);
  --bloom-section-ink-ext:  #92400e;
}

/* ============== BASE TYPE STYLES ============== */
.bloom-root,
.bloom-root * {
  box-sizing: border-box;
}
.bloom-root {
  font-family: var(--bloom-font-display);
  font-feature-settings: 'cv11', 'ss01';
  color: var(--bloom-ink-1);
  background: var(--bloom-cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.005em;
}

.bloom-h1     { font-size: 32px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; color: var(--bloom-ink-0); }
.bloom-h2     { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: var(--bloom-ink-0); }
.bloom-h3     { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; color: var(--bloom-ink-1); }
.bloom-kpi    { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; color: var(--bloom-ink-0); font-variant-numeric: tabular-nums; }
.bloom-body   { font-size: 14px; font-weight: 400; line-height: 1.55; color: var(--bloom-ink-2); }
.bloom-meta   { font-size: 12px; font-weight: 500; line-height: 1.4; color: var(--bloom-ink-3); }
.bloom-eyebrow{ font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bloom-ink-3); }
.bloom-num    { font-variant-numeric: tabular-nums; }
.bloom-mono   { font-family: var(--bloom-font-mono); }

/* ============== SHARED UTILITIES ============== */
.bloom-card {
  background: var(--bloom-paper);
  border-radius: var(--bloom-r-card);
  box-shadow: var(--bloom-shadow-card);
  padding: 24px 28px;
}
.bloom-card-tight { padding: 20px 22px; }

.bloom-card-hover {
  transition: box-shadow var(--bloom-dur-base) var(--bloom-ease),
              transform var(--bloom-dur-base) var(--bloom-ease);
}
.bloom-card-hover:hover {
  box-shadow: var(--bloom-shadow-card-hover);
  transform: translateY(-2px);
}

/* The pastel KPI tile — assign tint via inline style. */
.bloom-kpi-tile {
  position: relative;
  border-radius: var(--bloom-r-card);
  padding: 22px 22px 24px;
  overflow: hidden;
  min-height: 138px;
}
.bloom-kpi-tile::after {
  content: '';
  position: absolute;
  bottom: -40px;
  right: -30px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--bloom-tile-orb);
  pointer-events: none;
}

/* Hero gradient panel */
.bloom-hero {
  position: relative;
  border-radius: var(--bloom-r-card);
  background: var(--bloom-grad-hero);
  padding: 24px 28px;
  overflow: hidden;
}
.bloom-hero::after {
  content: '';
  position: absolute;
  top: -60px;
  right: -40px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: var(--bloom-hero-orb);
  filter: blur(28px);
  pointer-events: none;
}

/* Pill button — used for primary/secondary/ghost via .primary / .secondary / .ghost */
.bloom-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: var(--bloom-r-pill);
  font-family: var(--bloom-font-display);
  font-size: 13px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background var(--bloom-dur-base) var(--bloom-ease),
              box-shadow var(--bloom-dur-base) var(--bloom-ease),
              color var(--bloom-dur-base) var(--bloom-ease);
  text-decoration: none;
  white-space: nowrap;
}
.bloom-btn.primary {
  background: var(--bloom-brand-500);
  color: white;
  box-shadow: var(--bloom-shadow-purple);
}
.bloom-btn.primary:hover { background: var(--bloom-brand-600); }
.bloom-btn.primary:active { background: var(--bloom-brand-700); }

.bloom-btn.gradient {
  background: var(--bloom-grad-button);
  color: white;
  box-shadow: var(--bloom-shadow-purple);
}

.bloom-btn.secondary {
  background: var(--bloom-paper);
  color: var(--bloom-ink-1);
  border: 1.5px solid var(--bloom-line);
  box-shadow: none;
}
.bloom-btn.secondary:hover { background: var(--bloom-shell); }

.bloom-btn.ghost {
  background: transparent;
  color: var(--bloom-ink-2);
  box-shadow: none;
}
.bloom-btn.ghost:hover { background: var(--bloom-shell); color: var(--bloom-ink-1); }

.bloom-btn.compact { padding: 7px 14px; font-size: 12px; font-weight: 600; }

/* Pill (status / role / chip) */
.bloom-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--bloom-r-pill);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Inline chip used inside KPI subs */
.bloom-chip-inline {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: var(--bloom-r-pill);
  background: rgba(255, 255, 255, 0.7);
  font-size: 11px;
  font-weight: 600;
}

/* Reduced-motion override */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
 * DARK MODE — Bloom Nocturne · v1.0
 * --------------------------------------------------------------------------
 * Activated by [data-theme="dark"] on <html>. The brand purple (#7f09fc) is
 * preserved for FILLS (buttons, gradient KPI tiles, nav active state, avatars)
 * exactly as in light mode; for TEXT and small accents on dark surfaces it
 * brightens to a lighter violet (--bloom-brand-on-surface) so it stays legible.
 *
 * Three surface undertones share one tint/semantic/accent layer and differ
 * only in their neutral ramp:
 *   [data-surface="violet"]  — ink leans into the brand (default, most "Bloom")
 *   [data-surface="warm"]    — keeps the cream warmth, just dark (cozy)
 *   [data-surface="slate"]   — cool neutral (conventional dashboard dark)
 *
 * Surfaces are layered for elevation: app bg (cream) < sidebar/nested (shell)
 * < card (paper), so cards read as lifted, mirroring white-on-cream in light.
 * ====================================================================== */

:root[data-theme="dark"] {
  color-scheme: dark;

  /* ---- Brand: fills unchanged, text/accents brightened ---- */
  --bloom-brand-100: #2a1a45;   /* deep chip bg */
  --bloom-brand-50:  #1f1533;
  --bloom-brand-on-surface: #c9adfb;

  /* ---- Pastel tints → deep, muted, light ink (work as chips AND tiles) ---- */
  --bloom-lavender:    #2f2550;  --bloom-lavender-2: #3d3068;  --bloom-lavender-ink:#d8c8f8;
  --bloom-lilac:       #2e2350;  --bloom-lilac-2:    #3a2c63;  --bloom-lilac-ink:   #ddccf9;
  --bloom-mint:        #15342a;  --bloom-mint-2:     #1e4a3b;  --bloom-mint-ink:    #74e3bf;
  --bloom-sky:         #112f40;  --bloom-sky-2:      #18465b;  --bloom-sky-ink:     #79cef6;
  --bloom-sand:        #352712;  --bloom-sand-2:     #4a3818;  --bloom-sand-ink:    #f0c674;

  /* ---- Semantic ---- */
  --bloom-success:    #34d399;  --bloom-success-bg: #15342a;
  --bloom-danger:     #fb7185;  --bloom-danger-bg:  #3a1d24;
  --bloom-warning:    #fbbf24;  --bloom-warning-bg: #352712;
  --bloom-info:       #60a5fa;  --bloom-info-bg:    #112f40;

  --bloom-pos: #34d399;
  --bloom-mid: #fbbf24;
  --bloom-neg: #fb7185;
  --bloom-ink-indigo: #a5b4fc;

  /* ---- Decorative overlays toned for dark ---- */
  --bloom-tile-orb:   rgba(255,255,255,0.05);
  --bloom-hero-orb:   rgba(127,9,252,0.22);
  --bloom-skeleton-hi: rgba(255,255,255,0.07);
  --bloom-hover-soft:  rgba(255,255,255,0.05);
  --bloom-hover-border:#4a3a6b;
  --bloom-grid:        rgba(255,255,255,0.06);

  /* ---- Icon-chip gradients (deep, match deep tints) ---- */
  --bloom-chip-lavender: linear-gradient(135deg, #342754 0%, #281d42 100%); /* @kind color */
  --bloom-chip-mint:     linear-gradient(135deg, #183c30 0%, #112820 100%); /* @kind color */
  --bloom-chip-sand:     linear-gradient(135deg, #3c2d12 0%, #2a1f0c 100%); /* @kind color */
  --bloom-chip-sky:      linear-gradient(135deg, #153849 0%, #0f2733 100%); /* @kind color */
  --bloom-chip-lilac:    linear-gradient(135deg, #312456 0%, #241a3f 100%); /* @kind color */

  /* ---- Result-count chip ---- */
  --bloom-chip-grad:   linear-gradient(135deg, #2a1a45 0%, #1f1533 100%); /* @kind color */
  --bloom-chip-border: #3a2f57;

  /* ---- Referral card · internal (purple) ---- */
  --rc-int-stripe:    #b794f4;
  --rc-int-bg:        linear-gradient(180deg, #2a2043 0%, var(--bloom-paper) 62%);
  --rc-int-border:    #3a2f57;
  --rc-int-header:    rgba(127,9,252,0.20);
  --rc-int-badge-bg:  rgba(168,85,247,0.22);
  --rc-int-badge-ink: #cbb2f7;
  --rc-int-status-bg: rgba(127,9,252,0.16);
  --rc-int-status-ink:#cbb2f7;
  --rc-int-footer:    rgba(127,9,252,0.10);

  /* ---- Referral card · external (amber) ---- */
  --rc-ext-stripe:    #f0b65a;
  --rc-ext-bg:        linear-gradient(180deg, #33270f 0%, var(--bloom-paper) 62%);
  --rc-ext-border:    #4a3818;
  --rc-ext-header:    rgba(217,119,6,0.20);
  --rc-ext-badge-bg:  rgba(245,158,11,0.20);
  --rc-ext-badge-ink: #f0c674;
  --rc-ext-status-bg: rgba(217,119,6,0.16);
  --rc-ext-status-ink:#f0c674;
  --rc-ext-footer:    rgba(217,119,6,0.10);

  /* ---- Detail-modal section tints ---- */
  --bloom-section-tint-int: rgba(127,9,252,0.16);
  --bloom-section-ink-int:  #cbb2f7;
  --bloom-section-tint-ext: rgba(217,119,6,0.16);
  --bloom-section-ink-ext:  #f0c674;

  /* ---- Hero gradient → deep purple wash ---- */
  --bloom-grad-hero: linear-gradient(120deg, #241a3a 0%, #1b1430 55%, #2a1f46 100%); /* @kind color */

  /* ---- Shadows: deeper black, keep the purple glow ---- */
  --bloom-shadow-card:       0 1px 2px rgba(0, 0, 0, 0.5);
  --bloom-shadow-card-hover: 0 10px 26px -8px rgba(0, 0, 0, 0.66);
  --bloom-shadow-purple:     0 8px 22px -6px rgba(127, 9, 252, 0.55);
  --bloom-shadow-modal:      0 30px 60px -15px rgba(0, 0, 0, 0.72);
  --bloom-shadow-pop:        0 14px 30px -10px rgba(0, 0, 0, 0.6);
}

/* ===== Undertone · VIOLET (default) — ink leans into the brand ===== */
:root[data-theme="dark"],
:root[data-theme="dark"][data-surface="violet"] {
  --bloom-cream: #150f22;   /* app shell bg (darkest) */
  --bloom-shell: #1f1838;   /* sidebar / hover / nested */
  --bloom-paper: #261d40;   /* card surface (lifted) */
  --bloom-line:  #372d52;   /* hairline */

  --bloom-ink-0: #f8f4fd;   /* hero numerals / titles */
  --bloom-ink-1: #e7def4;   /* primary text */
  --bloom-ink-2: #b6abce;   /* secondary text */
  --bloom-ink-3: #867b9d;   /* meta text */
  --bloom-ink-4: #5d5478;   /* disabled / placeholder */
}

/* ===== Undertone · WARM — keeps the cream warmth, just dark ===== */
:root[data-theme="dark"][data-surface="warm"] {
  --bloom-cream: #1a130a;
  --bloom-shell: #271d10;
  --bloom-paper: #2e2215;
  --bloom-line:  #42351f;

  --bloom-ink-0: #fcf6ec;
  --bloom-ink-1: #efe2cf;
  --bloom-ink-2: #c1b094;
  --bloom-ink-3: #917f63;
  --bloom-ink-4: #655641;
}

/* ===== Undertone · SLATE — cool neutral (conventional) ===== */
:root[data-theme="dark"][data-surface="slate"] {
  --bloom-cream: #0c1018;
  --bloom-shell: #141b27;
  --bloom-paper: #18212f;
  --bloom-line:  #283242;

  --bloom-ink-0: #f2f6fb;
  --bloom-ink-1: #dde6f1;
  --bloom-ink-2: #a4b1c4;
  --bloom-ink-3: #768494;
  --bloom-ink-4: #4d5a6b;
}

/* Surface + text colors flip instantly between themes (no universal
 * transition — it janks on large trees and muddies screenshots). Individual
 * components keep their own hover/press transitions.
 *
 * During a theme/undertone flip we freeze ALL transitions for one frame
 * (via data-anim="off" on <html>). This sidesteps a browser quirk where an
 * inline `transition: all` gets stuck mid-animation when the background-color
 * it resolves comes from a custom property that just changed value. The
 * !important here beats the components' inline transitions. */
:root[data-anim="off"] *,
:root[data-anim="off"] *::before,
:root[data-anim="off"] *::after {
  transition: none !important;
}