/* ============================================================
   Energie Solutions — Twenty CRM Theme Override
   Source: Energie Solutions Design System (colors_and_type.css)

   SINGLE SOURCE OF TRUTH for the runtime brand accent + logo.
   Loaded via a <link> in index.html AFTER the app CSS, so these
   .light / .dark { --t-accent-* } blocks win over twenty-ui's
   theme CSS by source order — the true brand crimson #B3122B
   lands here, not in the upstream token files.

   Deliberately the ONLY branded CSS layer: the upstream theme
   CSS (twenty-ui + twenty-ui-deprecated theme-{light,dark}.css)
   is kept at upstream values to avoid merge conflicts, since it
   is fully overridden here at runtime. The JS theme object
   (AccentLight.ts / AccentDark.ts) is the companion source for
   the handful of components that read theme.accent.* directly;
   CSS variables cannot reach those.
   ============================================================ */

/* Local Inter Variable font — replaces Google Fonts CDN */
@font-face {
  font-family: "Inter";
  src: url("/brand/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/brand/fonts/InterVariable-Italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* Inter Display — tighter apertures for headlines */
@font-face { font-family: "Inter Display"; src: url("/brand/fonts/InterDisplay-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Display"; src: url("/brand/fonts/InterDisplay-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Display"; src: url("/brand/fonts/InterDisplay-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Display"; src: url("/brand/fonts/InterDisplay-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* ── TWENTY THEME VARIABLE OVERRIDES ─────────────────────── */

.light {
  /* Accent scale — Crimson #B3122B replaces Indigo */
  --t-accent-primary: #f8d5db;
  --t-accent-secondary: #f8d5db;
  --t-accent-tertiary: #fce8ec;
  --t-accent-quaternary: #fef4f6;
  --t-accent-accent3570: #c4364d;
  --t-accent-accent4060: #c4364d;
  --t-accent-accent1: #fff8f9;
  --t-accent-accent2: #fef4f6;
  --t-accent-accent3: #fce8ec;
  --t-accent-accent4: #f8d5db;
  --t-accent-accent5: #f2bcc5;
  --t-accent-accent6: #e99daa;
  --t-accent-accent7: #db7888;
  --t-accent-accent8: #c4364d;
  --t-accent-accent9: #B3122B;
  --t-accent-accent10: #96111F;
  --t-accent-accent11: #B3122B;
  --t-accent-accent12: #3d0610;

  /* Secondary button text — Energie Blue (trust) */
  --t-buttons-secondary-text-color: #2167C4;

  /* Background — warm dark */
  --t-background-inverted-primary: #12100E;
  --t-background-inverted-secondary: #282424;
  --t-background-primary-inverted: #12100E;
  --t-background-primary-inverted-hover: #282424;

  /* Border — Carolina Blue accent */
  --t-border-color-blue: rgba(75, 156, 211, 0.4);
}

/* Dark mode — same accent scale, adjusted for dark backgrounds */
.dark {
  --t-accent-primary: #3d1018;
  --t-accent-secondary: #3d1018;
  --t-accent-tertiary: #2e0c12;
  --t-accent-quaternary: #1f080c;
  --t-accent-accent3570: #c4364d;
  --t-accent-accent4060: #c4364d;
  --t-accent-accent1: #1a0608;
  --t-accent-accent2: #1f080c;
  --t-accent-accent3: #2e0c12;
  --t-accent-accent4: #3d1018;
  --t-accent-accent5: #4f1520;
  --t-accent-accent6: #6e1f2e;
  --t-accent-accent7: #8f2a3d;
  --t-accent-accent8: #c4364d;
  --t-accent-accent9: #B3122B;
  --t-accent-accent10: #d4354e;
  --t-accent-accent11: #e8677a;
  --t-accent-accent12: #fce8ec;

  --t-buttons-secondary-text-color: #4B9CD3;
}

/* ── LOGO — BOLT PNG ─────────────────────────────────────── */

[data-testid="NavigationHeader"] img[alt*="Logo"],
[data-testid="NavigationHeader"] img[alt*="logo"],
[data-testid="NavigationHeader"] svg,
[class*="StyledLogo"] img,
[class*="StyledLogo"] svg {
  display: none !important;
}

.light [class*="StyledLogo"] {
  background: url('/brand/energie-bolt-black.png') no-repeat center !important;
  background-size: contain !important;
  min-width: 28px;
  min-height: 28px;
}

.dark [class*="StyledLogo"] {
  background: url('/brand/energie-bolt-white.png') no-repeat center !important;
  background-size: contain !important;
  min-width: 28px;
  min-height: 28px;
}

/* ── SELECTION ───────────────────────────────────────────── */
::selection {
  background: rgba(179, 18, 43, 0.15) !important;
}