/*
 * Ghost Agent Lab print stylesheet: what the site and app look like on paper, built on the tokens.
 * Load it after tokens.css. The site links it with media="print"; the app imports it.
 *
 * Browsers leave background colors out when printing unless someone ticks "Background graphics", so anything that
 * relied on a dark background (heroes, the sidebar, footers, dark cards, filled buttons) would print as white text on
 * white paper. Here every surface becomes paper and every text color becomes ink, so a page prints the same either
 * way. The dark theme never applies on paper: tokens.css keeps it to screens.
 *
 * Status colors, charts and the accent stay in color, for color printers; on a black-and-white printer they come out
 * as greys. Each product hides its own chrome (navigation, buttons, assistants) in its own stylesheet.
 */

@page { margin: 16mm 14mm; }

@media print {
  :root {
    color-scheme: light;
    /* Surfaces: paper */
    --color-bg: var(--color-print-paper);
    --color-bg-app: var(--color-print-paper);
    --color-surface: var(--color-print-paper);
    --color-surface-muted: var(--color-print-wash);
    --color-surface-sunken: var(--color-print-wash);
    --color-surface-warm: var(--color-print-wash);
    --color-surface-accent: var(--color-print-wash);
    --color-surface-accent-wash: var(--color-print-wash);
    --color-surface-accent-deep: var(--color-print-wash);
    --color-surface-emphasis: var(--color-print-wash);
    --color-surface-inverse: var(--color-print-paper);
    --color-surface-inverse-raised: var(--color-print-wash);
    --color-surface-inverse-hover: var(--color-print-wash);
    --color-surface-inverse-active: var(--color-print-tint);
    --color-surface-inverse-pill: var(--color-print-paper);
    --color-surface-inverse-overlay: var(--color-print-paper);
    --color-glass: var(--color-print-paper);
    --color-ghost-fill: var(--color-print-wash);
    --color-ghost-tint: var(--color-print-wash);
    /* Text: ink, including text that was light because it sat on forest or a filled button */
    --color-ink: var(--color-print-ink);
    --color-ink-heading: var(--color-print-ink);
    --color-ink-muted: var(--color-print-ink-muted);
    --color-ink-faint: var(--color-print-ink-faint);
    --color-ink-inverse: var(--color-print-ink);
    --color-ink-inverse-soft: var(--color-print-ink-muted);
    --color-ink-inverse-muted: var(--color-print-ink-muted);
    --color-ink-inverse-faint: var(--color-print-ink-faint);
    --color-on-accent: var(--color-print-ink);
    --color-on-accent-brand: var(--color-print-ink);
    --color-on-selected: var(--color-print-ink);
    --color-selected: var(--color-print-tint);
    --color-accent-on-dark: var(--color-accent-strong);
    --color-mint-on-dark: var(--color-accent-strong);
    /* Lines */
    --color-border: var(--color-print-rule-light);
    --color-border-strong: var(--color-print-rule);
    --color-border-inverse: var(--color-print-rule-light);
    --color-ghost-line: var(--color-print-rule);
    --color-track: var(--color-print-tint);
    /* No depth on paper */
    --shadow-xs: none;
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-menu: none;
    --shadow-popover: none;
    --shadow-scrolled: none;
    --shadow-console: none;
    --shadow-ai: none;
  }

  html, body { background: var(--color-print-paper); color: var(--color-print-ink); }
  *, *::before, *::after { animation: none !important; transition: none !important; }

  /* Keep things whole across page breaks. */
  h1, h2, h3, h4, h5 { break-after: avoid; }
  img, svg, figure, table, pre, blockquote, tr, li { break-inside: avoid; }
  p { orphans: 3; widows: 3; }

  /* Anything marked for screens only. */
  .no-print, [data-no-print] { display: none !important; }
}