/* =========================================================================
   Blueprint; guide chrome
   ------------------------------------------------------------------------
   Shared presentation layer for the design-system guide surfaces (landing,
   system index, component library, specimens, voice doc). Scaffolding only;
   it is NOT part of the shippable system. Pages link colors_and_type.css
   first (the product), then this file. Everything here is built on Mapping
   tokens, so it themes for free. Classes are prefixed `gd-` to stay clear of
   the component markup the library ships for copy-paste.
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

body { margin: 0; background: var(--background-primary); color: var(--content-primary); }

.gd-container { max-width: var(--layout-desktop-container); margin: 0 auto; padding-left: 32px; padding-right: 32px; }

/* --- Header --------------------------------------------------------------- */
.gd-header { position: sticky; top: 0; z-index: 50; background: var(--surface-primary); border-bottom: 1px solid var(--border-subtle); }
@supports (backdrop-filter: blur(1px)) {
  .gd-header { background: color-mix(in srgb, var(--surface-primary) 82%, transparent); backdrop-filter: saturate(1.3) blur(12px); -webkit-backdrop-filter: saturate(1.3) blur(12px); }
}
.gd-header-inner { display: flex; align-items: center; gap: 20px; height: 68px; }
.gd-wordmark { display: inline-flex; align-items: center; text-decoration: none; }
.gd-wordmark img { height: 26px; display: block; }
.gd-wordmark .gd-dark { display: none; }
[data-theme="dark"] .gd-wordmark .gd-light { display: none; }
[data-theme="dark"] .gd-wordmark .gd-dark { display: block; }
.gd-back { display: inline-flex; align-items: center; gap: 8px; color: var(--content-tertiary); text-decoration: none; font: var(--type-label-md-medium); transition: color 120ms ease; }
.gd-back:hover { color: var(--content-primary); }
.gd-header .gd-spacer { flex: 1; }
.gd-header-title { font: var(--type-label-lg-semibold); letter-spacing: var(--type-subheading-tracking); color: var(--content-secondary); }

/* --- Theme toggle --------------------------------------------------------- */
.gd-toggle { height: 40px; padding: 0 14px; background: var(--surface-primary); color: var(--content-primary); border: 1px solid var(--border-light); border-radius: var(--radius-full); font: var(--type-label-md-medium); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; transition: background 120ms ease, border-color 120ms ease; }
.gd-toggle:hover { background: var(--surface-primary-hover); border-color: var(--border-medium); }
.gd-toggle i { font-size: 18px; }

/* --- The motif -----------------------------------------------------------
   The signature double-underline with descender breaks, abstracted to a
   connective mark. Inherits currentColor; scale via font-size / width. */
.gd-motif { display: inline-block; width: 56px; color: var(--content-brand); line-height: 0; }
.gd-motif svg { width: 100%; height: auto; display: block; fill: currentColor; }
.gd-motif.gd-motif-ink { color: var(--content-primary); }

/* --- Kicker (replaces the old uppercase eyebrow) -------------------------- */
.gd-kicker { display: inline-flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.gd-kicker .gd-kicker-text { font: var(--type-label-lg-semibold); letter-spacing: var(--type-subheading-tracking); color: var(--content-tertiary); }

/* --- Serif accent --------------------------------------------------------
   Newsreader italic. Sparing emphasis only; one moment per view, never a
   whole paragraph. `.gd-accent` inside a heading tints a phrase; the block
   variants set editorial pull quotes. */
.gd-accent { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: 0; }
.gd-lede-accent { font: var(--type-accent-lg); color: var(--content-secondary); margin: 0; }

/* --- Hero / lede ---------------------------------------------------------- */
.gd-hero { padding-top: 84px; padding-bottom: 40px; }
.gd-hero h1 { font: var(--type-heading-2xl); letter-spacing: var(--type-heading-tracking); color: var(--content-primary); margin: 0 0 20px; max-width: 15ch; text-wrap: balance; }
.gd-hero .gd-lede { font: var(--type-body-lg-regular); color: var(--content-tertiary); max-width: 60ch; margin: 0; }
.gd-hero .gd-lede .gd-accent { color: var(--content-secondary); }

/* --- Quick links ---------------------------------------------------------- */
.gd-quick { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 28px; }
.gd-pill { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: var(--radius-full); background: var(--surface-brand-subtle); color: var(--content-brand-strong); font: var(--type-label-md-semibold); text-decoration: none; border: 1px solid transparent; transition: background 120ms ease, color 120ms ease; }
.gd-pill:hover { background: var(--surface-brand); color: var(--content-primary-inverse); }
.gd-pill i { font-size: 18px; }

/* --- Sections ------------------------------------------------------------- */
.gd-section { padding-top: 48px; padding-bottom: 32px; }
.gd-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.gd-section-head .gd-motif { width: 44px; margin-bottom: 14px; }
.gd-section h2 { font: var(--type-heading-lg); letter-spacing: var(--type-heading-tracking); color: var(--content-primary); margin: 0; }
.gd-section .gd-sub { font: var(--type-body-md-regular); color: var(--content-tertiary); margin: 8px 0 0; max-width: 62ch; }
.gd-section .gd-sub .gd-accent { color: var(--content-secondary); }
.gd-viewall { color: var(--content-link); font: var(--type-body-md-semibold); text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.gd-viewall:hover { color: var(--content-link-hover); }

/* --- Tile grid ------------------------------------------------------------ */
.gd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 16px; }
.gd-grid.gd-grid-2 { grid-template-columns: repeat(2, 1fr); gap: 20px; }
.gd-tile { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: var(--radius-lg); background: var(--surface-primary); border: 1px solid var(--border-subtle); text-decoration: none; color: inherit; transition: box-shadow 160ms ease, border-color 160ms ease; overflow: hidden; }
.gd-tile:hover { box-shadow: var(--shadow-lg); border-color: transparent; }
.gd-tile .gd-ic { width: 44px; height: 44px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; background: var(--surface-brand-subtle); color: var(--content-brand-strong); font-size: 23px; margin-bottom: 6px; }
.gd-tile h3 { font: var(--type-subheading-sm); letter-spacing: var(--type-subheading-tracking); color: var(--content-primary); margin: 0; }
.gd-tile p { font: var(--type-body-sm-regular); color: var(--content-tertiary); margin: 0; }
.gd-tile .gd-go { margin-top: auto; padding-top: 8px; font: var(--type-label-md-semibold); color: var(--content-link); display: inline-flex; align-items: center; gap: 6px; transition: color 120ms ease; }
.gd-tile:hover .gd-go, .gd-tile:focus-visible .gd-go { color: var(--content-link-hover); }
/* the motif quietly signs each tile on hover */
.gd-tile .gd-tile-motif { position: absolute; right: 18px; bottom: 16px; width: 40px; color: var(--border-light); opacity: 0; transition: opacity 200ms ease; pointer-events: none; }
.gd-tile:hover .gd-tile-motif { opacity: 1; }

/* larger feature tile */
.gd-tile.gd-tile-feature { padding: 28px; }
.gd-tile.gd-tile-feature .gd-ic { width: 48px; height: 48px; font-size: 26px; }
.gd-tile.gd-tile-feature h3 { font: var(--type-subheading-lg); letter-spacing: var(--type-subheading-tracking); }
.gd-tile.gd-tile-feature p { font: var(--type-body-md-regular); }

/* --- Ink band (editorial contrast) --------------------------------------- */
.gd-band-ink { background: var(--surface-inverse); color: var(--content-primary-inverse); margin-top: 40px; }
.gd-band-ink .gd-band-inner { padding-top: 72px; padding-bottom: 72px; }
.gd-band-ink .gd-kicker-text { color: var(--content-tertiary-inverse); }
.gd-band-ink h2 { font: var(--type-heading-2xl); letter-spacing: var(--type-heading-tracking); color: var(--content-primary-inverse); margin: 0 0 20px; max-width: 20ch; text-wrap: balance; }
.gd-band-ink p { font: var(--type-body-lg-regular); color: var(--content-secondary-inverse); max-width: 60ch; margin: 0; }
.gd-band-ink .gd-accent { color: var(--content-primary-inverse); }
.gd-band-ink .gd-motif { color: var(--content-primary-inverse); }

/* --- Copy-to-clipboard affordance ---------------------------------------- */
.gd-copy { position: relative; cursor: pointer; }
.gd-copy::after { content: "Copied"; position: absolute; top: 50%; right: 10px; transform: translateY(-50%) scale(0.9); background: var(--surface-inverse); color: var(--content-primary-inverse); font: var(--type-label-sm-semibold); padding: 3px 8px; border-radius: var(--radius-full); opacity: 0; pointer-events: none; transition: opacity 160ms ease, transform 160ms ease; }
.gd-copy.is-copied::after { opacity: 1; transform: translateY(-50%) scale(1); }

/* --- Footer --------------------------------------------------------------- */
.gd-footer { margin-top: 64px; border-top: 1px solid var(--border-subtle); }
.gd-footer-inner { padding-top: 32px; padding-bottom: 32px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.gd-footer .gd-motif { width: 52px; color: var(--content-tertiary); }
.gd-footer p { font: var(--type-label-sm-regular); color: var(--content-tertiary); margin: 0; }
.gd-footer .gd-foot-meta { display: flex; gap: 8px; align-items: center; font: var(--type-label-sm-regular); color: var(--content-tertiary); }
.gd-footer .gd-foot-meta .gd-accent { font-size: 15px; color: var(--content-secondary); }

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 768px) {
  .gd-container { padding-left: 16px; padding-right: 16px; }
  .gd-grid.gd-grid-2 { grid-template-columns: 1fr; }
  .gd-hero { padding-top: 56px; }
  .gd-hero h1 { max-width: none; }
  .gd-section-head { flex-direction: column; align-items: flex-start; gap: 12px; }
}