/* CyberPro AI OS Design System — single entry point (Brand Phase 4)
   <link rel="stylesheet" href="design-system/design-system.css"> pulls in tokens + every component. */
@import url("tokens/tokens.css");
@import url("components/components.css");

/* Minimal reset */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; }

/* The HTML [hidden] attribute is only ever display:none via the browser's UA stylesheet, which any
   author rule setting display on that element beats (this bit twice while building this system: modal
   overlays and the table bulk-action bar both set display:flex and stayed visible while "hidden"). Make
   [hidden] authoritative everywhere, the standard fix for this well-known gotcha. */
[hidden] { display: none !important; }

body {
  background: var(--cy-bg-canvas);
  color: var(--cy-text-primary);
  font-family: var(--cy-font-sans);
  font-size: var(--cy-text-body-size);
  line-height: var(--cy-text-body-lh);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--cy-accent); }

/* Typography utilities — one class per tokens.typography.scale entry */
.cy-text-display { font-size: var(--cy-text-display-size); font-weight: var(--cy-text-display-weight); line-height: var(--cy-text-display-lh); letter-spacing: var(--cy-text-display-ls); margin: 0; }
.cy-text-h1 { font-size: var(--cy-text-h1-size); font-weight: var(--cy-text-h1-weight); line-height: var(--cy-text-h1-lh); letter-spacing: var(--cy-text-h1-ls); margin: 0; }
.cy-text-h2 { font-size: var(--cy-text-h2-size); font-weight: var(--cy-text-h2-weight); line-height: var(--cy-text-h2-lh); letter-spacing: var(--cy-text-h2-ls); margin: 0; }
.cy-text-h3 { font-size: var(--cy-text-h3-size); font-weight: var(--cy-text-h3-weight); line-height: var(--cy-text-h3-lh); letter-spacing: var(--cy-text-h3-ls); margin: 0; }
.cy-text-card-title { font-size: var(--cy-text-cardtitle-size); font-weight: var(--cy-text-cardtitle-weight); line-height: var(--cy-text-cardtitle-lh); margin: 0; }
.cy-text-body { font-size: var(--cy-text-body-size); font-weight: var(--cy-text-body-weight); line-height: var(--cy-text-body-lh); }
.cy-text-body-sm { font-size: var(--cy-text-bodysm-size); line-height: var(--cy-text-bodysm-lh); }
.cy-text-caption { font-size: var(--cy-text-caption-size); line-height: var(--cy-text-caption-lh); color: var(--cy-text-secondary); }
.cy-text-data { font-family: var(--cy-font-mono); font-size: var(--cy-text-data-size); font-weight: var(--cy-text-data-weight); font-variant-numeric: tabular-nums; }
.cy-text-eyebrow { font-size: var(--cy-text-eyebrow-size); font-weight: var(--cy-text-eyebrow-weight); letter-spacing: var(--cy-text-eyebrow-ls); text-transform: uppercase; color: var(--cy-accent); }
.cy-text-secondary { color: var(--cy-text-secondary); }

/* Layout utilities */
.cy-container { max-width: var(--cy-container-xl); margin: 0 auto; padding: 0 var(--cy-space-6); }
.cy-grid { display: grid; gap: var(--cy-grid-gutter); grid-template-columns: repeat(var(--cy-grid-columns), 1fr); }

/* Responsive column-count utilities — use these instead of an inline grid-template-columns override, since
   an inline style can't be overridden by the media queries below (this was a real gap: the Phase 4
   dashboard templates originally set column counts via inline style, which no breakpoint could touch). */
.cy-grid-cols-2, .cy-grid-cols-3, .cy-grid-cols-4 { display: grid; gap: var(--cy-grid-gutter); }
.cy-grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.cy-grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.cy-grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) {
  .cy-grid-cols-3, .cy-grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .cy-grid-cols-2, .cy-grid-cols-3, .cy-grid-cols-4 { grid-template-columns: 1fr; }
}

.cy-stack { display: flex; flex-direction: column; }
.cy-row { display: flex; align-items: center; }
.cy-gap-1 { gap: var(--cy-space-1); } .cy-gap-2 { gap: var(--cy-space-2); } .cy-gap-3 { gap: var(--cy-space-3); }
.cy-gap-4 { gap: var(--cy-space-4); } .cy-gap-6 { gap: var(--cy-space-6); }

/* Icon sizing utility — apply to an inline <svg>. Every component "icon slot" class below (defined in
   components/*.css with its own size/color) is included in this selector too, so an icon dropped into
   any of them renders correctly on its own — a consumer forgetting to also add .cy-icon must not end up
   with an unstyled SVG defaulting to a solid black fill, which is exactly what happened the first time
   this was built (sidebar nav-item icons rendered as solid blobs) and got fixed here rather than only in
   the one call site that happened to trigger it. */
.cy-icon,
.cy-nav-item__icon,
.cy-alert__icon,
.cy-empty__icon,
.cy-notification__icon,
.cy-toast__icon,
.cy-modal__icon svg,
.cy-sort-icon {
  stroke: currentColor; fill: none; stroke-width: var(--cy-icon-stroke); stroke-linecap: round; stroke-linejoin: round;
}
.cy-icon { width: var(--cy-icon-md); height: var(--cy-icon-md); }
.cy-icon--xs { width: var(--cy-icon-xs); height: var(--cy-icon-xs); }
.cy-icon--sm { width: var(--cy-icon-sm); height: var(--cy-icon-sm); }
.cy-icon--lg { width: var(--cy-icon-lg); height: var(--cy-icon-lg); }
.cy-icon--xl { width: var(--cy-icon-xl); height: var(--cy-icon-xl); }

/* Visually-hidden but screen-reader-accessible text (for icon-only buttons, decorative-icon labeling) */
.cy-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Visible keyboard-focus ring, product-wide (see design-guidelines/Accessibility.md) */
:focus-visible { outline: none; box-shadow: var(--cy-shadow-focus-ring); border-radius: var(--cy-radius-xs); }

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