/*
 * Legacy page bridge.
 *
 * Pages that still use the older marketing templates (css/01–16) now render
 * the shared site header/footer (chrome.css) instead of the pixel sidebar.
 * This sheet, loaded after the legacy CSS, removes the sidebar offsets and
 * maps the pixel-era type and accents onto the design tokens so every public
 * page reads as one product. It is deliberately declarative and reversible:
 * delete the <link> in base.tera to get the old look back.
 *
 * Scope: legacy pages that render the shared header (body without .site-v2).
 * Dashboard/workspace pages keep their own navigation and are unaffected.
 */

/* The pixel display face becomes Inter; headings switch to Fraunces below.
   Declared after 10-product.css, so these faces win every SFPixel lookup and
   the pixel font files are never downloaded. */
@font-face { font-family: SFPixel; src: url("/static/fonts/inter-latin-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
/* The other pixel/novelty faces get the same treatment. Self-hosted OFL fonts:
   fonts/INTER-OFL.txt, fonts/FRAUNCES-OFL.txt. "Space Mono" (UI labels) maps to
   Inter too; real code keeps a monospace stack (see Type below). */
@font-face { font-family: "PixelAzureBonds"; src: url("/static/fonts/inter-latin-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "ChevyRayOeuf"; src: url("/static/fonts/inter-latin-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Space Mono"; src: url("/static/fonts/inter-latin-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "RPGFont"; src: url("/static/fonts/fraunces-latin-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Newrocker"; src: url("/static/fonts/fraunces-latin-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
/* A face whose descriptors exactly match an earlier one replaces it; a weight
   range alone does not, so normal (400) and bold get explicit faces as well. */
@font-face { font-family: SFPixel; src: url("/static/fonts/inter-latin-var.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: SFPixel; src: url("/static/fonts/inter-latin-var.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "PixelAzureBonds"; src: url("/static/fonts/inter-latin-var.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "PixelAzureBonds"; src: url("/static/fonts/inter-latin-var.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "ChevyRayOeuf"; src: url("/static/fonts/inter-latin-var.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Space Mono"; src: url("/static/fonts/inter-latin-var.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Space Mono"; src: url("/static/fonts/inter-latin-var.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Newrocker"; src: url("/static/fonts/fraunces-latin-var.woff2") format("woff2"); font-weight: 400; font-display: swap; }

body:not(.site-v2):has(.site-header) {
  /* Legacy font variables: labels and UI in Inter like the rest of the site. */
  --font-sans: var(--ff-sans);
  --font-mono: var(--ff-sans);
  --marketing-rail: 0px;
  --marketing-rail-tablet: 0px;
  --sf-bg: var(--c-bg);
  --sf-panel: var(--c-surface);
  --sf-panel-2: var(--c-surface-2);
  --sf-line: rgba(255, 255, 255, .12);
  --sf-text: var(--c-text);
  --sf-muted: var(--c-text-muted);
  --sf-lime: var(--c-accent);
  --sf-orange: var(--c-accent);
  --marketing-accent: var(--c-accent);
  --marketing-accent-warm: var(--c-accent);
  --marketing-surface: var(--c-bg);
  --marketing-surface-raised: var(--c-surface);
  --marketing-copy: var(--c-text);
  --marketing-copy-muted: var(--c-text-muted);
  /* Edition cards (13-editions.css) resolve these at :root, so restate them. */
  --ed-surface: var(--c-surface);
  --ed-surface-2: var(--c-surface-2);
  --ed-line: var(--c-line-strong);
  --ed-online: var(--c-sage);
  --ed-offline: var(--c-accent);
  --ed-warm: var(--c-accent);
  --ed-copy: var(--c-text);
  --ed-muted: var(--c-text-muted);
  background: var(--c-bg);
}

/* ---------- Layout: no sidebar rail ---------- */
body:not(.site-v2):has(.site-header) .blog-site,
body:not(.site-v2):has(.site-header) .sf-site { --marketing-rail: 0px; --marketing-rail-tablet: 0px; background: var(--c-bg); }
body:not(.site-v2):has(.site-header) :is(.sf-main, .product-footer, .blog-page) { margin-left: 0; }
body:not(.site-v2):has(.site-header) :is(.sf-main, .blog-page) { width: 100%; }
body:not(.site-v2):has(.site-header) .sf-sidebar,
body:not(.site-v2):has(.site-header) .sf-topbar { display: none; }

/* ---------- Type ---------- */
body:not(.site-v2):has(.site-header) :is(code, pre, kbd, samp) { font-family: var(--ff-mono); }
body:not(.site-v2):has(.site-header) main :is(h1, h2),
body:not(.site-v2):has(.site-header) :is(.auth-page-title, .error-content .section-title),
body:not(.site-v2):has(.site-header) .sf-hero h1,
body:not(.site-v2):has(.site-header) .sf-section h2,
body:not(.site-v2):has(.site-header) .sf-final h2 {
  font-family: var(--ff-display);
  font-weight: 600;
  letter-spacing: -.02em;
  text-transform: none;
  text-shadow: none;
  font-variation-settings: "opsz" 96;
}
body:not(.site-v2):has(.site-header) main h3 { letter-spacing: -.005em; text-transform: none; font-weight: 600; }
body:not(.site-v2):has(.site-header) main :is(h1, h2) em { font-style: italic; color: var(--c-accent); }
/* Pixel-era labels were tiny uppercase; give the Inter replacement a readable size. */
body:not(.site-v2):has(.site-header) :is(.sf-kicker, .sf-plan-label, .sf-nav-label) { font-weight: 600; letter-spacing: .14em; }

/* ---------- Controls ---------- */
body:not(.site-v2):has(.site-header) .sf-button {
  border-radius: var(--r-md);
  box-shadow: none;
  font-weight: 600;
  transform: none;
}
body:not(.site-v2):has(.site-header) .sf-button-primary {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-accent-ink) !important;
}
body:not(.site-v2):has(.site-header) .sf-button-primary:hover { background: var(--c-accent-hover); border-color: var(--c-accent-hover); }
body:not(.site-v2):has(.site-header) .sf-button:not(.sf-button-primary) { background: var(--c-surface-2); border-color: var(--c-line-strong); }

/* Square pixel cards and offset shadows become the tokenised card style. */
body:not(.site-v2):has(.site-header) :is(.sf-section-art, .sf-editor-showcase, .sf-step-media, .sf-pricing-grid article, .sf-library .product-starter) {
  border-color: var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: none;
  overflow: hidden;
}
body:not(.site-v2):has(.site-header) .sf-pricing-grid .sf-plan-featured { background: var(--c-surface-2); border-color: rgba(232, 178, 92, .5); }
body:not(.site-v2):has(.site-header) .sf-announcement { display: none; }

/* Legacy button families (.btn-gold / .btn-outline / .glass-button) adopt the token buttons. */
body:not(.site-v2):has(.site-header) main :is(.btn, .glass-button) {
  border-radius: var(--r-md);
  box-shadow: none;
  font-family: var(--ff-sans);
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: none;
  text-shadow: none;
}
body:not(.site-v2):has(.site-header) main :is(.btn-gold, .btn-primary, .glass-button:not(.glass-button--muted)) {
  background: var(--c-accent);
  border: 1px solid var(--c-accent);
  color: var(--c-accent-ink) !important;
}
body:not(.site-v2):has(.site-header) main :is(.btn-gold, .btn-primary, .glass-button:not(.glass-button--muted)):hover {
  background: var(--c-accent-hover);
  border-color: var(--c-accent-hover);
}
body:not(.site-v2):has(.site-header) main :is(.btn-outline, .btn-secondary, .glass-button--muted) {
  background: var(--c-surface-2);
  border: 1px solid var(--c-line-strong);
  color: var(--c-text) !important;
}
body:not(.site-v2):has(.site-header) main :is(.btn-outline, .btn-secondary, .glass-button--muted):hover { border-color: var(--c-accent); }