/* tokens-base.css — shared primitives for ASG + Gardenbrary.
   Skins (skin-asg.css / skin-gardenbrary.css) define COLOR + FONT + SHAPE roles.
   Components (components.css) consume only var(--*) — never raw values.
   Load order: tokens-base → skin → components. */

:root {
  /* ---- spacing (4px base) ---- */
  --space-0: 0;
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 24px;  --space-6: 32px;  --space-7: 48px;  --space-8: 64px;
  --space-9: 96px;
  --gutter: var(--space-5);            /* page edge padding, mobile */
  --gutter-wide: var(--space-7);       /* page edge padding, ≥ md */

  /* ---- type scale (fluid at the top, fixed at the bottom) ---- */
  --text-2xs: .68rem;
  --text-xs: .75rem;  --text-sm: .875rem;  --text-base: 1rem;
  --text-md: 1.125rem; --text-lg: 1.25rem; --text-xl: 1.5rem;
  --text-2xl: clamp(1.75rem, 1.2rem + 1.8vw, 2.25rem);
  --text-3xl: clamp(2.1rem, 1.4rem + 2.6vw, 3rem);
  --text-display: clamp(2.5rem, 1.6rem + 3.6vw, 3.75rem);
  --leading-tight: 1.08; --leading-snug: 1.3; --leading-normal: 1.55; --leading-loose: 1.75;
  --tracking-tight: -.02em; --tracking-caps: .08em; --tracking-wide: .16em;
  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700;
  --measure: 68ch;                      /* long-form line length */

  /* ---- radius primitives (skins map these to roles) ---- */
  --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px;
  --radius-xl: 16px; --radius-2xl: 22px; --radius-pill: 999px;

  /* ---- borders ---- */
  --border-1: 1px; --border-2: 2px; --border-3: 3px;

  /* ---- elevation ---- */
  --shadow-xs: 0 1px 2px rgba(20, 20, 14, .06);
  --shadow-sm: 0 2px 6px rgba(20, 20, 14, .07);
  --shadow-md: 0 12px 32px rgba(20, 20, 14, .08);
  --shadow-lg: 0 18px 44px rgba(20, 20, 14, .16);
  --shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, .6);

  /* ---- containers ---- */
  --container-prose: 720px;
  --container-narrow: 860px;
  --container-default: 1200px;
  --container-wide: 1400px;

  /* ---- breakpoints — reference only; @container/@media can't read vars.
          Use these exact numbers in queries: 640 / 900 / 1200 / 1400. ---- */
  --bp-sm: 640px; --bp-md: 900px; --bp-lg: 1200px; --bp-xl: 1400px;

  /* ---- motion ---- */
  --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 360ms;
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);

  /* ---- z-index ladder ---- */
  --z-dropdown: 30; --z-sticky: 40; --z-drawer: 50; --z-modal: 60; --z-toast: 70;

  /* ---- hit targets ---- */
  --hit-min: 44px;

  /* ---- component geometry shared by both skins ---- */
  --ctl-height: 44px;
  --ctl-height-sm: 36px;
  --ctl-pad-x: var(--space-4);
  --card-media-ratio: 16 / 10;
  --toc-width: 220px;
  --header-height: 72px;
}

/* ---- focus: one ring everywhere, keyboard only ---- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--border-2) solid var(--c-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
:where(a, button, input, select, textarea, summary, [tabindex]):focus:not(:focus-visible) { outline: none; }

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---- print: chrome off, content on, URLs visible ---- */
@media print {
  .announcement, .site-header, .nav, .site-footer, .toc, .progress, .back-to-top,
  .share-row, .email-capture, .callout--email, .callout--calc, .pager, .load-more,
  .sort-control, .filter-bar, .theme-toggle, .btn--icon, .modal { display: none !important; }
  body { background: #fff !important; color: #000 !important; font-size: 12pt; line-height: 1.5; }
  .page, .container { max-width: none !important; padding: 0 !important; }
  .card, .callout, .tile { box-shadow: none !important; border: 1px solid #999 !important; break-inside: avoid; }
  .prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10pt; color: #555; }
  h1, h2, h3, h4 { break-after: avoid; }
  img { max-width: 100% !important; }
}