/*
  Design tokens — manual section 4.9's YAML block, translated to CSS
  custom properties. Values must match that block exactly; if you change
  one, update the manual too (or note the deviation and why).
*/
:root {
  --bgt-font-stack: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --bgt-content-max-width: 1440px;
  --bgt-reading-max-width: 760px;
  --bgt-spacing-base: 4px;

  --bgt-radius-small: 8px;
  --bgt-radius-medium: 12px;
  --bgt-radius-large: 18px;

  --bgt-control-height-compact: 36px;
  --bgt-control-height-default: 44px;
  --bgt-control-height-prominent: 52px;

  /* Matches BuildGenius Ed's effective palette (the "command-center"
     :root override near the end of styles.css, which is what's actually
     live — not its earlier defaults) so the two products read as one
     family: same page background, ink, borders, and accent blue.
     Layout stays a light theme except the sidebar (below), which is
     recolored separately to match Ed's dark navy one, since Ed doesn't
     tokenize its sidebar colors off the shared palette either. */
  --bgt-color-canvas: #eef3f9;
  --bgt-color-surface: #ffffff;
  --bgt-color-text: #111827;
  --bgt-color-secondary-text: #66758a;
  --bgt-color-border: #d9e1ec;
  --bgt-color-accent: #2563eb;
  --bgt-color-accent-strong: #1d4ed8;
  --bgt-color-success: #16a34a;
  --bgt-color-warning: #d97706;
  --bgt-color-danger: #dc2626;

  /* Ed's sidebar is hardcoded outside its shared token set too - mirrored
     here as its own small set rather than overloading canvas/surface,
     which are used everywhere (cards, modals, etc.), not just the nav. */
  --bgt-color-sidebar-bg: #08111f;
  --bgt-color-sidebar-border: #172235;
  --bgt-color-sidebar-text: #a7b2c4;
  --bgt-color-sidebar-text-strong: #f8fbff;
  --bgt-color-sidebar-hover-bg: #132a55;

  --bgt-motion-quick: 120ms;
  --bgt-motion-standard: 200ms;

  /* Section 4.8: default touch targets to >=44x44 CSS px on touch
     layouts. On a fine-pointer (mouse/trackpad) device the compact size
     is fine; on a coarse pointer (touch), controls step up to the
     default 44px height regardless of visual density. */
  --bgt-control-height: var(--bgt-control-height-compact);
}

@media (pointer: coarse) {
  :root {
    --bgt-control-height: var(--bgt-control-height-default);
  }
}

/* Section 4.9 "reduced_motion: no transform animation; instant or
   cross-fade" — every transform/animation in this app must be gated
   behind NOT this query, and provide a cross-fade or instant fallback
   inside it. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --bgt-motion-quick: 0ms;
    --bgt-motion-standard: 0ms;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}