/* ──────────────────────────────────────────────────────────────────────────
   DEEP SECURD · DESIGN SYSTEM — INDEX                               v1.0.0
   ──────────────────────────────────────────────────────────────────────────
   Single entry point for the design system.

   Cascade order matters:
     1. tokens       → declares every CSS custom property
     2. motion       → relies on tokens, declares animations
     3. typography   → relies on tokens
     4. layout       → relies on tokens
     5. components   → relies on tokens, motion (transitions), and typography

   Consumers should reference ONE link tag:
     <link rel="stylesheet" href="/site/styles/design-system/index.css?v=ds-v1" />

   This file is intentionally a thin barrel. Keep all CSS in the modules
   so they remain individually addressable when sourcemapped or audited.
   ────────────────────────────────────────────────────────────────────────── */

@import url("./tokens.css");
@import url("./motion.css");
@import url("./typography.css");
@import url("./layout.css");
@import url("./components.css");

/* ──────────────────────────────────────────────────────────────────────────
   GLOBAL SAFETY NETS
   ──────────────────────────────────────────────────────────────────────────
   These are scoped to elements WITH a `.ds-*` class or under a
   `[data-ds-scope]` ancestor — never global rewrites of native elements.
   This keeps the system safe to import on legacy pages.
   ────────────────────────────────────────────────────────────────────────── */

[data-ds-scope] {
  font-family: var(--ds-font-text);
  color: var(--ds-ink-default);
  line-height: var(--ds-lh-default);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

/* Selection — restrained, branded */
[data-ds-scope] ::selection {
  background: var(--ds-accent-200);
  color: var(--ds-ink-strong);
}