/* ============================================================================
   GTA BRAND DESIGN SYSTEM — SYSTEM / BASE
   ----------------------------------------------------------------------------
   Reset, base element defaults, layout primitives, motif backgrounds, and the
   print structure. Consumes SEMANTIC tokens only (var(--gta-*)) — no hard-coded
   color / type / spacing values. Load order: tokens.css -> system.css -> components.css
   ============================================================================ */

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
img, svg, picture { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

/* --- Document base -------------------------------------------------------- */
body {
  background-color: var(--gta-color-ground);
  color: var(--gta-color-ink);
  font-family: var(--gta-font-body);
  font-size: var(--gta-text-base);
  font-weight: var(--gta-weight-body);
  line-height: var(--gta-lh-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--gta-color-signal-cyan); color: var(--gta-charcoal-900); }

/* --- Base elements -------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--gta-font-headline);
  font-weight: var(--gta-weight-head);
  line-height: var(--gta-lh-snug);
  letter-spacing: var(--gta-tracking-tight);
  color: var(--gta-color-ink);
}
p { line-height: var(--gta-lh-relaxed); }
p + p { margin-top: var(--gta-space-4); }
strong, b { font-weight: var(--gta-weight-semibold); }
small { font-size: var(--gta-text-sm); }
code, kbd, samp { font-family: var(--gta-font-mono); font-size: 0.92em; }
hr {
  border: 0; height: var(--gta-border-width);
  background: var(--gta-color-line); margin: var(--gta-space-8) 0;
}
a { color: var(--gta-color-link); text-decoration: none; }
a:hover { color: var(--gta-color-link-hover); text-decoration: underline; text-underline-offset: 3px; }

/* --- Focus (visible, never color-alone) ----------------------------------- */
:focus-visible {
  outline: 2px solid var(--gta-color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--gta-radius-sm);
}

/* --- Layout primitives ---------------------------------------------------- */
.gta-page {
  max-width: var(--gta-maxw-page);
  margin-inline: auto;
  padding-inline: var(--gta-gutter);
}
.gta-prose { max-width: var(--gta-maxw-text); }
.gta-section { padding-block: var(--gta-space-16); }
.gta-stack > * + * { margin-top: var(--gta-space-4); }
.gta-stack-lg > * + * { margin-top: var(--gta-space-8); }
.gta-grid {
  display: grid;
  gap: var(--gta-space-6);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.gta-cluster { display: flex; flex-wrap: wrap; gap: var(--gta-space-4); align-items: center; }

/* --- Surfaces ------------------------------------------------------------- */
.gta-surface   { background: var(--gta-color-surface);   border: var(--gta-border); border-radius: var(--gta-radius-lg); }
.gta-surface-2 { background: var(--gta-color-surface-2); border: var(--gta-border); border-radius: var(--gta-radius-lg); }

/* --- Contour motif background (decorative; screen). Restraint: corners/edges,
       low density. Use as an attribute on a positioned container.            --- */
.gta-contours {
  position: relative;
  isolation: isolate;
}
.gta-contours::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("../assets/bg-contours.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}

/* CONTENT-SAFE PLACEMENT: contours must never run behind headlines/body text.
   When a contour field backs a content region, clear it off the text column with
   one of these modifiers so copy always sits on clean ground. --text-left clears
   the left ~half (for left-aligned text), keeping the open right/upper area. */
.gta-contours--text-left::before {
  -webkit-mask-image: linear-gradient(to right, transparent 0 50%, #000 76%);
  mask-image: linear-gradient(to right, transparent 0 50%, #000 76%);
}
.gta-contours--text-right::before {
  -webkit-mask-image: linear-gradient(to left, transparent 0 50%, #000 76%);
  mask-image: linear-gradient(to left, transparent 0 50%, #000 76%);
}

/* ============================================================================
   PRINT STRUCTURE
   tokens.css remaps the palette to the light theme automatically in print.
   Here we handle what shows/hides, color retention, and page breaks.
   ============================================================================ */
.print-only { display: none; }

@media print {
  .screen-only { display: none !important; }
  .print-only  { display: block !important; }

  /* Force meaningful color to print (spectrum rule, status, kept-dark panels). */
  .gta-spectrum-rule,
  .gta-badge,
  .gta-stat,
  .gta-status-dot,
  .gta-proof-card__media,
  .print-keep-dark,
  [class*="gta-spectrum"] {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Panels that must stay on the signature dark ground on paper (e.g. a software
     screenshot card) opt back in here, independent of the light page remap. */
  .print-keep-dark {
    background: var(--gta-charcoal-900) !important;
    color: var(--gta-white) !important;
  }

  /* Keep components whole across page breaks. */
  .gta-proof-card, .gta-stat, .gta-quote, figure,
  .gta-diagram-figure, .gta-card { break-inside: avoid; }
  h1, h2, h3, .gta-display, .gta-h1, .gta-h2 { break-after: avoid; }
  .gta-page-break { break-before: page; }

  /* Decorative screen contours off; light contour frame on if requested. */
  .gta-contours::before { background-image: url("../assets/bg-contours-light.svg"); }

  a { color: inherit; text-decoration: none; }
  body { background: #fff; }
}