/* ==========================================================================
   Digimart Design System — Base layer
   Modern reset + typography + layout primitives. Scoped intentionally so it
   only applies to pages built on the new design-system shell (base_ds.html),
   leaving legacy Bootstrap pages untouched during the page-by-page migration.
   ========================================================================== */

/* Reset (applies within the DS shell) */
.ds *,
.ds *::before,
.ds *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.ds {
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  font-weight: var(--weight-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

.ds img,
.ds picture,
.ds svg,
.ds video {
  display: block;
  max-width: 100%;
  height: auto;
}

.ds a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
}
.ds a:hover { color: var(--accent-hover); }

.ds ul,
.ds ol { list-style: none; }

.ds :focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Typography scale */
.ds h1,
.ds h2,
.ds h3,
.ds h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: -0.015em;
  color: var(--text-primary);
  text-wrap: balance;
}

.ds .display-1 { font-family: var(--font-display); font-size: var(--text-display-1); line-height: 1.05; letter-spacing: -0.025em; font-weight: var(--weight-bold); }
.ds .display-2 { font-family: var(--font-display); font-size: var(--text-display-2); line-height: 1.08; letter-spacing: -0.025em; font-weight: var(--weight-bold); }
.ds h1 { font-size: var(--text-h1); }
.ds h2 { font-size: var(--text-h2); line-height: var(--leading-snug); }
.ds h3 { font-size: var(--text-h3); line-height: var(--leading-snug); }
.ds h4 { font-size: var(--text-h4); line-height: var(--leading-snug); }

.ds p { color: var(--text-secondary); max-width: 68ch; }
.ds .lead { font-size: var(--text-body-lg); color: var(--text-secondary); }
.ds small,
.ds .text-sm { font-size: var(--text-body-sm); }

.ds .overline {
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.ds .mono { font-family: var(--font-mono); font-size: var(--text-mono-sm); }

.ds .text-primary { color: var(--text-primary); }
.ds .text-secondary { color: var(--text-secondary); }
.ds .text-tertiary { color: var(--text-tertiary); }
.ds .text-accent { color: var(--accent); }

/* Layout primitives */
.ds .container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.ds .container-wide { max-width: var(--content-wide); }

.ds .section {
  padding-block: var(--space-16);
}
@media (min-width: 768px) {
  .ds .section { padding-block: var(--space-20); }
}
/* Tighter side gutter on the smallest phones for more content width */
@media (max-width: 480px) { .ds { --gutter: var(--space-4); } }

.ds .stack { display: flex; flex-direction: column; }
.ds .stack > img { align-self: flex-start; }
.ds .stack-2 { gap: var(--space-2); }
.ds .stack-3 { gap: var(--space-3); }
.ds .stack-4 { gap: var(--space-4); }
.ds .stack-6 { gap: var(--space-6); }
.ds .stack-8 { gap: var(--space-8); }
.ds .stack-12 { gap: var(--space-12); }

.ds .row { display: flex; flex-wrap: wrap; align-items: center; }
.ds .row-2 { gap: var(--space-2); }
.ds .row-3 { gap: var(--space-3); }
.ds .row-4 { gap: var(--space-4); }
.ds .row-6 { gap: var(--space-6); }

.ds .grid { display: grid; gap: var(--space-6); }
.ds .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ds .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ds .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .ds .grid-3,
  .ds .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .ds .grid-2,
  .ds .grid-3,
  .ds .grid-4 { grid-template-columns: minmax(0, 1fr); }
}

.ds .divider {
  height: 1px;
  background: var(--border-subtle);
  border: 0;
  width: 100%;
}

/* Accessibility utilities */
.ds .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;
}
.ds .skip-link {
  position: absolute;
  left: var(--space-4);
  top: -60px;
  background: var(--accent);
  color: var(--text-on-accent);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  z-index: 1000;
  transition: top var(--duration-base) var(--ease-standard);
}
.ds .skip-link:focus { top: var(--space-4); }

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