/*
  gregshevchenko.com shared chrome v1

  This file is the site-wide style asset hook for static HTML pages. Current
  pages still carry page-local inline CSS while the site migrates toward shared
  templates, so this asset intentionally uses a CSS layer: unlayered inline
  page CSS remains more specific in the cascade, while new or repaired pages
  still inherit the same token and shell defaults.

  Source-of-truth docs:
  - /projects/gregshevchenko-com/design/tokens/greg.tokens.json
  - /projects/gregshevchenko-com/design/components/registry.json
  - /projects/gregshevchenko-com/design/templates/
*/

@layer greg.site-chrome {
  :root {
    color-scheme: light;
    --font-display: "Humans Serif Display", "Instrument Serif", ui-serif, serif;
    --font-body: "Humans Text", "Newsreader", ui-serif, serif;
    --font-ui: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: "Humans Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --sans: var(--font-ui);
    --body: var(--font-body);
    --serif: var(--font-display);
    --mono: var(--font-mono);
    --paper: #fafaf8;
    --panel: #eff3f1;
    --ink: #101820;
    --muted: #4c575c;
    --soft: #69706c;
    --line: rgba(16, 24, 32, 0.13);
    --accent: #0aa38f;
    --accent-dark: #08796d;
    --max: 720px;
    --article-max: 720px;
  }

  html {
    background: var(--paper);
    scroll-behavior: smooth;
  }

  body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--body);
    text-rendering: geometricPrecision;
  }

  .site-header,
  main,
  .site-footer {
    width: min(var(--max), calc(100% - 36px));
    margin-inline: auto;
  }

  .hero,
  article,
  .summary-card,
  .source-list,
  .faq {
    max-width: var(--article-max);
    margin-inline: auto;
  }

  .site-header,
  .site-footer,
  .nav,
  .nav-toggle,
  .cta,
  .chip,
  .pill,
  .eyebrow,
  .kicker,
  .meta,
  .meta-label,
  .tag,
  .badge,
  button {
    font-family: var(--sans);
  }

  img {
    display: block;
    max-width: 100%;
  }

  a {
    color: inherit;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
  }

  a:hover {
    color: var(--accent-dark);
  }

  .source-list,
  .source-item,
  .source-item p,
  .source-item a {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  article pre,
  article table {
    max-width: 100%;
  }

  @media (max-width: 760px) {
    .site-header,
    main,
    .site-footer {
      width: min(var(--max), calc(100% - 36px));
    }
  }
}