/*
 * Public marketing site — site chrome and design tokens (PROKURIO-OWNED).
 *
 * ONE of three ownership-scoped stylesheets split out of the former single
 * public.css (PRO-4814). All three are linked, in this order, by
 * marketing/base_public.html:
 *
 *     public-chrome.css   site chrome + design tokens   PROKURIO
 *     public-prose.css    blog article typography       PROKURIO
 *     public-pages.css    marketing page components     AGENCY
 *
 * The split exists so the external marketing agency can own the page
 * components without being able to alter the blog or the site chrome. Keep the
 * boundary honest: a rule belongs to the file that owns the thing it styles,
 * not to the file it is most convenient to add it to.
 *
 * THIS FILE IS PROKURIO-OWNED. It is mirrored read-only into the
 * marketing-site repo so the agency's local preview renders faithfully; their CI
 * rejects any PR that modifies it.
 *
 * Contents: the --aif-* token block (mirrored verbatim from
 * apps/nextgen/static/nextgen/css/ai_forecaster.css, the design system's single
 * source of truth), the html/body base, shared layout helpers, the button
 * scale, the shared page chassis, and the branded error pages.
 *
 * The header and footer are NOT here (PRO-5506). The agency owns them outright
 * now: their markup lives in marketing/components/_site_header.html and
 * _site_footer.html, and every .pw-nav / .pw-footer rule lives in
 * public-pages.css. Do not reintroduce one here — the tokens above are what
 * those rules resolve their colours through, and that is the whole dependency.
 *
 * Brand strong blue (--aif-accent, #12509b) is the ONE primary action colour;
 * exactly one primary per view. Light tints (gold/teal/lavender/grey-blue) may
 * only appear as fills/stripes with dark text, never as text/links on white.
 * This token block is the ONLY place raw hex is allowed — every rule beyond it,
 * in all three files, resolves colour through a var(--aif-*).
 */

:root {
  /* Surfaces */
  --aif-bg: #f5f6f8;
  --aif-surface: #ffffff;
  --aif-surface-hover: #f0f1f4;
  --aif-border: #e2e4ea;
  --aif-border-light: #d1d4dc;

  /* Text */
  --aif-text: #1a1d27;
  --aif-text-muted: #5c6070;
  --aif-text-dim: #8b90a0;

  /* Primary action — brand strong blue */
  --aif-accent: #12509b;
  --aif-accent-hover: #0e417e;
  --aif-accent-soft: rgba(18, 80, 155, 0.08);
  --aif-accent-glow: rgba(18, 80, 155, 0.28);
  --aif-accent-chip: rgba(18, 80, 155, 0.1);
  --aif-on-accent: #ffffff;

  /* Status */
  --aif-green: #16a34a;
  --aif-amber: #d97706;
  --aif-rose: #e11d48;

  /* Brand secondary palette (sanctioned multi-hue accents) */
  --aif-brand-steel: #276aa0;
  --aif-brand-navy: #253d71;
  --aif-sky: #3883ce;
  --aif-ink: #001d3a;
  --aif-teal: #31d0cd;
  --aif-lavender: #9da2eb;
  --aif-gold: #ffcc72;
  --aif-orange: #e85626;
  --aif-grey-blue: #cfd7dc;

  /* Deep tints — DARK glyph colours for use ON a light teal/gold chip. The
     light --aif-teal / --aif-gold tints must never be text on white (legibility
     rule); these deep variants are the readable-on-tint text/icon partners. */
  --aif-teal-deep: #0e8f8c;
  --aif-gold-deep: #9a6b00;

  /* Second surface tint (panels-within-cards, assistant chrome bar). */
  --aif-surface-2: #f5f7fa;
  /* Ink is a DARK SURFACE token (footer / inverted band bg) — it stays dark in
     both themes; do NOT flip it. Strong text uses --aif-text (which flips). */

  /* Width tiers */
  --aif-width-narrow: 720px;
  --aif-width-medium: 1100px;
  --aif-width-wide: 1600px;

  /* Radius */
  --aif-radius-sm: 8px;
  --aif-radius: 12px;
  --aif-radius-lg: 16px;

  /* Marketing-local scale */
  --pw-shadow-sm: 0 1px 2px rgba(0, 29, 58, 0.06), 0 1px 3px rgba(0, 29, 58, 0.08);
  --pw-shadow: 0 4px 12px rgba(0, 29, 58, 0.08);
  --pw-shadow-lg: 0 2px 4px rgba(16, 26, 48, 0.06), 0 30px 60px -22px rgba(16, 26, 48, 0.28);
  --pw-space: 24px;
  --pw-gutter: clamp(16px, 4vw, 40px);
  --pw-mono: "SF Mono", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;

  /* Site font. The ONE place the public site's body typeface is named, so
     that changing it is a one-line override rather than a hunt through
     three stylesheets. The default is the stack `body` carried inline
     before PRO-5503 — nothing renders differently today.

     public-pages.css is agency-owned and loads LAST, so the agency can
     redeclare this variable there (on `body`, not in a `:root` block —
     tokens stay Prokurio's, which
     test_design_tokens_are_defined_only_in_the_chrome_stylesheet enforces)
     and self-host the face under static/marketing/fonts/. */
  --pw-font-sans:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/*
 * Dark theme — mirrors the --aif-* token pattern from the nextgen design
 * system / the approved home concept. Auto-activates from the OS preference and
 * is overridable by a data-theme stamp on :root. Every surface rule resolves
 * colour through a token, so flipping the values below re-themes the whole
 * public surface. --aif-ink stays a DARK surface token in both themes.
 */
@media (prefers-color-scheme: dark) {
  :root {
    --aif-bg: #080d18;
    --aif-surface: #0f1626;
    --aif-surface-2: #131c30;
    --aif-surface-hover: #16203a;
    --aif-border: #222c44;
    --aif-border-light: #2c3860;
    --aif-text: #eaeef6;
    --aif-text-muted: #a3abc2;
    --aif-text-dim: #6f7893;
    --aif-accent: #3d82db;
    --aif-accent-hover: #5a97e6;
    --aif-accent-soft: rgba(61, 130, 219, 0.12);
    --aif-accent-chip: rgba(61, 130, 219, 0.18);
    --aif-accent-glow: rgba(61, 130, 219, 0.3);
    --aif-teal-deep: #31d0cd;
    --aif-gold-deep: #ffcc72;
    --pw-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.4);
    --pw-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    --pw-shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.4), 0 40px 80px -28px rgba(0, 0, 0, 0.7);
  }
}

:root[data-theme="dark"] {
  --aif-bg: #080d18;
  --aif-surface: #0f1626;
  --aif-surface-2: #131c30;
  --aif-surface-hover: #16203a;
  --aif-border: #222c44;
  --aif-border-light: #2c3860;
  --aif-text: #eaeef6;
  --aif-text-muted: #a3abc2;
  --aif-text-dim: #6f7893;
  --aif-accent: #3d82db;
  --aif-accent-hover: #5a97e6;
  --aif-accent-soft: rgba(61, 130, 219, 0.12);
  --aif-accent-chip: rgba(61, 130, 219, 0.18);
  --aif-accent-glow: rgba(61, 130, 219, 0.3);
  --aif-teal-deep: #31d0cd;
  --aif-gold-deep: #ffcc72;
  --pw-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.4);
  --pw-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  --pw-shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.4), 0 40px 80px -28px rgba(0, 0, 0, 0.7);
}

/* Explicit light stamp wins back over the OS-dark default. */
:root[data-theme="light"] {
  --aif-bg: #f5f6f8;
  --aif-surface: #ffffff;
  --aif-surface-2: #f5f7fa;
  --aif-surface-hover: #f0f1f4;
  --aif-border: #e2e4ea;
  --aif-border-light: #d1d4dc;
  --aif-text: #1a1d27;
  --aif-text-muted: #5c6070;
  --aif-text-dim: #8b90a0;
  --aif-accent: #12509b;
  --aif-accent-hover: #0e417e;
  --aif-accent-soft: rgba(18, 80, 155, 0.08);
  --aif-accent-chip: rgba(18, 80, 155, 0.1);
  --aif-accent-glow: rgba(18, 80, 155, 0.28);
  --aif-teal-deep: #0e8f8c;
  --aif-gold-deep: #9a6b00;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--pw-font-sans);
  color: var(--aif-text);
  background: var(--aif-surface);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--aif-accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

h1,
h2,
h3,
h4 {
  color: var(--aif-text);
  line-height: 1.2;
  margin: 0 0 0.5em;
  font-weight: 700;
}

h1 {
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  letter-spacing: -0.02em;
}

h2 {
  font-size: clamp(1.6rem, 3vw, 2.35rem);
  letter-spacing: -0.01em;
}

h3 {
  font-size: 1.2rem;
}

p {
  margin: 0 0 1em;
}

/* ── Layout helpers ─────────────────────────────────────────────── */
.pw-container {
  width: 100%;
  max-width: var(--aif-width-medium);
  margin-inline: auto;
  padding-inline: var(--pw-gutter);
}

.pw-container--wide {
  max-width: var(--aif-width-wide);
}

.pw-container--narrow {
  max-width: var(--aif-width-narrow);
}

.pw-section {
  padding-block: clamp(48px, 8vw, 96px);
}

.pw-section--tint {
  background: var(--aif-bg);
}

.pw-section--ink {
  background: var(--aif-ink);
  color: var(--aif-on-accent);
}

.pw-section--ink h1,
.pw-section--ink h2,
.pw-section--ink h3 {
  color: var(--aif-on-accent);
}

.pw-eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--aif-brand-steel);
  margin-bottom: 0.75em;
}

.pw-section--ink .pw-eyebrow {
  color: var(--aif-gold);
}

.pw-lede {
  font-size: 1.15rem;
  color: var(--aif-text-muted);
  max-width: 42ch;
}

.pw-section--ink .pw-lede {
  color: var(--aif-grey-blue);
}

.pw-center {
  text-align: center;
}

.pw-center .pw-lede {
  margin-inline: auto;
}

/* ── Buttons ───────────────────────────────────────────────────── */
.pw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font: inherit;
  font-weight: 600;
  padding: 0.7em 1.4em;
  border-radius: var(--aif-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
  text-decoration: none;
  line-height: 1.2;
}

.pw-btn:hover {
  text-decoration: none;
}

/* One primary (brand blue) per view */
.pw-btn--primary {
  background: var(--aif-accent);
  color: var(--aif-on-accent);
}

.pw-btn--primary:hover {
  background: var(--aif-accent-hover);
  color: var(--aif-on-accent);
}

/* Secondary = neutral outline */
.pw-btn--secondary {
  background: var(--aif-surface);
  color: var(--aif-text);
  border-color: var(--aif-border-light);
}

.pw-btn--secondary:hover {
  background: var(--aif-surface-hover);
}

/* Ghost on dark surfaces */
.pw-btn--ghost-light {
  background: transparent;
  color: var(--aif-on-accent);
  border-color: rgba(255, 255, 255, 0.4);
}

.pw-btn--ghost-light:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--aif-on-accent);
}

.pw-btn--lg {
  padding: 0.9em 1.8em;
  font-size: 1.05rem;
}

/* ── Error pages ───────────────────────────────────────────────── */
.pw-error {
  min-height: 60vh;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 8px;
  padding-block: 80px;
}

.pw-error__code {
  font-size: clamp(3rem, 10vw, 6rem);
  font-weight: 800;
  color: var(--aif-accent);
  line-height: 1;
}

/* ── Shared page chassis ───────────────────────────────────────── */
/* The hero band, the card shell and the column grids are used by the
   AGENCY-owned marketing pages AND by our own blog index
   (marketing/blog_index.html uses .pw-hero, .pw-hero__lede, .pw-grid-3 and
   .pw-card). They are therefore chrome, not page components — leaving them in
   the agency sheet let an agency PR restyle our blog index, which is the exact
   thing the PRO-4814 split exists to prevent. The agency keeps every VARIANT
   (.pw-hero__grid/__badge/__title/__actions, .pw-card--audience,
   .pw-card__icon*, .pw-card__list) in public-pages.css.

   test_blog_templates_never_depend_on_the_agency_stylesheet is the gate: it
   reads the blog templates and resolves every pw-* class they use. */
.pw-hero {
  padding-block: clamp(56px, 9vw, 112px);
  background:
    radial-gradient(120% 120% at 85% 0%, var(--aif-accent-soft), transparent 60%),
    var(--aif-surface);
}

.pw-hero__lede {
  font-size: 1.25rem;
  color: var(--aif-text-muted);
  max-width: 48ch;
  margin-bottom: 1.8em;
}

/* Text in OUR templates' heroes, on the agency's dark navy hero (PRO-6983).
   public-pages.css paints every .pw-hero navy (#001d3a under blue/purple
   glows) and lightens its own copy (.pw-page-hero__lede, .pw-lede, h1) but not
   the classes our blog and help-centre heroes use, which stayed light-hero
   colours — muted grey, steel and accent blue on navy. Same tokens the agency
   dark hero and our .pw-section--ink already use: grey-blue copy, gold
   eyebrow. Every pair clears WCAG AA (4.5:1) against the lightest point of
   the navy. We adapt our side; public-pages.css is the agency's. The blog
   byline and help breadcrumb get the same treatment in public-prose.css,
   which owns those classes. */
.pw-hero .pw-hero__lede {
  color: var(--aif-grey-blue);
}

.pw-hero .pw-eyebrow {
  color: var(--aif-gold);
}

.pw-card {
  background: var(--aif-surface);
  border: 1px solid var(--aif-border);
  border-radius: var(--aif-radius);
  padding: 24px;
  box-shadow: var(--pw-shadow-sm);
}

.pw-card h3 {
  margin-bottom: 0.35em;
}

.pw-card p {
  color: var(--aif-text-muted);
  margin: 0;
  font-size: 0.96rem;
}

.pw-grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}

.pw-grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}

@media (min-width: 720px) {
  .pw-grid-2 {
    grid-template-columns: 1fr 1fr;
  }

  .pw-grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}