// Color, Type, Iconography, Patterns, Gradients pages — v2 canonicalized
const TT = window.RS_TOKENS;

function ColorPage() {
  const [copied, setCopied] = useState(null);
  const copy = (k, v) => { navigator.clipboard.writeText(v); setCopied(k); setTimeout(()=>setCopied(null), 900); };

  const groups = [
    { id: "primary",   label: "Primary",       sub: "Foundation. Use these first." },
    { id: "secondary", label: "Secondary Blues", sub: "Mid-tones, info accents, gradient stops." },
    { id: "tertiary",  label: "Tertiary",      sub: "Supporting accents and dark UI surfaces." },
    { id: "accent",    label: "Accent",        sub: "Action and warning. Reserve for CTAs and callouts." },
  ];

  return (
    <div className="page-anim">
      <SectionHeader eyebrow="Brand · Color" title="Color system"
        lede="Compliance Blue carries the brand. Cyber Orange carries action. Everything else supports those two jobs."
        provenance={{ level: "verified", note: "Color names, hex values, CMYK, and group taxonomy verified directly against the 2025 RegScale Design & Brand Guide PDF." }} />

      <H2 sub="Click any swatch to copy its hex.">Palette</H2>
      {groups.map(g => (
        <div key={g.id} style={{ marginBottom: 28 }}>
          <h3 style={{ fontSize: 13, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--rs-text-muted)", margin: "8px 0 12px" }}>{g.label} · <span style={{ fontWeight: 400, textTransform: "none", letterSpacing: 0 }}>{g.sub}</span></h3>
          <div className="grid grid-4">
            {Object.entries(TT.color).filter(([,c]) => c.group === g.id).map(([k, c]) => (
              <div key={k} className={"swatch " + (copied===k ? "copied" : "")} onClick={()=>copy(k, c.hex)}>
                <div className="chip" style={{ background: c.hex, border: c.hex === "#FFFFFF" || c.hex === "#F7FAFD" ? "1px solid var(--rs-border)" : "none" }}>
                  <div className="copied-flag">Copied {c.hex}</div>
                </div>
                <div className="meta">
                  <div className="name">{c.name}</div>
                  <div className="hex">{c.hex} · {c.cmyk}</div>
                  <div className="role">{c.role}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      ))}

      <H2 sub="100 / 80 / 60 / 40 / 20% steps per the 2025 guide.">Color tints</H2>
      <div className="card" style={{ padding: 18 }}>
        {["compliance-blue","mid-blue","light-blue","secure-teal","cyber-orange","slate-grey"].map(k => {
          const c = TT.color[k];
          return (
            <div key={k} style={{ display: "grid", gridTemplateColumns: "140px repeat(5, 1fr)", gap: 8, alignItems: "center", marginBottom: 10 }}>
              <div style={{ fontSize: 12, fontWeight: 600 }}>{c.name}</div>
              {TT.tints.map(t => (
                <div key={t} style={{ height: 48, borderRadius: 6, background: c.hex, opacity: t/100, position: "relative" }}>
                  <div style={{ position: "absolute", bottom: 4, left: 6, fontSize: 10, color: t > 50 ? "#fff" : "var(--rs-text)", fontFamily: "JetBrains Mono, monospace" }}>{t}%</div>
                </div>
              ))}
            </div>
          );
        })}
      </div>

      <H2>Legacy / deprecated</H2>
      <div className="card" style={{ padding: 18, borderColor: "rgba(165,90,20,0.3)", background: "rgba(241,148,33,0.04)" }}>
        <div style={{ display: "flex", gap: 14, alignItems: "center" }}>
          <div style={{ width: 48, height: 48, borderRadius: 8, background: TT.color["cyan-legacy"].hex, flexShrink: 0 }} />
          <div>
            <h4 style={{ margin: "0 0 4px", fontSize: 14 }}>Cyan #00DBEE — non-canonical</h4>
            <p style={{ margin: 0, fontSize: 13, color: "var(--rs-text-muted)" }}>
              Appears 2,627× in older Figma assets and the legacy image-overlay gradient. <b>Not in the 2025 canonical palette.</b> For new work use Mid Blue, Light Blue, or Secure Teal instead. Keep on existing assets only when re-cuts are out of scope.
            </p>
          </div>
        </div>
      </div>

      <H2>Accessibility & contrast</H2>
      <div className="card">
        <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 13 }}>
          <thead><tr style={{ textAlign: "left", borderBottom: "1px solid var(--rs-border)" }}>
            <th style={{ padding: "10px 0" }}>Foreground</th><th>Background</th><th>Ratio</th><th>Use</th>
          </tr></thead>
          <tbody>
            {[
              ["White #FFFFFF","Compliance Blue #2E3091","11.2:1","✓ All text"],
              ["White #FFFFFF","Cyber Orange #F25924","3.5:1","✓ Large only (≥18px bold)"],
              ["Slate Grey #2B3045","White #FFFFFF","13.8:1","✓ All text — preferred body color"],
              ["White #FFFFFF","Light Blue #29ABE3","2.4:1","✗ Decorative only"],
              ["Compliance Blue #2E3091","White #FFFFFF","11.2:1","✓ All text"],
            ].map((r,i)=>(
              <tr key={i} style={{ borderBottom: "1px solid var(--rs-border)" }}>
                {r.map((c,j) => <td key={j} style={{ padding: "10px 0", fontFamily: j<2 ? "JetBrains Mono, monospace" : "inherit", fontSize: 12 }}>{c}</td>)}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

function GradientPage() {
  const canonical = Object.entries(TT.gradient).filter(([,g]) => g.group === "canonical");
  const extended  = Object.entries(TT.gradient).filter(([,g]) => g.group === "extended");

  return (
    <div className="page-anim">
      <SectionHeader eyebrow="Brand · Gradient" title="Gradients"
        lede="Six canonical gradients per the 2025 Brand Guide — three primary, two secondary, plus solid Cyber Orange. Gradients are for backgrounds and accents — never on copy."
        provenance={{ level: "verified", note: "Canonical set verified against the 2025 RegScale Design & Brand Guide. Extended overlays observed in production Figma assets but not part of the canonical palette." }} />

      <H2 sub="Use these for backgrounds and accents in imagery.">Canonical gradients</H2>
      <div className="grid grid-2">
        {canonical.map(([k, g]) => (
          <div key={k} className="grad-swatch">
            <div className="grad-chip" style={{ background: g.css }} />
            <div className="meta">
              <div className="name">{g.name}</div>
              <div className="css" title={g.css}>{g.css}</div>
              <div className="use">{g.use}</div>
              <div style={{ marginTop: 12, display: "flex", gap: 8 }}>
                <button className="dl-btn" onClick={()=>navigator.clipboard.writeText(g.css)}>Copy CSS</button>
              </div>
            </div>
          </div>
        ))}
      </div>

      <H2 sub="Observed in production assets — not part of the 2025 canonical set.">Extended / production overlays</H2>
      <div className="card" style={{ padding: 14, marginBottom: 16, background: "rgba(241,148,33,0.04)", borderColor: "rgba(165,90,20,0.3)" }}>
        <p style={{ margin: 0, fontSize: 13, color: "var(--rs-text-muted)" }}>
          These appear on existing webinar landing pages and decks. Some use the legacy <code>#00DBEE</code> cyan. Treat as legacy — when re-cutting, prefer the canonical set above.
        </p>
      </div>
      <div className="grid grid-2">
        {extended.map(([k, g]) => (
          <div key={k} className="grad-swatch">
            <div className="grad-chip" style={{ background: g.css }} />
            <div className="meta">
              <div className="name">{g.name}</div>
              <div className="css" title={g.css}>{g.css}</div>
              <div className="use">{g.use}</div>
            </div>
          </div>
        ))}
      </div>

      <div className="card" style={{ marginTop: 24, padding: 18, background: "rgba(46,48,145,0.04)" }}>
        <h4 style={{ margin: "0 0 6px", fontSize: 14 }}>Rule</h4>
        <p style={{ margin: 0, fontSize: 13, color: "var(--rs-text-muted)" }}>
          <b>Gradients should not be used on copy.</b> Use them for backgrounds, image overlays, and decorative blocks only. Body and headline text always sits on a solid surface.
        </p>
      </div>
    </div>
  );
}

function TypePage() {
  return (
    <div className="page-anim">
      <SectionHeader eyebrow="Brand · Type" title="Typography"
        lede="Montserrat is the primary typeface — headlines, labels, keys. Roboto is secondary — body copy."
        provenance={{ level: "verified", note: "Typefaces, weights, hierarchy, and exact pt sizes verified against the 2025 RegScale Design & Brand Guide. JetBrains Mono is a proposed extension for code-token references only." }} />

      <H2>Typefaces</H2>
      <div className="grid grid-3">
        {Object.entries(TT.type).filter(([k])=>k!=="scale").map(([k, f]) => (
          <div key={k} className="card">
            <div style={{ fontFamily: f.family, fontWeight: 700, fontSize: 56, lineHeight: 1, letterSpacing: "-0.02em" }}>Aa</div>
            <h4 style={{ margin: "12px 0 4px", fontSize: 14 }}>{f.family}</h4>
            <p style={{ margin: 0, fontSize: 12, color: "var(--rs-text-muted)" }}>{f.usage}</p>
            <div style={{ display: "flex", gap: 6, marginTop: 10, flexWrap: "wrap" }}>
              {f.weights.map(w => <span key={w} className="tag tip">{w}</span>)}
            </div>
          </div>
        ))}
      </div>

      <H2 sub="Per the 2025 Brand Guide. Sizes shown in pt → px equivalents.">Hierarchy</H2>
      <div className="card" style={{ padding: "8px 24px" }}>
        {Object.entries(TT.type.scale).map(([name, s]) => (
          <div key={name} className="type-spec">
            <div className="label">{name.toUpperCase()}</div>
            <div style={{ fontFamily: s.family, fontSize: s.size, fontWeight: s.weight, lineHeight: s.lh, letterSpacing: s.track, textTransform: name === "label" ? "uppercase" : "none" }}>
              {name === "label" ? "Engineered Compliance" :
               name === "body"  ? "RegScale is a continuous controls monitoring platform that enables GRC outcomes faster and at a lower cost than legacy programs deliver." :
                                  "Continuous Controls Monitoring"}
            </div>
            <div className="specs">{s.size} · {s.family} · {s.weight} · {s.role}</div>
          </div>
        ))}
      </div>

      <H2>Type rules</H2>
      <div className="grid grid-2">
        <div className="voice-card">
          <div className="voice-side"><h5 className="is">Do</h5><p>Use Montserrat for headlines and labels (UPPERCASE for labels).</p></div>
          <div className="voice-side"><h5 className="isnt">Don't</h5><p>Mix four+ weights on the same surface.</p></div>
        </div>
        <div className="voice-card">
          <div className="voice-side"><h5 className="is">Do</h5><p>Use Roboto Regular for body copy on web. Light for print.</p></div>
          <div className="voice-side"><h5 className="isnt">Don't</h5><p>Set body in Montserrat. Roboto carries body.</p></div>
        </div>
        <div className="voice-card">
          <div className="voice-side"><h5 className="is">Do</h5><p>Title Case headlines (H1–H3). Sentence case body.</p></div>
          <div className="voice-side"><h5 className="isnt">Don't</h5><p>All-caps headlines except for the Label tier.</p></div>
        </div>
        <div className="voice-card">
          <div className="voice-side"><h5 className="is">Do</h5><p>Use Roboto Bold ALL CAPS for primary CTAs.</p></div>
          <div className="voice-side"><h5 className="isnt">Don't</h5><p>Set body copy in Roboto Bold. It's reserved for action.</p></div>
        </div>
      </div>
    </div>
  );
}

function IconographyPage() {
  const icons = [
    "Access Reviews", "Assess", "Manage Risk", "Automated Evidence",
    "Build Program", "Collect Evidence", "Risk Management", "Rapid Certification",
    "CCM", "FedRAMP", "Fix Issues", "Governance",
  ];
  return (
    <div className="page-anim">
      <SectionHeader eyebrow="Brand · Iconography" title="Iconography"
        lede="Bold rounded shapes with a cohesive color palette. Outer circular elements add movement and visual interest."
        provenance={{ level: "verified", note: "Style direction (bold, rounded, cohesive palette, outer circular elements) verified against the 2025 Brand Guide. Glyph placeholders below — actual icons live in the linked Figma library." }} />

      <H2 sub="Twelve named icons in the canonical library. Full color and grayscale variants for each.">Named library — placeholders</H2>
      <div className="grid grid-4">
        {icons.map(n => (
          <div key={n} className="card" style={{ padding: 18, display: "grid", placeItems: "center", gap: 10 }}>
            <div style={{ width: 76, height: 76, borderRadius: 999, background: "var(--rs-grad-secondary-2)", display: "grid", placeItems: "center", position: "relative" }}>
              <div style={{ width: 52, height: 52, borderRadius: 999, background: "#fff", display: "grid", placeItems: "center", color: "var(--rs-compliance-blue)", fontSize: 22, fontWeight: 800 }}>
                {n.split(" ").map(s=>s[0]).join("").slice(0,2)}
              </div>
            </div>
            <div style={{ fontSize: 11, textAlign: "center", color: "var(--rs-text-muted)", letterSpacing: "0.04em" }}>{n}</div>
          </div>
        ))}
      </div>
      <p style={{ marginTop: 16, fontSize: 13, color: "var(--rs-text-muted)" }}>
        Each named icon ships in <b>Full Color</b> and <b>Grayscale</b> variants. The placeholders above are stand-ins — fetch the production glyphs from the linked Figma icon library.
      </p>

      <H2 sub="Three illustration treatments — pick one per artifact, never mix.">Illustration directions</H2>
      <div className="grid grid-3">
        <div className="card" style={{ padding: 0, overflow: "hidden" }}>
          <div className="pattern-tile pattern-mesh" style={{ borderRadius: 0, border: "none" }} />
          <div style={{ padding: 16 }}>
            <h4 style={{ margin: "0 0 4px", fontSize: 14 }}>Spectral Mesh</h4>
            <p style={{ margin: 0, fontSize: 12, color: "var(--rs-text-muted)" }}>Default. Sustained brand aura. Use behind hero copy.</p>
          </div>
        </div>
        <div className="card" style={{ padding: 0, overflow: "hidden" }}>
          <div className="pattern-tile pattern-grid" style={{ borderRadius: 0, border: "none" }} />
          <div style={{ padding: 16 }}>
            <h4 style={{ margin: "0 0 4px", fontSize: 14 }}>Engineered Grid</h4>
            <p style={{ margin: 0, fontSize: 12, color: "var(--rs-text-muted)" }}>Technical surfaces — product mockups, dev pages.</p>
          </div>
        </div>
        <div className="card" style={{ padding: 0, overflow: "hidden" }}>
          <div className="pattern-tile" style={{ background: "var(--rs-grad-primary-1)", borderRadius: 0, border: "none", display: "grid", placeItems: "center" }}>
            <div style={{ width: 80, height: 80, background: "url(./assets/regscale-symbol-color.png) center/contain no-repeat" }} />
          </div>
          <div style={{ padding: 16 }}>
            <h4 style={{ margin: "0 0 4px", fontSize: 14 }}>Symbol Hero</h4>
            <p style={{ margin: 0, fontSize: 12, color: "var(--rs-text-muted)" }}>Symbol on gradient. Brand-only moments — file thumbnails, social.</p>
          </div>
        </div>
      </div>
    </div>
  );
}

function PhotographyPage() {
  const duotonesPrimary = [
    ["#2E3091", "#29ABE3", "Compliance Blue → Light Blue"],
    ["#263574", "#0DC7BF", "Slate Blue → Secure Teal"],
    ["#2E3091", "#F25924", "Compliance Blue → Cyber Orange"],
  ];
  const duotonesSecondary = [
    ["#9E005D", "#F25924", "Protected Purple → Cyber Orange"],
    ["#0DC7BF", "#2E3091", "Secure Teal → Compliance Blue"],
    ["#2B3045", "#29ABE3", "Slate Grey → Light Blue"],
  ];
  const Tile = ([a, b, label]) => (
    <div key={label} className="card" style={{ padding: 0, overflow: "hidden" }}>
      <div style={{ aspectRatio: "4/3", background: `linear-gradient(135deg, ${a} 0%, ${b} 100%)`, position: "relative" }}>
        {/* placeholder striped photo */}
        <svg width="100%" height="100%" style={{ position: "absolute", inset: 0, mixBlendMode: "overlay", opacity: 0.35 }}>
          <defs>
            <pattern id={`p-${a.slice(1)}`} width="14" height="14" patternUnits="userSpaceOnUse" patternTransform="rotate(35)">
              <line x1="0" y1="0" x2="0" y2="14" stroke="#000" strokeWidth="6" opacity="0.5" />
            </pattern>
          </defs>
          <rect width="100%" height="100%" fill={`url(#p-${a.slice(1)})`} />
        </svg>
        <div style={{ position: "absolute", inset: 0, display: "grid", placeItems: "center", color: "rgba(255,255,255,0.85)", fontFamily: "JetBrains Mono", fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase" }}>photo placeholder</div>
      </div>
      <div style={{ padding: 14 }}>
        <div style={{ fontSize: 13, fontWeight: 600 }}>{label}</div>
        <div style={{ fontSize: 11, color: "var(--rs-text-muted)", fontFamily: "JetBrains Mono" }}>{a} → {b}</div>
      </div>
    </div>
  );
  return (
    <div className="page-anim">
      <SectionHeader eyebrow="Brand · Photography" title="Photography & duotone"
        lede="Photography uses a duotone treatment for a cohesive aesthetic. A gradient is often overlaid on top to enhance depth."
        provenance={{ level: "verified", note: "Duotone direction verified against the 2025 Brand Guide. Specific duotone color pairs derived from the canonical palette — verify exact pairs in the linked Canva treatment library before production use." }} />

      <H2>Primary duotone color sets</H2>
      <div className="grid grid-3">{duotonesPrimary.map(Tile)}</div>

      <H2>Secondary duotone color sets</H2>
      <div className="grid grid-3">{duotonesSecondary.map(Tile)}</div>

      <H2>Treatment recipe</H2>
      <div className="card">
        <CodeBlock>{`/* 1. Convert photo to duotone (Photoshop/Figma) using a primary pair */
/* 2. Layer a brand gradient overlay on top to enhance depth */

.photo {
  background: url(photo-duotone.jpg) center/cover;
  position: relative;
}
.photo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(46,48,145,0.55) 0%, rgba(13,199,191,0) 70%);
}`}</CodeBlock>
      </div>
    </div>
  );
}

function PlatformIllustrationsPage() {
  return (
    <div className="page-anim">
      <SectionHeader eyebrow="Brand · Illustration" title="Platform illustrations"
        lede="Stylized to emphasize the most important information. Rounded brand shapes in the background reinforce a dynamic visual identity."
        provenance={{ level: "verified", note: "Direction verified against the 2025 Brand Guide. Slots below are placeholders — full library lives in the linked Figma illustration library." }} />

      <H2 sub="Six placeholder slots — replace with production illustrations.">Illustration grid</H2>
      <div className="grid grid-3">
        {Array.from({ length: 6 }).map((_, i) => (
          <div key={i} className="card" style={{ padding: 0, overflow: "hidden" }}>
            <div style={{ aspectRatio: "4/3", background: i % 2 ? "var(--rs-grad-secondary-2)" : "var(--rs-grad-primary-1)", position: "relative", overflow: "hidden" }}>
              {/* rounded brand shapes in background */}
              <div style={{ position: "absolute", width: 240, height: 240, borderRadius: 999, background: "rgba(255,255,255,0.12)", top: -60, right: -60 }} />
              <div style={{ position: "absolute", width: 160, height: 160, borderRadius: 999, background: "rgba(255,255,255,0.08)", bottom: -40, left: -40 }} />
              <div style={{ position: "absolute", inset: 0, display: "grid", placeItems: "center", color: "#fff", fontFamily: "JetBrains Mono", fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", opacity: 0.7 }}>
                Illustration {i + 1}
              </div>
            </div>
          </div>
        ))}
      </div>

      <H2>Anatomy</H2>
      <div className="card" style={{ padding: 18 }}>
        <ul style={{ margin: 0, paddingLeft: 20, fontSize: 13.5, lineHeight: 1.8 }}>
          <li><b>Foreground:</b> stylized scene that emphasizes the most important information.</li>
          <li><b>Background shapes:</b> rounded brand shapes (circles, soft curves) for movement.</li>
          <li><b>Palette:</b> canonical primary or secondary gradient as the base.</li>
          <li><b>No type:</b> illustrations stand alone — copy lives in adjacent layout, not on top.</li>
        </ul>
      </div>
    </div>
  );
}

function PatternPage() {
  const tiles = [
    { c: "pattern-grid", n: "Engineered Grid", d: "Technical density. Use behind product mockups." },
    { c: "pattern-dot", n: "Indigo Dot", d: "Subtle background texture when gradient is too loud." },
    { c: "pattern-mesh", n: "Spectral Mesh", d: "Default brand aura — radial gradients on Slate Grey." },
    { c: "pattern-stripe", n: "Diagonal Signal", d: "High-energy stripes over hero gradient. Sparingly." },
    { c: "pattern-noise", n: "Tri-Stop with Grain", d: "Premium / event surfaces — depth + grain." },
    { c: "", n: "Solid Compliance Blue", d: "When everything else is too much. The most trusted surface." },
  ];
  return (
    <div className="page-anim">
      <SectionHeader eyebrow="Brand · Patterns" title="Patterns & textures"
        lede="Six surface treatments. The default is gradient — patterns are for moments where the surface needs to do something extra."
        provenance={{ level: "recommended", note: "The 2025 Brand Guide doesn't formalize patterns. These six treatments are observed/proposed standards — verify against the Figma Patterns-Textures page (9 frames) before production use." }} />
      <div className="grid grid-3">
        {tiles.map((t, i) => (
          <div key={i} className="card" style={{ padding: 0, overflow: "hidden" }}>
            <div className={"pattern-tile " + (t.c || "")} style={{ borderRadius: 0, border: "none", background: t.c ? undefined : "var(--rs-compliance-blue)" }} />
            <div style={{ padding: 14 }}>
              <h4 style={{ margin: "0 0 4px", fontSize: 13 }}>{t.n}</h4>
              <p style={{ margin: 0, fontSize: 11.5, color: "var(--rs-text-muted)" }}>{t.d}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function SourcesPage() {
  return (
    <div className="page-anim">
      <SectionHeader eyebrow="About" title="Sources & provenance"
        lede="What's canonical, what's observed, what's proposed."
        provenance={{ level: "verified", note: "Source bookkeeping — what informed every claim in this guide." }} />

      <H2>Canonical source</H2>
      <div className="card" style={{ padding: 20, background: "rgba(16,143,110,0.04)", borderColor: "rgba(16,143,110,0.25)" }}>
        <div style={{ fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "#0f7a5e", fontWeight: 700, marginBottom: 6 }}>✓ Verified</div>
        <h3 style={{ margin: "0 0 6px", fontSize: 18 }}>RegScale Design & Brand Guide</h3>
        <p style={{ margin: 0, fontSize: 13.5, color: "var(--rs-text-muted)" }}>
          Updated February 2025 · 18 pages. Authoritative source for logo, color, typography, CTA, photography, iconography, and platform illustration directions.
        </p>
      </div>

      <H2>Secondary sources</H2>
      <div className="grid grid-3">
        {TT.sources.secondary.map(s => (
          <div key={s} className="card" style={{ padding: 16 }}>
            <div style={{ fontSize: 10, letterSpacing: "0.16em", textTransform: "uppercase", color: "#0086a6", fontWeight: 700, marginBottom: 4 }}>◐ Observed</div>
            <div style={{ fontSize: 13.5, fontWeight: 600 }}>{s}</div>
          </div>
        ))}
      </div>
      <p style={{ fontSize: 12.5, color: "var(--rs-text-muted)", marginTop: 12 }}>
        Used to verify exact production values (CTA pill specs, webinar key dimensions, gradient overlay rotation, logo lockup variants). Where Figma and the 2025 PDF disagree, the PDF wins.
      </p>

      <H2>Proposed extensions</H2>
      <div className="grid grid-2">
        {TT.sources.proposed.map(s => (
          <div key={s} className="card" style={{ padding: 16 }}>
            <div style={{ fontSize: 10, letterSpacing: "0.16em", textTransform: "uppercase", color: "#A55A14", fontWeight: 700, marginBottom: 4 }}>⚙ Proposed</div>
            <div style={{ fontSize: 13.5, fontWeight: 600 }}>{s}</div>
          </div>
        ))}
      </div>
      <p style={{ fontSize: 12.5, color: "var(--rs-text-muted)", marginTop: 12 }}>
        The 2025 Brand Guide is silent on motion and on voice/tone. The standards in those sections are authored extensions and need brand-team sign-off before adoption.
      </p>

      <H2>Provenance legend</H2>
      <div className="card" style={{ padding: 0, overflow: "hidden" }}>
        <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 13 }}>
          <thead><tr style={{ background: "var(--rs-bg)", textAlign: "left" }}>
            <th style={{ padding: "10px 14px" }}>Badge</th><th>Meaning</th><th>What to trust</th>
          </tr></thead>
          <tbody>
            <tr style={{ borderTop: "1px solid var(--rs-border)" }}>
              <td style={{ padding: "10px 14px" }}><span style={{ color: "#0f7a5e", fontWeight: 700, fontFamily: "JetBrains Mono" }}>✓ Verified</span></td>
              <td>Sourced directly from the 2025 Brand Guide PDF.</td>
              <td>Canonical. Use as-is.</td>
            </tr>
            <tr style={{ borderTop: "1px solid var(--rs-border)" }}>
              <td style={{ padding: "10px 14px" }}><span style={{ color: "#0086a6", fontWeight: 700, fontFamily: "JetBrains Mono" }}>◐ Mixed</span></td>
              <td>Core values verified; structure or naming is recommended.</td>
              <td>Values are canonical; verify naming with brand team.</td>
            </tr>
            <tr style={{ borderTop: "1px solid var(--rs-border)" }}>
              <td style={{ padding: "10px 14px" }}><span style={{ color: "#A55A14", fontWeight: 700, fontFamily: "JetBrains Mono" }}>⚙ Recommended</span></td>
              <td>Authored standards — not in source materials.</td>
              <td>Treat as proposal pending brand-team sign-off.</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  );
}

Object.assign(window, { ColorPage, GradientPage, TypePage, IconographyPage, PatternPage, PhotographyPage, PlatformIllustrationsPage, SourcesPage });