/* Hadrius dashboard look for hadri.us pages (v2.1 draft, 2026-10-26).
   Tokens copied verbatim from hadrius_internal_dashboards apps/bdr_prospecting/styles/tokens.css, including its
   dark palette (class "dark" on <html>, set by the theme toggle in the injected nav). Load AFTER a page's own <style>. */
:root {
  /* ── Brand ── */
  --h-brand-purple-dark: #271e5a;
  --h-brand-purple: #4c3dab;
  --h-brand-purple-bd: #dfdbf9;
  --h-brand-purple-dim: #efecff;
  --h-primary-dim: #f4f3fd;

  /* ── Neutral ── */
  --h-secondary-foreground: #18181b;
  --h-accent-foreground: #27272a;
  --h-text-primary: #323232;
  --h-neutral-dim-dark: #575758;
  --h-text-muted: #76767a;
  --h-border: #e4e4e7;
  --h-neutral-dim-light: #ececee;
  --h-muted: #f4f4f5;
  --h-bg: #fafafa;
  --h-hover: #fafafa;
  --h-white: #ffffff;
  /* Cards, rows and panels. White here; lifted dark gray in dark mode. */
  --h-surface: #ffffff;

  /* ── Sidebar ── */
  --h-sidebar-foreground: #3f3f46;
  --h-sidebar-border: #e4e4e7;
  --h-sidebar-accent: #f4f4f5;
  --h-sidebar-bg: #fafafa;

  /* ── Semantic ── */
  --h-green: #047857;
  --h-success-dim: #e6f1ee;
  --h-green-bg: #ecfdf5;
  --h-warn-text: #451a03;
  /* Warning numbers and headlines (amber-700). */
  --h-warn-strong: #b45309;
  --h-warn: #f59e0b;
  --h-warn-dim: #fdecce;
  --h-warn-bg: #fff7ed;
  --h-error: #d81b2b;
  --h-error-dim: #fee2e2;
  --h-error-bg: #fef2f2;
  --h-info: #1d4ed8;
  --h-info-dim: #e8edfb;
  --h-info-bg: #eff6ff;

  /* ── Focus ── */
  --h-ring: rgba(58, 46, 135, 0.85);
  --h-ring-offset: #ffffff;

  /* ── Border Radius ── */
  --h-radius-none: 0px;
  --h-radius-sm: 2px;
  --h-radius-default: 4px;
  --h-radius-md: 6px;
  --h-radius-lg: 8px;
  --h-radius-xl: 12px;
  --h-radius-2xl: 16px;
  --h-radius-3xl: 24px;
  --h-radius-4xl: 32px;
  --h-radius-full: 9999px;

  /* ── Shadows ── */
  --h-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --h-shadow-base: 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  --h-shadow-md: 0 2px 4px -1px rgba(0, 0, 0, 0.06), 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --h-shadow-lg: 0 4px 6px -2px rgba(0, 0, 0, 0.05), 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --h-shadow-xl: 0 10px 10px -5px rgba(0, 0, 0, 0.04), 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  --h-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
  --h-shadow-float: 0 0 10px -2px rgba(39, 30, 90, 0.03);

  /* ── Typography ── */
  --h-font-sans: "Satoshi", -apple-system, "Segoe UI", sans-serif;
  --h-text-sm: 14px;
  --h-leading-sm: 20px;
}

/*
 * Dark mode: set by the toggle in the page header (class "dark" on <html>).
 * Palette matches the Sales Dashboard's dark theme — dark gray, not pure black.
 * Both token sets are overridden: the --h-* tokens this app uses directly, and the
 * @1quantbase/ui HSL variables its buttons and tabs read.
 */
.dark {
  color-scheme: dark;

  --h-brand-purple-dark: #c9c1ff;
  --h-brand-purple: #9d90f5;
  --h-brand-purple-bd: #3a3366;
  --h-brand-purple-dim: #262046;
  --h-primary-dim: #1e1a38;

  --h-secondary-foreground: #f0f0f2;
  --h-accent-foreground: #e4e4e7;
  --h-text-primary: #d9d9de;
  --h-neutral-dim-dark: #b4b4bb;
  --h-text-muted: #909096;
  --h-border: #2f2f33;
  --h-neutral-dim-light: #26262a;
  --h-muted: #26262a;
  --h-bg: #111113;
  --h-hover: #1b1b1e;
  --h-white: #1b1b1e;
  --h-surface: #1b1b1e;

  --h-sidebar-foreground: #d9d9de;
  --h-sidebar-border: #2f2f33;
  --h-sidebar-accent: #26262a;
  --h-sidebar-bg: #151517;

  --h-green: #34d399;
  --h-success-dim: #0f3a2a;
  --h-green-bg: #0b2c20;
  --h-warn-text: #fde68a;
  --h-warn-strong: #fbbf24;
  --h-warn: #fbbf24;
  --h-warn-dim: #5c3d0a;
  --h-warn-bg: #2c1e06;
  --h-error: #f87171;
  --h-error-dim: #4a1a1a;
  --h-error-bg: #2d1010;
  --h-info: #93b4ff;
  --h-info-dim: #1c2847;
  --h-info-bg: #151f38;

  --h-ring: rgba(157, 144, 245, 0.85);
  --h-ring-offset: #111113;
  --h-shadow-float: 0 0 0 0 transparent;

  /* @1quantbase/ui (HSL triplets) */
  --background: 240 6% 7%;
  --foreground: 240 5% 94%;
  --card: 240 5% 11%;
  --card-foreground: 240 5% 94%;
  --popover: 240 5% 14%;
  --popover-foreground: 240 5% 94%;
  --primary: 248 84% 76%;
  --primary-light: 248 37% 20%;
  --primary-foreground: 240 6% 7%;
  --secondary: 240 5% 17%;
  --secondary-foreground: 240 5% 94%;
  --muted: 240 5% 17%;
  --muted-foreground: 240 3% 58%;
  --accent: 240 5% 17%;
  --accent-foreground: 240 5% 94%;
  --border: 240 5% 19%;
  --input: 240 5% 22%;
  --ring: 248 84% 76%;

  /*
   * @1quantbase/ui colors that are hard-coded hex rather than built on the variables
   * above, so they'd stay light in dark mode (a selected tab was white text on a
   * light-gray pill). Only the ones this app's buttons and tabs use.
   */
  --color-accent: #2a2a2e;
  --color-accent-foreground: #f0f0f2;
  --color-muted-foreground: #909096;
  --color-secondary-text: #909096;
  --color-neutral-dim-light: #26262a;
  --color-neutral-dim-dark: #b4b4bb;
  --color-primary-faint: #1e1a38;
  --color-primary-dim: #262046;
  --color-secondary-main-alt: #3a3366;
  --color-destructive-faint: #2d1010;
  --color-warning-faint: #2c1e06;
  --color-gray-700: #e4e4e7;
}

body {
  font-size: var(--h-text-sm);
  line-height: var(--h-leading-sm);
  font-weight: 500;
}

/* Hadrius DS text utility classes. Used by @1quantbase/auth components and app UI. */

.h-text-h1 {
  font-size: 30px;
  line-height: 36px;
  font-weight: 400;
  font-feature-settings: "ss03";
}
.h-text-h1-medium {
  font-size: 30px;
  line-height: 36px;
  font-weight: 500;
  font-feature-settings: "ss03";
}
.h-text-h1-bold {
  font-size: 30px;
  line-height: 36px;
  font-weight: 700;
  font-feature-settings: "ss03";
}

.h-text-h2 {
  font-size: 24px;
  line-height: 30px;
  font-weight: 400;
  font-feature-settings: "ss03";
}
.h-text-h2-medium {
  font-size: 24px;
  line-height: 30px;
  font-weight: 500;
  font-feature-settings: "ss03";
}
.h-text-h2-bold {
  font-size: 24px;
  line-height: 30px;
  font-weight: 700;
  font-feature-settings: "ss03";
}

.h-text-h3 {
  font-size: 20px;
  line-height: 28px;
  font-weight: 500;
  font-feature-settings: "ss03";
}
.h-text-h3-bold {
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  font-feature-settings: "ss03";
}

.h-text-h4 {
  font-size: 18px;
  line-height: 28px;
  font-weight: 500;
  font-feature-settings: "ss03";
}
.h-text-h4-bold {
  font-size: 18px;
  line-height: 28px;
  font-weight: 700;
  font-feature-settings: "ss03";
}

.h-text-p {
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  font-feature-settings: "ss03";
}
.h-text-p-bold {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  font-feature-settings: "ss03";
}

.h-text-sm {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  font-feature-settings: "ss03";
}
.h-text-sm-bold {
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  font-feature-settings: "ss03";
}

.h-text-xs {
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  font-feature-settings: "ss03";
}
.h-text-xs-bold {
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  font-feature-settings: "ss03";
}

:root {
  /* Legacy report variables (email-library palette) remapped onto dashboard tokens */
  --purple: var(--h-brand-purple);
  --purple-dark: var(--h-brand-purple-dark);
  --purple-light: var(--h-brand-purple-dim);
  --dark: var(--h-secondary-foreground);
  --mid: var(--h-text-muted);
  --light: var(--h-bg);
  --white: var(--h-white);
  --border: var(--h-border);
  --green: var(--h-green);
  --amber: var(--h-warn);
  --red: var(--h-error);
  --radius: var(--h-radius-xl);
}
body {
  font-family: var(--h-font-sans);
  color: var(--h-text-primary);
  background: var(--h-bg);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-feature-settings: "ss03"; color: var(--h-secondary-foreground); }
table { font-variant-numeric: tabular-nums; }
/* Shared building blocks (match the dashboards' tile + card pattern) */
.h-card, .h-tile {
  background: var(--h-surface); border: 1px solid var(--h-border); border-radius: var(--h-radius-xl);
  box-shadow: var(--h-shadow-float); padding: 20px;
}
a.h-tile:hover, .h-tile.is-link:hover { border-color: var(--h-brand-purple); }
.h-muted { color: var(--h-text-muted); }

/* sales.hadri.us lead capture: style only; the HubSpot form markup, IDs and scripts are untouched. */
body { background: var(--h-bg); color: var(--h-text-primary); font-family: var(--h-font-sans); padding-top: 44px; }
.event-tag { color: var(--h-text-muted); }
h1 { color: var(--h-secondary-foreground); }
.sub { color: var(--h-text-muted); }
/* The HubSpot embed renders its own light iframe; give it a light card so it reads as intended in dark mode too. */
.hs-form-frame {
  background: #ffffff; border: 1px solid var(--h-border); border-radius: var(--h-radius-xl);
  box-shadow: var(--h-shadow-float); padding: 20px; min-height: 120px;
}