/* ==========================================================================
   legacy-bridge.css — re-skin an existing house-style page without rebuilding it.

   The older hand-built pages (projects/arcology) already use a sound token
   system: :root defines --bg, --panel, --text, --accent and friends, and every
   rule below reads from those. That means the whole page can be moved onto the
   mystical western palette by repointing the tokens, with zero changes to the
   markup or the 800 lines of layout beneath it.

   Load this AFTER the page's own <style> block — right before </head>:

     <link rel="stylesheet" href="/assets/fonts/fonts.css">
     <link rel="stylesheet" href="/assets/legacy-bridge.css">

   Do NOT load dehaven.css alongside it. These pages define their own .page,
   .card and header rules, and the two systems would collide.
   ========================================================================== */

:root {
  /* --- The old names, pointed at the new palette --- */
  --bg:      #171310;   /* was #0d1117 — cold blue-black, now warm night */
  --panel:   #1F1915;
  --panel-2: #2A211B;
  --text:    #EDE3D2;
  --muted:   rgba(237, 227, 210, .68);
  --line:    rgba(200, 150, 62, .28);
  --accent:  #B4553A;   /* was #6bb7ff — desert rust replaces the blue */
  --accent-2:#C8963E;   /* brass */
  --green:   #7C8B6B;   /* sage */
  --danger:  #C4553A;
  --white:   #FBF4E8;
  --shadow:  0 22px 60px rgba(0, 0, 0, .55);

  /* --- New tokens the bridge itself needs --- */
  --dh-head: "Cinzel", "Trajan Pro", Georgia, serif;
  --dh-body: "EB Garamond", Georgia, "Times New Roman", serif;
  --dh-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --dh-brass: #C8963E;
  --dh-hair: rgba(200, 150, 62, .28);
}

/* --- Typography ---------------------------------------------------------
   The old pages hard-code Inter/system-ui on body rather than reading a token,
   so these have to be named explicitly. */

body {
  font-family: var(--dh-body);
  font-size: 1.09rem;
  line-height: 1.72;
  /* Replace the blue/amber corner glows with the desert-dusk gradient. */
  background-image:
    radial-gradient(120% 80% at 88% -10%, rgba(200, 150, 62, .16), transparent 55%),
    radial-gradient(100% 70% at 6% 0%, rgba(74, 59, 92, .22), transparent 60%),
    radial-gradient(140% 100% at 50% 120%, rgba(107, 74, 50, .18), transparent 60%);
  background-attachment: fixed;
  position: relative;
}

h1, h2, h3, h4, h5, h6,
.brand, .eyebrow, .kicker, .label, .btn, nav a {
  font-family: var(--dh-head);
  letter-spacing: .04em;
}

h1, h2, h3, h4, h5, h6 { color: #EDE3D2; }

code, pre, .value, .mono { font-family: var(--dh-mono); }

/* Uppercase micro-labels ride wider in Cinzel than they did in Inter. */
.eyebrow, .kicker, .label, .brand { letter-spacing: .16em; }

/* --- Grain ---------------------------------------------------------------
   The texture layer that stops the gradients reading as a generic dark theme.
   Attached to html rather than body, because these pages already use
   body::before for their own purposes in places. */

html::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: .16;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

/* --- Details the token swap cannot reach -------------------------------- */

/* Square brand marks become brass roundels, matching the rest of the site. */
.brand-mark {
  border-radius: 50%;
  border-color: var(--dh-brass) !important;
  color: var(--dh-brass) !important;
  box-shadow: inset 0 0 20px rgba(200, 150, 62, .18) !important;
}

/* Rounded card stock. */
.card, .panel, .step, details { border-radius: 14px; }

::selection { background: rgba(200, 150, 62, .28); color: #EDE3D2; }

:focus-visible { outline: 2px solid var(--dh-brass); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

@media print {
  html::after { display: none; }
}

/* --- Tables --------------------------------------------------------------
   The arcology spec tables are wider than a phone screen and were pushing the
   whole page sideways (a pre-existing bug, not one the palette swap caused).
   display:block lets a table scroll inside its own box instead of scrolling
   the document. The markup cannot be wrapped in a container from here, so this
   is the fix that works without touching the page. */

table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin-block: 1.4rem;
  font-size: .95rem;
}

th, td {
  border: 1px solid var(--dh-hair);
  padding: .55rem .8rem;
  text-align: left;
  vertical-align: top;
}

th {
  font-family: var(--dh-head);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--dh-brass);
  background: rgba(200, 150, 62, .07);
  white-space: nowrap;
}

tbody tr:nth-child(even) { background: rgba(237, 227, 210, .022); }