/**
 * Global CSS Cascade Layer Hierarchy
 * ==================================
 * Defines layer order for predictable cascade.
 * Lower layers lose to higher layers regardless of specificity.
 *
 * IMPORTANT: This MUST be the first @layer declaration loaded.
 * All subsequent CSS files should wrap rules in these layers.
 */

@layer reset, tokens, base, layout, components, utilities, states, overrides;

/**
 * Layer Usage Guide:
 *
 * reset      - CSS resets, normalizations (lowest priority)
 * tokens     - CSS custom properties, design tokens (:root variables)
 * base       - Base element styles (html, body, p, h1, etc.)
 * layout     - Page structure (.app-sidebar, .header, .main)
 * components - Reusable components (.btn, .form-input, .card)
 *              Also includes WebC scoped component styles
 * utilities  - Utility classes (.text-center, .hidden, .flex)
 * states     - Interactive states (:hover, :focus, .is-active)
 * overrides  - Escape hatch for necessary specificity wins (highest priority)
 *
 * Current file mapping:
 * - theme.css      → @layer tokens
 * - fonts.css      → @layer tokens
 * - open-props.css → @layer tokens
 * - base.css       → @layer base
 * - layout.css     → @layer layout
 * - components.css → @layer components
 * - app.css        → @layer components + @layer states
 * - WebC scoped    → @layer components
 */

/* Keep this file tiny and render-blocking; Open Props moved to open-props.css. */
@layer base {
  .text-lead {
    max-width: 40ch;
    margin: var(--size-2) auto 0;
    color: var(--text-2);
  }
}

@layer states {
  /* Safety: WebC scoped styles can accidentally make <script> visible. Never render script text. */
  script { display: none; }
}