/* Vincentt shared design foundation.
   Canonical token values: design-tokens.json
   This file is the runtime CSS layer for all static landing pages. */
@font-face {
  font-family: "Ibrand";
  src: url("assets/ibrand/Ibrand.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Halfre";
  src: url("assets/halfre/Web-TT/Halfre.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Xenon Nue";
  src: url("assets/Xenon Nue/PostScript/XenonNue-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Xenon Nue";
  src: url("assets/Xenon Nue/PostScript/XenonNue-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
:root,
[data-theme="light"] {
  color-scheme: light;
  --arles: #F4D968;
  --arles-light: #F8E58B;
  --rhone: #3A6DB5;
  --rhone-dark: #1F5A9D;
  --rhone-light: #6686C3;
  --cypress: #232528;
  --cypress-light: #454547;
  --dew: #EBF6FD;
  --dew-light: #F2F9FD;
  --canvas: #EBF6FD;
  --surface: #FFFFFF;
  --surface-2: #F2F9FD;
  --text-primary: #232528;
  --text-secondary: #454547;
  --text-muted: #454547;
  --border: #6686C3;
  --border-subtle: rgba(69, 69, 71, .28);
  --action: #1F5A9D;
  --action-text: #FFFFFF;
  --highlight: #F4D968;
  --radius-card: 12px;
  --radius-control: 8px;
  --radius-pill: 9999px;
  --font-display: "Ibrand", Georgia, serif;
  --font-support: "Halfre", "Ibrand", Georgia, serif;
  --font-ui: "Xenon Nue", "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* Compatibility aliases for the existing page rules. */
  --brand: var(--rhone-dark);
  --brand-2: var(--rhone);
  --brand-deep: var(--cypress);
  --brand-soft: var(--rhone-light);
  --gold: var(--arles);
  --gold-light: var(--arles-light);
  --bg: var(--canvas);
  --bg-2: var(--dew-light);
  --subtle: var(--dew);
  --border-2: var(--border);
  --ink: var(--text-primary);
  --text: var(--text-secondary);
  --text-2: var(--text-secondary);
  --muted: var(--text-muted);
  --faint: var(--text-muted);
  --radius: var(--radius-card);
}

[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #232528;
  --surface: #2D3238;
  --surface-2: #3A6DB5;
  --text-primary: #FFFFFF;
  --text-secondary: #EBF6FD;
  --text-muted: #EBF6FD;
  --border: #6686C3;
  --border-subtle: rgba(235, 246, 253, .36);
  --action: #6686C3;
  --action-text: #232528;
  --highlight: #F4D968;
}

html, body { background: var(--canvas); color: var(--text-secondary); }
body { transition: background-color .18s ease, color .18s ease; font-family: var(--font-ui); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; }
.sec-tag, .eyebrow { font-family: var(--font-support); }
.btn, input, button, .nav-links, .foot-links, .plug-copy, .plug-steps { font-family: var(--font-ui); }
h1, h2, h3, .why li, .q-chip, .url-bar, .plug-copy code, .plug-steps code { color: var(--text-primary); }
a, em, .nav-links a.link:hover, .foot-links a:hover { color: var(--rhone); }
.glow { display: none; }

header.nav { background: color-mix(in srgb, var(--canvas) 94%, transparent) !important; backdrop-filter: none; }
header.nav.scrolled { background: var(--surface) !important; border-color: var(--border-subtle); }
.nav-links a.link, .foot-links a, .toc a, .plug-tab, .pill, .plug-steps li { color: var(--text-secondary); }

.btn { background: var(--surface); color: var(--text-primary); border-color: var(--border); border-radius: var(--radius-pill); box-shadow: none; }
.btn:hover { border-color: var(--rhone); box-shadow: none; }
.btn.primary { background: var(--action); color: var(--action-text); box-shadow: none; }
.btn.primary:hover { box-shadow: none; }
.btn.lg { border-radius: var(--radius-pill); }
.theme-toggle { width: 38px; height: 38px; padding: 0; border-radius: var(--radius-pill); }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .sun { display: none; }
[data-theme="dark"] .theme-toggle .moon { display: none; }
[data-theme="dark"] .theme-toggle .sun { display: block; }
.brand-logo-dark { display: none !important; }
[data-theme="dark"] .brand-logo-light { display: none !important; }
[data-theme="dark"] .brand-logo-dark { display: block !important; }

.eyebrow, .feature .ico { color: var(--rhone-dark); background: var(--dew-light); border-color: var(--border); }
[data-theme="dark"] .eyebrow, [data-theme="dark"] .feature .ico { color: var(--dew); background: rgba(58,109,181,.3); }
.eyebrow .pulse { background: var(--rhone); box-shadow: 0 0 0 3px rgba(102,134,195,.28); }
.eyebrow .pulse::after { display: none; }
.hero-title .grad { background: none; color: var(--rhone); -webkit-text-fill-color: currentColor; }
.hero-note .hl, .sec-tag, .url-bar .lock, .url-bar .slug, .msg.ai .tool { color: var(--rhone-dark); }

.demo-card, .step, .feature, .case, .publish-card, .quadrant, .toc, .plug-copy, .q-chip { background: var(--surface); border-color: var(--border-subtle); box-shadow: none; }
.demo-bar, .msg.ai, .url-bar, code, .plug-steps code { background: var(--surface-2); border-color: var(--border-subtle); }
.msg.user, .step .num, .case .case-ico { background: var(--action); color: var(--action-text); box-shadow: none; }
.preview { background: var(--cypress); }
.preview .badge { color: var(--dew); background: rgba(235,246,253,.1); border-color: rgba(235,246,253,.36); }
.orb { background: var(--arles); filter: none; box-shadow: none; }
.feature:hover, .step:hover, .case:hover, .pill:hover { box-shadow: none; border-color: var(--rhone); }
.quadrant { background-image: none; }
.quadrant .q-cell { background: rgba(58,109,181,.14); border-color: var(--rhone); }
.quadrant .line-h, .quadrant .line-v { background: var(--border); }
.quadrant .q-zone, .quadrant .q-zone b { color: var(--rhone); }
.quadrant .axis-end, .q-chip small, .publish-card .meta, .foot-inner .muted, .hero-note { color: var(--text-muted); }
.why li .chk { color: var(--cypress); }
.cta-band { background: var(--cypress); box-shadow: none; }
.cta-band::after { display: none; }
.cta-band .grad { color: var(--arles); }
.cta-band p, .cta-hint { color: var(--dew) !important; }
.cta-band .btn { background: var(--arles); color: var(--cypress); }
.cta-band .btn.ghost { background: transparent; color: var(--dew); border-color: var(--dew); }
.cta-input { border-color: var(--border); }
.cta-input:focus { box-shadow: 0 0 0 3px var(--rhone-light); }
.cta-input.invalid { box-shadow: 0 0 0 3px var(--arles); }
.plug-tab[aria-selected="true"] { background: var(--surface); border-color: var(--text-primary); }
.plug-tab:hover { border-color: var(--rhone); }
#tab-chatgpt svg, #tab-claude svg { color: var(--rhone); }

:focus-visible { outline: 3px solid var(--arles); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { body { transition: none; } }

@media (max-width: 760px) {
  .nav-links { gap: 10px; }
  .theme-toggle { display: inline-flex; }
}