/* CM001 kit — base.css
 * Declares the platform cascade order (every CM component opens its own @layer) and the shared
 * base: box-sizing, keyboard focus rings, screen-reader utility, reduced-motion, print.
 * Layer order (earlier = lower priority): reset < tokens < base < components < grid < pages < override.
 * The legacy assets/css/base.css now lives in @layer cm.components (its own header says so). Page-specific
 * CSS migrates into cm.pages (below cm.override so root can override it). Design-Studio + Global CSS land in cm.override.
 */
@layer cm.reset, cm.tokens, cm.base, cm.components, cm.grid, cm.pages, cm.override;

@layer cm.base {
  *, *::before, *::after { box-sizing: border-box; }

  /* keyboard-only focus ring (low specificity so components can restyle) */
  :where(a, button, [role="button"], input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--focus-ring, var(--brand, #2563eb));
    outline-offset: 2px;
    border-radius: var(--focus-radius, 6px);
  }

  .visually-hidden {
    position: absolute !important; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .cm-hidden, [hidden] { display: none !important; }

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

@media print {
  .sidebar, .topbar, .brand, .no-print, #cm-toast { display: none !important; }
  .content { padding: 0 !important; }
  .app { display: block !important; }
}