/* ============================================================
   PAGES BRIDGE — loads after style.css and system.css.
   Re-maps the legacy tokens used by existing inner pages onto the
   Systems Documentation palette, and defines the legacy variables
   that were referenced but never declared. Temporary: each page's
   legacy rules disappear as pages are redesigned (Stage 3+).
   ============================================================ */

:root {
  /* Fonts: one family set, loaded once in <head> */
  --font-serif: var(--font-display);
  --r-full: 3px;   /* pills become squared tags, matching the drafting language */
  --font-sans:  'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:  'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* Surfaces */
  --bg-base:     var(--paper);
  --bg-warm:     var(--sunken);
  --bg-card:     var(--surface);
  --bg-elevated: var(--surface);
  --bg-deep:     var(--sunken);

  /* Navy / ink */
  --navy:        var(--ink);
  --navy-soft:   var(--ink-2);
  --navy-muted:  var(--ink-3);

  /* Warm accents collapse into the single restrained blue */
  --rust:        var(--blue);
  --rust-soft:   #aab4f5;
  --rust-pale:   var(--blue-wash);
  --rust-border: rgba(27, 47, 216, 0.28);
  --sage:        var(--blue);
  --sage-pale:   var(--blue-wash);
  --sage-border: rgba(27, 47, 216, 0.28);
  --gold:        var(--ink-2);
  --gold-pale:   var(--sunken);

  /* Text */
  --text-ink:    var(--ink);
  --text-body:   var(--ink-2);
  --text-mid:    var(--ink-2);
  --text-soft:   var(--ink-3);

  /* Borders */
  --border-light:  var(--rule);
  --border-base:   var(--rule);
  --border-strong: var(--rule-strong);

  /* Variables used by inner pages but never declared before */
  --accent-blue:    var(--blue);
  --accent-teal:    var(--blue);
  --accent-cyan:    var(--blue);
  --accent-green:   var(--blue);
  --accent-amber:   var(--ink-2);
  --text-muted:     var(--ink-3);
  --text-secondary: var(--ink-2);
  --border-dim:     var(--rule);
  --border-glow:    var(--rule-strong);
  --radius-md:      6px;

  /* Calmer shape and shadow */
  --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-xl: 8px;
  --shadow-xs: none; --shadow-sm: none; --shadow-md: none; --shadow-lg: none; --shadow-card: none;
  --shadow-glow-rust: none; --shadow-glow-navy: none;
}

/* Remove decoration that belongs to the old look */
body::before, .hero-bg-orb { display: none !important; }
body { overflow-x: clip; }

/* Content created for the old layout keeps its bullets and wide paragraphs */
main p { max-width: none; }
main ul:not([class]) li, main ol:not([class]) li { list-style: revert; }
main ul[class*="list"] li { list-style: none; }
main h1, main h2, main h3 { letter-spacing: -0.015em; }

/* Code blocks scroll instead of overflowing on small screens */
main pre { overflow-x: auto; max-width: 100%; }
main img { max-width: 100%; height: auto; }
main table { max-width: 100%; }

/* ============================================================
   CASE-STUDY / INNER PAGE TREATMENT (Systems Documentation)
   Flat, hairline-ruled "document" blocks instead of floating cards.
   ============================================================ */
.page-hero { background: none !important; padding-block: var(--s-8) var(--s-6); border-bottom: 1px solid var(--ink); }
.page-hero .page-title { font-size: var(--step-3); color: var(--ink); }
.page-hero .page-title span, .page-title .text-green, .page-title .text-blue, .page-title .text-cyan { color: var(--blue); }
.page-subtitle { max-width: 62ch; color: var(--ink-2); font-size: var(--step-1); line-height: 1.5; }
.section-eyebrow { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3) !important; }
.breadcrumb, .breadcrumb a { font-family: var(--font-mono); font-size: var(--step--1); color: var(--ink-3); }
.breadcrumb-current { color: var(--ink); }

.content-block, .info-card, .cert-card, .contact-card, .form-card {
  background: transparent !important; border: 0 !important; border-top: 1px solid var(--rule) !important;
  border-radius: 0 !important; box-shadow: none !important; padding: var(--s-6) 0 !important;
}
.content-block:first-child { border-top: 1px solid var(--ink) !important; }
.content-block > h2, .info-card-title { font-size: var(--step-1); margin-bottom: var(--s-4); color: var(--ink); }
.info-card-title { font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-3); }
.detail-layout { gap: var(--s-8); }

.badge, .project-tag, .skill-item { border-radius: 3px; font-family: var(--font-mono); letter-spacing: 0.02em; }
.badge { background: transparent; border: 1px solid var(--rule-strong); color: var(--ink-2); padding: 0.25rem 0.75rem; }
.badge.green, .badge.blue, .badge.cyan { border-color: rgba(29,78,216,.35); color: var(--blue); background: var(--blue-wash); }

/* Buttons on inner pages: same language as the homepage */
.btn { border-radius: var(--radius); box-shadow: none !important; }
.btn-primary, .btn-rust, .btn-blue { background: var(--tang); color: var(--ink); border: 1px solid var(--tang); font-weight: 600; }
.btn-primary:hover, .btn-rust:hover, .btn-blue:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--rule-strong); }
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); }

/* Screenshots and project tiles */
.screenshot-placeholder { background: none; border: 0; padding: 0; min-height: 0; margin-block: var(--s-4); }
.screenshot-img, .cert-img { width: 100%; height: auto; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--sunken); }
.project-card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: none; overflow: hidden; }
.project-card:hover { border-color: var(--ink); transform: none; box-shadow: none; }
.project-shot { border-bottom: 1px solid var(--rule); background: var(--sunken); }
.project-shot img { width: 100%; height: auto; aspect-ratio: 16 / 7; object-fit: cover; object-position: top; }

/* Code */
pre { background: var(--ink); color: #e7ebf5; border-radius: var(--radius); border: 0; }
code { font-family: var(--font-mono); }

/* Reveal animation must never hide content when JS or motion is unavailable */
.animate-in { opacity: 1 !important; transform: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
.copy-btn { position: absolute; top: 10px; right: 10px; font: 500 0.7rem var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.25); color: #e7ebf5; padding: .3rem .7rem; border-radius: var(--radius); cursor: pointer; }
.copy-btn:hover { background: rgba(255,255,255,.18); }

/* Rhythm for plain prose inside case studies */
main .content-block p + p, main .content-block p + ul, main .content-block ul + p, main .content-block figure + p { margin-top: var(--s-4); }
main .content-block ul:not([class]) { padding-left: 1.25rem; display: grid; gap: var(--s-2); margin-top: var(--s-3); }

/* Inner-page headings share the homepage display face */
main h1, main h2, main h3, main h4 { font-stretch: 85%; font-weight: 700; letter-spacing: -0.015em; }
main h1 { font-stretch: 78%; font-weight: 800; }
.page-title .text-green, .page-title span { color: inherit; }