/* ============================================================================
 * BLUQUBE — public-page design token layer
 * NEXUS-UI-ADOPT-006 · RedOwl · 2026-11-10
 *
 * Single source of truth for the public conversion surfaces (/, /intelligence,
 * /academy, /business, /solutions, /contact, /signup). Loaded FIRST by every
 * public page so no page has to hardcode a colour or size this file names.
 *
 * RECONCILIATION RULE (acceptance 1): two sources are in play —
 *   (a) docs/canon/DESIGN_SYSTEM.md v1.1.0 — approved 2026-11-06, the authority
 *   (b) .artifacts/UI-ADOPT/conversion-spec.md — the mockup fidelity record
 * Where they disagree, CANON WINS and the prototype value is recorded as a
 * pending owner decision in .artifacts/UI-ADOPT/token-decisions.md. Nothing in
 * this file silently adopts a prototype deviation.
 *
 * ANTI-DEAD-FILE NOTE (NEXUS-OPS-453): three un-loaded look-alike token files
 * under static/components/ were deleted on 2026-11-09 because no template ever
 * referenced them. This file is linked from every public page and
 * tests/ui/test_landing_token_layer.py fails if that link is ever removed.
 * ==========================================================================*/

:root {
  /* ── Brand palette ───────────────────────────────────────────────────────
   * Canon DESIGN_SYSTEM.md §Color System. Values are byte-identical to
   * lncnexus/static/css/design-system.css:56-59 so app and public surfaces
   * cannot drift apart. */
  --bq-brand-ink-blue: #193962;        /* canon §Color System row 1; design-system.css:57 */
  --bq-brand-soft-off-white: #F7F8F5;  /* canon §Color System row 2; design-system.css:58 */
  --bq-brand-vivid-teal: #4EE2D0;      /* canon §Color System row 3; design-system.css:59 */
  --bq-brand-ink-blue-hover: #15304f;  /* canon --color-primary-600; design-system.css:66 */
  --bq-brand-teal-dark: #2db9aa;       /* canon --color-secondary-600; design-system.css:78
                                        * — teal CTA hover step. Ink Blue text on it measures
                                        * 4.79:1, AA for normal text.
                                        * DELIBERATELY NOT the landing's current
                                        * hover:bg-brand-600 #2BB3A6, which measures 4.49:1 —
                                        * 0.01 short of AA. Same defect class canon already
                                        * fixed once at 4.46:1 (UI-BETA-GATE D-029). Recorded
                                        * as FINDING-1 in token-decisions.md for the landing
                                        * owner; do not "align" this token to the failing value. */

  /* CTA fills — DELTA-6 owner ruling 2026-11-10: PUBLIC/marketing surfaces use
   * Vivid Teal fills with Ink Blue text. Three sources agree: the shipped landing
   * guard (>=15 teal/ink CTAs), the adopted mockup, and what the board saw live.
   * DESIGN_SYSTEM.md's "no teal-background button" line is scoped to the
   * authenticated app stylesheet. Ink-on-teal is 7.27:1; WHITE on the same teal
   * is 1.60:1 and fails AA, so the ink text is load-bearing — do not change it. */
  --bq-cta-primary-fill: var(--bq-brand-vivid-teal);  /* DELTA-6 ruling */
  --bq-cta-primary-text: var(--bq-brand-ink-blue);    /* 7.27:1 on the fill */

  /* Backwards-compatible aliases — the names the five public pages already use.
   * Kept so this packet does not have to rewrite page markup. */
  --brand-ink: var(--bq-brand-ink-blue);        /* was inline :root, index.html:27 */
  --brand-teal: var(--bq-brand-vivid-teal);     /* was landing.css:34 */
  --surface-page: var(--bq-brand-soft-off-white); /* was inline :root, index.html:29 */

  /* Vivid Teal is an accent, not a button fill — canon §Color System.
   * There is no teal-background button in the shipped stylesheet; do not add
   * one here. */

  /* ── Offering accents ───────────────────────────────────────────────────
   * Canon §Color System named-offering rows. Already match the mockup, so no
   * delta to reconcile. */
  --bq-offering-academy: #AE7E51;      /* canon; palette.py:80 (gold.500) */
  --bq-offering-intelligence: #4E837D; /* canon; palette.py:67, design-system.css:32 */
  --bq-offering-business: #7162B0;     /* canon row 6 — previously an inline literal at
                                        * _forencot_constellation_fragments.py:33 with NO
                                        * token. Minted here so 004 can stop hardcoding it. */

  /* ── Neutrals (slate ramp) ──────────────────────────────────────────────
   * Canon §Neutral Colors: the shipped ramp is slate, NOT the warm grays this
   * document used to list. design-system.css:84-93. */
  --bq-gray-50: #f8fafc;   /* design-system.css:84 */
  --bq-gray-100: #f1f5f9;  /* :85 */
  --bq-gray-200: #e2e8f0;  /* :86 — default border */
  --bq-gray-300: #cbd5e1;  /* :87 — strong border */
  --bq-gray-400: #94a3b8;  /* :88 */
  --bq-gray-500: #64748b;  /* :89 */
  --bq-gray-600: #475569;  /* :90 */
  --bq-gray-700: #334155;  /* :91 */
  --bq-gray-800: #1e293b;  /* :92 */
  --bq-gray-900: #0f172a;  /* :93 */

  /* Functional roles — what components actually consume. Canon §Neutral Colors
   * functional table (light column). */
  --bq-surface: #ffffff;               /* design-system.css:144 */
  --bq-border: var(--bq-gray-200);     /* :157 */
  --bq-border-strong: var(--bq-gray-300); /* :158 */
  --bq-text: var(--bq-brand-ink-blue); /* :146 — primary text is Ink Blue */
  --bq-text-muted: #5f6e85;            /* :155 — deliberately NOT slate-500: that
                                        * measured 4.46:1 on the off-white surface,
                                        * 0.04 short of AA (FIX-CONTRAST,
                                        * UI-BETA-GATE D-029). Do not "tidy" this. */
  --bq-text-inverse: #ffffff;          /* :156 */

  /* ── Dark hero band ─────────────────────────────────────────────────────
   * Prototype-only surface: the mockup's hero/footer band is deeper than Ink
   * Blue. Observed conversion-spec §Global design language ("literal
   * bg-[#0B192F]"). No canon equivalent, so it is named here as a new token
   * rather than mapped onto an existing one. */
  --bq-surface-hero-dark: #0B192F;     /* conversion-spec §Global design language */
  --bq-text-on-dark: #f8fafc;          /* canon dark --color-text-primary */
  --bq-eyebrow-on-dark: #7CF1E2;       /* mockup teal eyebrow on dark, conversion-spec
                                        * §Global design language (rgb 124,241,226) */

  /* On-dark overlays — Soft Off-White at low alpha, used to lift cards, borders
   * and muted text inside a dark band without introducing a new hue. Source:
   * conversion-spec §Global design language dark bands (navy hero / navy
   * sections), first expressed as repeated raw rgba() literals in
   * offering-pages.css under NEXUS-UI-ADOPT-003. Named here so the alpha steps
   * are one decision instead of six literals. */
  --bq-on-dark-fill-faint: rgba(247, 248, 245, 0.06);   /* offering-pages.css cards/accordions */
  --bq-on-dark-fill: rgba(247, 248, 245, 0.18);         /* offering-pages.css stat row */
  --bq-on-dark-border-faint: rgba(247, 248, 245, 0.2);  /* offering-pages.css card borders */
  --bq-on-dark-border: rgba(247, 248, 245, 0.3);        /* offering-pages.css course status rule */
  --bq-on-dark-text-muted: rgba(247, 248, 245, 0.75);   /* offering-pages.css hedge on dark */
  --bq-on-dark-text-faint: rgba(247, 248, 245, 0.65);   /* offering-pages.css course status */

  /* ── Typography ─────────────────────────────────────────────────────────
   * Arial-only is the brand rule (canon §Font Family). The serif alias also
   * resolves to Arial; the token exists so font-serif utilities land on brand
   * type. design-system.css:189-191. */
  --bq-font-display: Arial, "Helvetica Neue", Helvetica, sans-serif; /* canon §Font Family */
  --bq-font-body: Arial, "Helvetica Neue", Helvetica, sans-serif;    /* canon §Font Family */
  --bq-font-heading: Arial, "Helvetica Neue", Helvetica, sans-serif; /* canon §Font Family */
  --bq-font-mono: "Fira Code", "Fira Mono", Consolas, monospace;     /* canon :191 */

  /* Weights and line heights — canon §Font Weights / §Line Heights. */
  --bq-weight-regular: 400;  /* canon: body text */
  --bq-weight-medium: 500;   /* canon: labels, buttons */
  --bq-weight-semibold: 600; /* canon: H2-H4, table headers */
  --bq-weight-bold: 700;     /* canon: H1 */
  --bq-leading-body: 1.57;   /* canon §Line Heights :380,:464 */
  --bq-leading-h1: 1.2;      /* canon :429 */
  --bq-leading-h2: 1.33;     /* canon :438 */
  --bq-leading-h3: 1.4;      /* canon :447 */

  /* Marketing display scale — SANCTIONED PUBLIC-SURFACE CANON (was DELTA-3).
   * Owner ruling 2026-11-10: the shipped landing page is accepted as SUPPLEMENTAL
   * CANON for public/marketing surfaces, so this scale is canonical for public
   * pages and is no longer provisional. Token names are unchanged; only the status
   * moved. It coexists with the app scale rather than replacing it — canon
   * §Type Scale still governs the authenticated app (H1 2rem, body 0.875rem, and
   * its warning "do not assume a 16px body" stands there). The two scales are
   * scoped by surface; DESIGN_SYSTEM.md §Public / Marketing Surfaces records which
   * applies where, and token-decisions.md keeps the DELTA-3 history. */
  --bq-display-h1: 76px;        /* conversion-spec §Global design language; owner-sanctioned */
  --bq-display-h1-weight: 400;  /* mockup h1 weight 400 */
  --bq-display-h1-leading: 0.98;
  --bq-display-h1-tracking: -2.28px;
  --bq-display-h2: 46px;        /* conversion-spec; owner-sanctioned */
  --bq-display-h2-weight: 400;
  --bq-display-h2-leading: 1.1;
  --bq-display-h2-tracking: -0.92px;
  --bq-marketing-body: 16px;    /* conversion-spec; owner-sanctioned for public surfaces */
  --bq-marketing-body-leading: 1.65;
  --bq-eyebrow-size: 13px;      /* conversion-spec: eyebrows + nav 13px */
  --bq-eyebrow-tracking: 0.13px;
  --bq-nav-size: 13px;

  /* ── Spacing rhythm ─────────────────────────────────────────────────────
   * Canon §Spacing System: base unit 4px, named --spacing-N (quarter-rems),
   * design-system.css:194-206. Re-exported here under the --bq- prefix so the
   * public layer is self-contained; values are identical. */
  --bq-space-1: 0.25rem;   /* 4px  */
  --bq-space-2: 0.5rem;    /* 8px  */
  --bq-space-3: 0.75rem;   /* 12px */
  --bq-space-4: 1rem;      /* 16px */
  --bq-space-5: 1.25rem;   /* 20px */
  --bq-space-6: 1.5rem;    /* 24px */
  --bq-space-8: 2rem;      /* 32px */
  --bq-space-10: 2.5rem;   /* 40px */
  --bq-space-12: 3rem;     /* 48px */
  --bq-space-16: 4rem;     /* 64px */
  --bq-space-20: 5rem;     /* 80px */
  --bq-space-24: 6rem;     /* 96px */

  /* Public-page rhythm — conversion-spec §Global design language:
   * "Section vertical padding py-20 (80px) throughout", container
   * max-w-[1340px] px-5. */
  --bq-section-pad-y: var(--bq-space-20);      /* 80px, conversion-spec */
  --bq-container-max: 1340px;                  /* conversion-spec max-w-[1340px] */
  --bq-container-pad-x: var(--bq-space-5);     /* 20px, conversion-spec px-5 */

  /* ── Radii and shadows ──────────────────────────────────────────────────
   * Canon §Border Radius / §Shadows, design-system.css:209-219. */
  --bq-radius-sm: 0.25rem;  /* :209 */
  --bq-radius-md: 0.5rem;   /* :210 */
  --bq-radius-lg: 0.75rem;  /* :211 */
  --bq-radius-xl: 1rem;     /* :212 */
  --bq-radius-full: 9999px; /* :213 */
  --bq-shadow-sm: 0 1px 2px 0 rgba(15,23,42,0.05);                                   /* :216 */
  --bq-shadow-md: 0 4px 6px -1px rgba(15,23,42,0.1), 0 2px 4px -1px rgba(15,23,42,0.06); /* :217 */
  --bq-shadow-lg: 0 10px 15px -3px rgba(15,23,42,0.1), 0 4px 6px -2px rgba(15,23,42,0.05); /* :218 */
  --bq-shadow-xl: 0 20px 25px -5px rgba(15,23,42,0.1), 0 10px 10px -5px rgba(15,23,42,0.04); /* :219 */
  /* Focus ring values are measured, not guessed — the ring they replaced
   * composited to 1.42:1 against the page background, i.e. an invisible
   * keyboard indicator. UI-BETA-GATE D-031. Do not lighten. */
  --bq-shadow-focus: 0 0 0 3px rgba(72,101,129,0.9);  /* design-system.css:231 */

  /* ── Shared component tokens ────────────────────────────────────────────
   * The --nx-tab-* block was duplicated verbatim in the inline <style> of all
   * five public pages (index.html:107, pages/about.html, pages/features.html,
   * pages/pricing.html, pages/use-cases.html). Consolidated here; the inline
   * copies are removed by this packet. */
  --nx-tab-bg: #ffffff;
  --nx-tab-line: var(--bq-gray-200);
  --nx-tab-text: #5b6472;
  --nx-tab-ink: var(--bq-brand-ink-blue);
  --nx-tab-accent: var(--bq-brand-vivid-teal);
  --nx-tab-bg-dark: #2d3348;
  --nx-tab-line-dark: #3d4460;
  --nx-tab-text-dark: #d1d5db;
  --nx-tab-ink-dark: #f3f4f6;

  /* Misc tokens previously inline on index.html — kept under the same names so
   * existing markup resolves unchanged. */
  --color-white: #fff;                    /* index.html:28 */
  --color-error: #dc2626;                 /* index.html:30 */
  --print-link: #666;                     /* index.html:31 */
}

/* ============================================================================
 * REUSABLE COMPONENT PATTERNS (acceptance 2)
 * These are the five patterns the acceptance names: stat card, section header,
 * hero treatment, CTA styles, footer contract. They exist so 002/003/004 render
 * the same object instead of each re-drawing it.
 * ==========================================================================*/

/* ── Section shell + alternating band rhythm ────────────────────────────────
 * conversion-spec §Global design language: "alternating bands: dark navy hero →
 * light → navy → white (border-y border-border) → navy footer". */
.bq-section {
  padding-block: var(--bq-section-pad-y);
  padding-inline: var(--bq-container-pad-x);
}
.bq-container {
  max-width: var(--bq-container-max);
  margin-inline: auto;
  padding-inline: var(--bq-container-pad-x);
}
.bq-band--light { background: var(--bq-brand-soft-off-white); color: var(--bq-text); }
.bq-band--white {
  background: var(--bq-surface);
  color: var(--bq-text);
  border-block: 1px solid var(--bq-border);
}
.bq-band--dark {
  background: var(--bq-surface-hero-dark);
  color: var(--bq-text-on-dark);
}

/* ── Section header (eyebrow + title + lede) ──────────────────────────────── */
.bq-eyebrow {
  font-family: var(--bq-font-heading);
  font-size: var(--bq-eyebrow-size);
  letter-spacing: var(--bq-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--bq-brand-vivid-teal);
  font-weight: var(--bq-weight-semibold);
}
.bq-band--light .bq-eyebrow,
.bq-band--white .bq-eyebrow { color: var(--bq-offering-intelligence); }
.bq-section-title {
  font-family: var(--bq-font-heading);
  font-size: var(--bq-display-h2);
  font-weight: var(--bq-display-h2-weight);
  line-height: var(--bq-display-h2-leading);
  letter-spacing: var(--bq-display-h2-tracking);
  color: var(--bq-brand-ink-blue);
  margin: 0 0 var(--bq-space-4);
}
.bq-band--dark .bq-section-title { color: var(--bq-text-on-dark); }
.bq-lede {
  font-size: var(--bq-marketing-body);
  line-height: var(--bq-marketing-body-leading);
  color: var(--bq-text-muted);
  max-width: 68ch;
}

/* ── Stat card ──────────────────────────────────────────────────────────────
 * Canon §Component Standards / Cards governs the app card; this is the public
 * stat-card shape the mockup uses (value + label + caption). */
.bq-stat-card {
  background: var(--bq-surface);
  border: 1px solid var(--bq-border);
  border-radius: var(--bq-radius-lg);
  padding: var(--bq-space-6);
  box-shadow: var(--bq-shadow-sm);
}
.bq-stat-card__value {
  font-family: var(--bq-font-heading);
  font-size: var(--bq-display-h2);
  font-weight: var(--bq-weight-semibold);
  line-height: 1;
  color: var(--bq-brand-ink-blue);
}
.bq-stat-card__label {
  font-size: var(--bq-eyebrow-size);
  letter-spacing: var(--bq-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--bq-text-muted);
  margin-top: var(--bq-space-2);
}
.bq-stat-card__caption {
  font-size: var(--bq-nav-size);
  line-height: var(--bq-leading-body);
  color: var(--bq-text-muted);
  margin-top: var(--bq-space-3);
}

/* ── Hero treatment ─────────────────────────────────────────────────────────
 * conversion-spec §Global design language: dark navy hero band, ivory display
 * type, floating glass cube rendered via <img> (SMIL/CSS inside the SVG). */
.bq-hero {
  background: var(--bq-surface-hero-dark);
  color: var(--bq-text-on-dark);
  padding-block: var(--bq-section-pad-y);
  padding-inline: var(--bq-container-pad-x);
}
.bq-hero__title {
  font-family: var(--bq-font-display);
  font-size: var(--bq-display-h1);
  font-weight: var(--bq-display-h1-weight);
  line-height: var(--bq-display-h1-leading);
  letter-spacing: var(--bq-display-h1-tracking);
  color: var(--bq-text-on-dark);
  margin: 0 0 var(--bq-space-6);
}
.bq-hero__media { position: relative; }
.bq-hero__media img { max-width: 100%; height: auto; }
@media (prefers-reduced-motion: reduce) {
  /* The glass cube animates inside its own SVG. Honour the user preference by
   * stopping the layer that pulses around it; the <img> animation itself is
   * owned by the asset. */
  .bq-hero__media::after { animation: none; }
}

/* ── CTA styles ─────────────────────────────────────────────────────────────
 * Public-surface rule per the DELTA-6 owner ruling: the primary CTA is Vivid
 * Teal with Ink Blue text (7.27:1). Canon's "teal is an accent, not a button
 * fill" governs the authenticated app stylesheet, not these pages. */
.bq-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bq-space-2);
  font-family: var(--bq-font-body);
  font-size: 0.875rem;          /* canon §Type Scale button size */
  font-weight: var(--bq-weight-medium); /* canon: buttons 500 */
  line-height: 1.43;            /* canon §Line Heights button */
  padding: var(--bq-space-2) var(--bq-space-4); /* canon button pairing 8px 16px */
  border-radius: var(--bq-radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
}
.bq-cta--primary {
  background: var(--bq-cta-primary-fill);
  color: var(--bq-cta-primary-text);
}
.bq-cta--primary:hover { background: var(--bq-brand-teal-dark); }

/* Hover-safety utility for CTAs still composed from Tailwind utilities rather
 * than the .bq-cta component (NEXUS-LAND-HOVER-AA-001).
 *
 * The shipped landing CTAs used `hover:bg-brand-600`, whose landing palette value
 * puts Ink Blue text at 4.49:1 — 0.01 short of the 4.5:1 AA floor for normal text
 * (these are 14-16px font-medium, so the 3:1 large-text bar does not apply). The
 * compliant hover is --bq-brand-teal-dark at 4.79:1, but that colour is listed in
 * test_brand_landing.INVENTED_HEXES and so cannot be reintroduced as a landing
 * Tailwind utility. This rule reaches the compliant colour through the token
 * layer instead, with no palette surgery.
 *
 * It changes ONLY the hover colour: pages keep their own size and shadow
 * utilities, so this is an AA fix and not a restyle. Adopting .bq-cta--primary
 * wholesale additionally moves a marketing CTA from 16px / 10px-20px padding to
 * the component's 14px / 8px-16px app metrics and drops shadow-md — a design
 * decision about marketing button size that should be made deliberately, not as
 * a side effect of fixing contrast. */
.bq-cta-hover-safe:hover { background: var(--bq-brand-teal-dark); }
.bq-cta--secondary {
  background: transparent;
  color: var(--bq-brand-ink-blue);
  border-color: var(--bq-border-strong);
}
.bq-cta--on-dark {
  background: transparent;
  color: var(--bq-text-on-dark);
  border-color: var(--bq-text-on-dark);
}
.bq-cta:focus-visible {
  outline: none;
  box-shadow: var(--bq-shadow-focus);
}

/* ── Footer contract ────────────────────────────────────────────────────────
 * conversion-spec §Global design language "Footer contract (all pages)":
 * wordmark + "Purpose built. Professional Grade." + one-line description;
 * columns OFFERINGS / FIRM / ENQUIRIES; copyright; and the hedge line
 * "DESIGN PROTOTYPE · DEMONSTRATION CONTENT". The hedge line is a
 * claim-honesty requirement (Copy Authority: compliance/marketing overclaims are
 * the highest-severity defect class) — it is NOT decoration and must not be
 * removed to make the footer look finished. */
.bq-footer {
  background: var(--bq-surface-hero-dark);
  color: var(--bq-text-on-dark);
  padding-block: var(--bq-section-pad-y);
  padding-inline: var(--bq-container-pad-x);
  font-size: var(--bq-nav-size);
}
.bq-footer__tagline {
  font-weight: var(--bq-weight-semibold);
  margin: var(--bq-space-3) 0 var(--bq-space-2);
}
.bq-footer__col-heading {
  font-size: var(--bq-eyebrow-size);
  letter-spacing: var(--bq-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--bq-eyebrow-on-dark);
  margin-bottom: var(--bq-space-3);
}
.bq-footer a { color: var(--bq-text-on-dark); text-decoration: none; }
.bq-footer a:hover { color: var(--bq-brand-vivid-teal); }
.bq-footer__legal {
  margin-top: var(--bq-space-8);
  display: flex;
  flex-wrap: wrap;
  gap: var(--bq-space-4);
  color: var(--bq-gray-400);
}
.bq-footer__hedge {
  text-transform: uppercase;
  letter-spacing: var(--bq-eyebrow-tracking);
  color: var(--bq-gray-400);
}