/* ============================================================
   SAHAJ CONNECT — DESIGN SYSTEM FOUNDATION (DS-1)
   Loaded AFTER tokens.css, BEFORE legacy stylesheets.
   Deliberately conservative: it does NOT globally restyle body / tables /
   buttons / inputs (legacy admin.css & site.css own those, and overriding
   them would regress existing screens). It adds only:
     (a) two safe, additive global behaviours — visible :focus-visible ring
         and reduced-motion respect;
     (b) opt-in .ds-* primitive utilities used by later DS phases.
   Existing markup is unaffected until a screen explicitly adopts .ds-* classes.
   PRESENTATION ONLY.
   ============================================================ */

/* ---- (a) Safe additive globals ---- */

/* Visible keyboard focus everywhere (does not remove any existing outline;
   only strengthens focus-visible). */
:where(a, button, [role="button"], input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--ds-primary);
    outline-offset: 2px;
    box-shadow: var(--ds-focus-ring);
    border-radius: var(--ds-radius-sm);
}

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

/* ---- (b) Opt-in primitives (zero effect until a class is applied) ---- */

.ds-page        { background: var(--ds-bg); color: var(--ds-text); font-family: var(--ds-font); }
.ds-container   { width: 100%; max-width: var(--ds-content-max); margin-inline: auto; padding-inline: var(--ds-space-4); box-sizing: border-box; }
.ds-prose       { max-width: var(--ds-prose-max); line-height: var(--ds-lh-loose); }

/* Layout helpers */
.ds-stack       { display: flex; flex-direction: column; gap: var(--ds-space-4); }
.ds-stack-sm    { display: flex; flex-direction: column; gap: var(--ds-space-2); }
.ds-cluster     { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-2); }
.ds-cluster-between { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ds-space-2); }
.ds-grid        { display: grid; gap: var(--ds-space-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* Surfaces */
.ds-surface       { background: var(--ds-surface); border: var(--ds-border-w) solid var(--ds-border); border-radius: var(--ds-radius-md); box-shadow: var(--ds-shadow-sm); box-sizing: border-box; }
.ds-surface-muted { background: var(--ds-surface-muted); border: var(--ds-border-w) solid var(--ds-border); border-radius: var(--ds-radius-md); box-sizing: border-box; }
.ds-divider       { border: 0; border-top: var(--ds-border-w) solid var(--ds-border); margin: var(--ds-space-4) 0; }

/* Text helpers */
.ds-text-muted  { color: var(--ds-text-muted); }
.ds-text-subtle { color: var(--ds-text-subtle); }

/* Accessibility + scroll */
.ds-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; }
.ds-scroll-x        { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

/* Icons (SVG use currentColor; sized by font by default) */
.ds-icon    { display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -0.15em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ds-icon-lg { width: 1.4em; height: 1.4em; }

/* Status semantics (icon+label pairing enforced in DS-2 StatusBadge) */
.ds-status            { display: inline-flex; align-items: center; gap: var(--ds-space-1); font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-medium); }
.ds-status--neutral   { color: var(--ds-text-muted); }
.ds-status--info      { color: var(--ds-info); }
.ds-status--success   { color: var(--ds-success); }
.ds-status--warning   { color: var(--ds-warning); }
.ds-status--danger    { color: var(--ds-danger); }

/* Shell foundation primitives (consumed by DS-3 Admin / DS-4 Workspace; unused now) */
.ds-shell   { min-height: 100vh; background: var(--ds-bg); }
.ds-sidebar { width: var(--ds-sidebar-w); background: var(--ds-surface); border-right: var(--ds-border-w) solid var(--ds-border); }
.ds-topbar  { height: var(--ds-header-h); background: var(--ds-surface); border-bottom: var(--ds-border-w) solid var(--ds-border); display: flex; align-items: center; gap: var(--ds-space-3); padding-inline: var(--ds-space-4); }