/* forge.css — Forge Design Language entry point */
/* Usage: @import "./forge/forge.css"; (or path from consuming project) */
/* Requires: modern browser — Chrome 99+, Firefox 97+, Safari 15.4+ (CSS @layer support) */

/* ─── 1. Layer order declaration ───────────────────────────────────────────── */
/* Must come BEFORE @imports so the cascade order is deterministic regardless  */
/* of the order in which browsers process the imported stylesheets.            */

@layer forge.primitives, forge.semantic, forge.spacing, forge.typography, forge.motion, forge.components, forge.base;

/* ─── 2. Token files ─────────────────────────────────────────────────────── */
/* Import order: primitives before semantic (semantic references primitives). */

@import "./tokens/_primitives.css" layer(forge.primitives);
@import "./tokens/_semantic.css"   layer(forge.semantic);
@import "./tokens/_spacing.css"    layer(forge.spacing);
@import "./tokens/_typography.css" layer(forge.typography);
@import "./tokens/_motion.css"     layer(forge.motion);

/* ─── 3. Component files ────────────────────────────────────────────────────── */
/* All component styles are scoped to forge.components in their respective files. */

@import "./components/_layout.css"  layer(forge.components);
@import "./components/_table.css"   layer(forge.components);
@import "./components/_search.css"  layer(forge.components);
@import "./components/_card.css"    layer(forge.components);
@import "./components/_chart.css"   layer(forge.components);
@import "./components/_chat.css"    layer(forge.components);
@import "./components/_btn.css"     layer(forge.components);
@import "./components/_status.css"  layer(forge.components);

/* ─── 4. Base reset ─────────────────────────────────────────────────────────  */

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

  /* Apply Forge base to root — consuming projects can override per-element.  */
  /* If :root defaults conflict in Phase 3/4 integration, extract to an       */
  /* opt-in class (e.g. .forge-root) without changing the token system.       */
  :root {
    font-family: var(--forge-font-sans);
    font-size:   var(--forge-text-base);
    line-height: var(--forge-leading);
    color:       var(--forge-text-primary);
    background-color: var(--forge-bg);
  }

  /* Remove UA default margin so full-height apps don't overflow the viewport */
  body { margin: 0; }

  /* ── Scrollbars ─────────────────────────────────────────────────────────── */
  /* Firefox */
  * {
    scrollbar-color: var(--forge-surface-3) var(--forge-surface-1);
    scrollbar-width: thin;
  }
  /* Chromium / Safari */
  ::-webkit-scrollbar        { width: 6px; height: 6px; }
  ::-webkit-scrollbar-track  { background: var(--forge-surface-1); }
  ::-webkit-scrollbar-thumb  { background: var(--forge-surface-3); border-radius: 0; }
  ::-webkit-scrollbar-thumb:hover { background: var(--forge-text-muted); }
}