/* ============================================================
   Marketing Tool — local styles
   Brand: Breezefree (#005373 primary)
   Accent: vibrant purple (#7c3aed) — distinct from Planning's green

   Load order (see index.html):
     1. /_family/family-tokens.css  — shared tokens (text/space/status/modal/anim)
     2. /_family/family-menu.css    — cog menu
     3. /_family/family-base.css    — shared chrome + components
     4. styles.css                  — THIS FILE: product-local accent, palette,
                                      text-size scale, view-internal styling

   2026-05-29 (rewire): bulk of this file moved to /_family/family-base.css.
   Only product-specific accent / palette / a11y overrides remain.
   ============================================================ */

:root {
  /* Brand (Breezefree) — local override of family token */
  --brand: #005373;
  --brand-rgb: 0, 83, 115;

  /* Marketing accent (purple) — distinguishes from Planning's teal accent */
  --accent: #7c3aed;
  --accent-soft: #ede9fe;
  --accent-ink: #ffffff;
  --accent-hover: #6d28d9;
}

/* Dark palette
 * Cross-family convention: Marketing toggles dark via the
 * html[data-palette="dark"] attribute (set by app.js). Planning toggles dark
 * via the html.palette-dark class. Both selectors are honoured here so shared
 * family components apply the same tokens regardless of which mechanism the
 * host app uses. New code SHOULD prefer data-palette (scales to N modes
 * without class explosion); the .palette-dark class is a compatibility shim. */
html[data-palette="dark"],
html.palette-dark {
  --bg: #0a1422;
  --surface: #11203a;
  --surface-2: #0d1a2e;
  --ink: #e7ecf3;
  --ink-muted: #b8c2d1;
  --ink-dim: #8a96a8;
  --line: #1f3458;
  --line-soft: #18294a;
  --brand: #2a8bb5;
  --accent-soft: #2a1f47;
}

/* Text size scales */
html[data-text-size="small"]  { --fs-body: 13px; --fs-sm: 11px; --fs-lg: 14px; }
html[data-text-size="medium"] { --fs-body: 14px; --fs-sm: 12px; --fs-lg: 16px; }
html[data-text-size="large"]  { --fs-body: 16px; --fs-sm: 13px; --fs-lg: 18px; }

/* Dark palette — header background override.
   Default --brand (#2a8bb5) under dark mode gave white-on-brand contrast
   ~3.85:1, below WCAG AA 4.5:1 for normal text. Force a deeper teal here
   without disturbing --brand elsewhere (links, icons, borders rely on it). */
html[data-palette="dark"] .header,
html.palette-dark .header {
  background: #0d3a52;
  border-bottom-color: #061f2e;
}

/* High contrast */
html.high-contrast {
  --line: #000000;
  --line-soft: #000000;
  --ink: #000000;
  --ink-muted: #000000;
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #ffffff;
}
html.high-contrast .header { background: #000; box-shadow: inset 0 -3px 0 0 #fff; }
html.high-contrast .subnav button.active { border-bottom-color: #000; color: #000; }
html.high-contrast .subnav button { color: #000; }
html[data-palette="dark"].high-contrast,
html.palette-dark.high-contrast {
  --ink: #ffffff;
  --bg: #000000;
  --surface: #000000;
  --surface-2: #000000;
}

/* Marketing-only mobile tweak — customer switcher cap.
   (Rest of the mobile pattern lives in family-base.css.) */
@media (max-width: 768px) {
  #customer-switcher { max-width: 140px !important; min-height: 44px; }
}

/* ── Shared "Not subscribed" panel — consistent across Today/Businesses/Campaigns ── */
.mkt-not-subscribed{background:var(--surface,#fff);border:1px dashed var(--line,#d8d6d0);border-radius:var(--radius,10px);padding:48px 24px;text-align:center;max-width:520px;margin:24px auto;}
.mkt-not-subscribed h3{margin:0 0 6px;font-size:18px;color:var(--brand,#005373);}
.mkt-not-subscribed p{margin:0 0 22px;color:var(--ink-muted,#666);font-size:14px;}
.mkt-not-subscribed button{background:var(--brand,#005373);color:#fff;border:none;padding:10px 20px;border-radius:8px;font-weight:600;font-size:14px;cursor:pointer;font-family:inherit;transition:opacity var(--dur-hover,140ms) var(--ease-standard,cubic-bezier(0.4,0,0.2,1)),background var(--dur-hover,140ms) var(--ease-standard,cubic-bezier(0.4,0,0.2,1));}
.mkt-not-subscribed button:hover{opacity:.9;}
.mkt-not-subscribed button:disabled{opacity:.5;cursor:default;}