/* AdvisorPPC brand tokens — single source of truth for the connector UI.
 *
 * Exact palette from the advisorppc.com frontend. Linked AFTER app.css in
 * base.html so these :root values override the connector's legacy warm/coral
 * palette in one place — every page that extends base.html adopts the brand
 * (topnav, signup, dashboard_billing, …). The standalone /pricing page links
 * this file directly.
 */
:root {
  /* Canonical brand tokens (advisorppc.com). */
  --paper: #ffffff;
  --ink: #000000;
  --brand-muted: #706f68;
  --brand-line: #e8e8e1;
  --card: #fbfaf7;
  --elevated: #f4f2ec;
  --pos: #1dbf73;
  --brand: #111111;
  --on-accent: #ffffff;

  /* Map the connector's legacy design-system vars onto the brand tokens so the
   * existing components restyle without per-component edits. */
  --bg: var(--paper);
  --surface: var(--paper);
  --sidebar-bg: var(--elevated);
  --sidebar-active: var(--paper);
  --muted: var(--brand-muted);
  --soft: #94918a;
  --line: var(--brand-line);
  --line-strong: #d9d9d1;
  --accent: var(--brand);
  --accent-hover: #000000;
  --accent-ink: var(--on-accent);
  --accent-soft: var(--elevated);
  --ok: var(--pos);
  --ok-soft: #e8f8ef;
}

/* Canonical AdvisorPPC logo lockup used in the app bar / topnav / auth card. */
.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.brand-logo {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: block;
  flex: 0 0 auto;
}
.brand-wordmark {
  font-size: 18px;
  font-weight: 780;
  letter-spacing: -0.035em;
  line-height: 1;
}
.brand-wordmark strong {
  color: var(--pos);
  font-weight: 800;
}
.app-bar-brand .brand-logo { width: 24px; height: 24px; border-radius: 6px; }
.app-bar-brand .brand-wordmark { font-size: 16px; }
.auth-brand {
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
}
.auth-brand .brand-logo { width: 36px; height: 36px; border-radius: 9px; }
.auth-brand .brand-wordmark { font-size: 22px; }

/* ==========================================================================
   DARK MODE — black / grey / green / silver
   ==========================================================================
   The whole UI is driven by the tokens above, so a dark theme is a token
   swap: no component rules are duplicated. Three states, deliberately:

     :root                      -> light (defined above)
     @media (prefers-color-scheme: dark) :root:not([data-theme="light"])
                                -> follows the OS when the user has not chosen
     :root[data-theme="dark"]   -> explicit choice always wins

   The guard on the media query is what lets the toggle override the OS in
   BOTH directions. base.html sets data-theme from localStorage before paint,
   so there is no flash of the wrong theme.

   Green (--pos) is the single accent. Greys/silvers carry structure; pure
   black is reserved for the brand tile, never for a dark page background
   (#0b0d0c reads as black but keeps text edges from vibrating).
   ========================================================================== */

:root {
  color-scheme: light;
  /* Tokens the base sheet hardcoded — needed so dark mode can move them. */
  --hover-bg: var(--elevated);
  --ok-line: #b8e6cd;
  --warn-line: #ecdfb6;
  --danger-line: #e8c7c7;
  --shadow-color: 0 0 0;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --paper: #1e1e1e;
    --ink: #ececec;
    --brand-muted: #a0a0a0;
    --brand-line: #303030;
    --card: #212121;
    --elevated: #2a2a2a;
    --pos: #1dbf73;
    --brand: #ececec;
    --on-accent: #141414;

    --bg: #181818;
    --surface: var(--card);
    --sidebar-bg: #171717;
    --sidebar-active: var(--elevated);
    --muted: var(--brand-muted);
    --soft: #7a7a7a;
    --line: var(--brand-line);
    --line-strong: #414141;
    --accent: #ececec;
    --accent-hover: #ffffff;
    --accent-ink: #141414;
    --accent-soft: #2a2a2a;
    --ok: #1dbf73;
    --ok-soft: #12251b;
    --ok-line: #1f4a34;
    --warn: #e0b355;
    --warn-soft: #2a2312;
    --warn-line: #4a3d1c;
    --danger: #f08a8a;
    --danger-soft: #2b1717;
    --danger-line: #4d2626;
    --info: #8ab4d8;
    --info-soft: #14212b;

    --hover-bg: #2a2a2a;
    --shadow-color: 0 0 0;
  }
}

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

  --paper: #1e1e1e;
  --ink: #ececec;
  --brand-muted: #a0a0a0;
  --brand-line: #303030;
  --card: #212121;
  --elevated: #2a2a2a;
  --pos: #1dbf73;
  --brand: #ececec;
  --on-accent: #141414;

  --bg: #181818;
  --surface: var(--card);
  --sidebar-bg: #171717;
  --sidebar-active: var(--elevated);
  --muted: var(--brand-muted);
  --soft: #7a7a7a;
  --line: var(--brand-line);
  --line-strong: #414141;
  --accent: #ececec;
  --accent-hover: #ffffff;
  --accent-ink: #141414;
  --accent-soft: #2a2a2a;
  --ok: #1dbf73;
  --ok-soft: #12251b;
  --ok-line: #1f4a34;
  --warn: #e0b355;
  --warn-soft: #2a2312;
  --warn-line: #4a3d1c;
  --danger: #f08a8a;
  --danger-soft: #2b1717;
  --danger-line: #4d2626;
  --info: #8ab4d8;
  --info-soft: #14212b;

  --hover-bg: #2a2a2a;
}

/* The brand tile is a black square in both themes; on a dark page it needs a
   hairline so it does not dissolve into the background. */
:root[data-theme="dark"] .brand-logo,
:root:not([data-theme="light"]) .brand-logo {
  box-shadow: 0 0 0 1px var(--line);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .brand-logo { box-shadow: none; }
}

/* Google's sign-in button must keep Google's own light styling in every theme
   (brand requirement), so pin it rather than let the tokens repaint it. */
:root[data-theme="dark"] .google-login-btn,
:root:not([data-theme="light"]) .google-login-btn {
  background: #ffffff;
  color: #1f1f1f;
  border-color: #dadce0;
}

/* Theme toggle control (rendered in the app bar and on the auth card). */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap, 44px);
  height: var(--tap, 44px);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  border-radius: var(--radius-sm, 6px);
  cursor: pointer;
}
.theme-toggle:hover { color: var(--ink); background: var(--hover-bg); }
.theme-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: block; }
}


/* Auth pages have no app bar, so the toggle sits in the card's top row. Kept
   in normal flow deliberately: a floating control on a phone either collides
   with the notch or with the card, and the negative margin pulls the brand
   lockup back up so the card keeps its original rhythm. */
.auth-theme-toggle {
  display: flex;
  justify-content: flex-end;
  margin: calc(var(--sp-3) * -1) calc(var(--sp-2) * -1) calc(var(--sp-3) * -1) 0;
}