/* ==========================================================
   PeakDigit Brand Override — injected via reverse proxy
   Applies to: Plane (hub.peakdigit.com), Metabase (insights.peakdigit.com)
   Survives ANY upstream app update — this file lives outside
   the Plane/Metabase containers entirely.
   Brand: #121212 / #000000 bg, #3B82F6 accent, Inter font
   ========================================================== */

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

:root {
  --peakdigit-bg: #121212;
  --peakdigit-bg-2: #000000;
  --peakdigit-accent: #3B82F6;
  --peakdigit-text: #EAEAEA;
  --peakdigit-muted: #7B7B7B;
}

html, body {
  font-family: 'Inter', -apple-system, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif !important;
}

/* ---- Generic accent color overrides (works across most SaaS UI CSS var conventions) ---- */
:root, [data-theme], .dark, .light {
  --color-primary-100: 219 234 254 !important;
  --color-primary-500: 59 130 246 !important;
  --color-primary-600: 59 130 246 !important;
  --primary: #3B82F6 !important;
  --accent: #3B82F6 !important;
  --brand-color: #3B82F6 !important;
}

/* ---- Plane's real design-token scale (verified via getComputedStyle on
   hub.peakdigit.com — Plane uses --brand-100..1200 oklch tokens, not the
   generic names above). Overriding these covers every button/link/focus
   ring/icon that Plane itself styles with its brand color. ---- */
:root {
  --brand-100: #f0f5fe !important;
  --brand-200: #e1ecfd !important;
  --brand-300: #c4d9fc !important;
  --brand-400: #93bafa !important;
  --brand-500: #629bf7 !important;
  --brand-600: #327cf5 !important;
  --brand-700: #0b63f3 !important;
  --brand-900: #084fc3 !important;
  --brand-1000: #073f9c !important;
  --brand-1100: #05337e !important;
  --brand-1200: #042761 !important;
  --brand-default: #3B82F6 !important;
  --bg-accent-primary: #3B82F6 !important;
  --bg-accent-primary-hover: #327cf5 !important;
  --bg-accent-primary-active: #0b63f3 !important;
  --bg-accent-subtle: #f0f5fe !important;
  --bg-accent-subtle-hover: #e1ecfd !important;
  --bg-accent-subtle-active: #c4d9fc !important;
  --txt-accent-primary: #3B82F6 !important;
  --txt-accent-secondary: #327cf5 !important;
  --txt-icon-accent-primary: #3B82F6 !important;
  --txt-icon-accent-subtle: #93bafa !important;
  --border-accent-strong: #3B82F6 !important;
  --border-accent-subtle: #c4d9fc !important;
  --border-color-accent-strong: #3B82F6 !important;
  --background-color-accent-primary: #3B82F6 !important;
  --background-color-accent-primary-hover: #327cf5 !important;
  --text-color-accent-primary: #3B82F6 !important;
}

/* Buttons / links / focus rings that use blue-ish default brand colors */
button[class*="primary"],
a[class*="primary"],
[class*="bg-primary"] {
  background-color: #3B82F6 !important;
  border-color: #3B82F6 !important;
}

a, .link, [class*="text-primary"] {
  color: #3B82F6;
}

/* ---- Metabase specific ---- */
.Nav, .AppBar, header[class*="AppBar"] {
  background-color: #121212 !important;
}
.brand-hover:hover, .text-brand, .bg-brand {
  color: #3B82F6 !important;
}
.bg-brand { background-color: #3B82F6 !important; }

/* Metabase login page: illustration + accent overrides */
svg [fill="#509EE3"], svg [fill="#88BF4D"], svg [fill="#98D9D9"], svg [fill="#A989C5"] {
  fill: #3B82F6 !important;
}
body { background-color: #EAEAEA !important; }
input:focus { border-color: #3B82F6 !important; box-shadow: 0 0 0 2px rgba(59,130,246,.15) !important; }
button[class*="Button--primary"], .Button--primary {
  background-color: #3B82F6 !important;
  border-color: #3B82F6 !important;
}

/* Hide native app wordmark text where present so PeakDigit favicon/branding leads */
[data-testid="main-logo"] svg,
.Icon.Icon-9,
img[src*="logo.svg"] {
  filter: none;
}

/* ---- Plane specific ---- */
[class*="bg-custom-primary"] {
  background-color: #3B82F6 !important;
}
[class*="text-custom-primary"] {
  color: #3B82F6 !important;
}
.sidebar, [class*="sidebar"] {
  background-color: #121212 !important;
}