/* Theme Name: Elegance Theme URI: https://devix.se Author: Devix Author URI: https://devix.se Description: A component-based WordPress theme for AI-driven web production. Part of the Elegance framework. Version: 0.2.1 Requires at least: 6.0 Requires PHP: 8.0 License: proprietary Text Domain: elegance */ /* Cascade layer order — declared first so layer precedence is predictable no matter which stylesheet wins the network race. The component CSS files (assets/css/components/*.css) wrap their content in `@layer dx-component-base { … }`, so loading them as plain stylesheets (via wp_enqueue_style) still respects this order. Component Defaults emitted on top by inc/component-defaults.php live in `dx-component-defaults`, declared last so `%root% { … }` rules always beat the shipped component CSS without needing !important. Unlayered styles still win outright, which is what we want for the Elegance page chrome (elegance-page.css) and foundational typography (dx-defaults.css). */ @layer dx-component-base, dx-component-defaults; /* Token fallbacks — DON'T inline default values inside `var()` calls in component CSS (e.g. `var(--dx-color-primary, 153 66% 44%)`). The defaults live in exactly one place: `dx_get_default_tokens()` in `inc/tokens.php`, which `dx_output_token_styles()` emits as a `:root` block in `` at priority 20 — so every `--dx-*` token below is guaranteed to be defined at runtime. Bare `var(--dx-token)` is therefore enough; duplicating the default value in the fallback slot just creates a second source of truth that can drift out of sync. The exception is *cascading defaults* — the handful of tokens that `dx_output_token_styles()` emits conditionally (e.g. `--dx-eyebrow-color`, `--dx-link-color`, `--dx-menu-color`, `--dx-button-primary-{solid,outline,alpha}-text`). Those keep their fallback because the var genuinely may not exist at runtime — but the fallback's *inner* var() should still be bare, e.g. `var(--dx-link-color, hsl(var(--dx-primary)))` not `…hsl(var(--dx-primary, 153 66% 44%))`. */ /* ========================================================================== Reset Lives inside the dx-component-base layer (same layer as core.css etc.) so component rules like `.dx-button { padding: ... }` beat the universal `*` selector on normal specificity. If the reset were unlayered it would outrank everything in layers regardless of specificity — cascade layers give unlayered origin styles priority over layered ones — and `* { padding: 0 }` would silently override every component's padding. ========================================================================== */ @layer dx-component-base { * { margin: 0; padding: 0; box-sizing: border-box; } }