/* 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.1.52 Requires at least: 6.0 Requires PHP: 8.0 License: proprietary Text Domain: elegance */ /* Cascade layer order — declared first so layer precedence is predictable regardless of @import order below. dx-component-base — shipped component styles (core.css, button.css, …) dx-component-defaults — site-wide per-variant overrides from Component Defaults (inc/component-defaults.php). 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; /* Cache-buster — WordPress versions style.css via the theme header, but `@import` URLs inside it aren't auto-versioned. Bumping this query string whenever a sub-file changes forces browsers to re-fetch all of them. Kept as a single shared token so one edit invalidates everything together. */ /* 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,semi}-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%))`. */ /* Default styles (typography, colors, layout) — unlayered, wins by default. */ @import url("assets/css/dx-defaults.css?v=0.1.51"); /* Component styles — live in the base layer so Component Defaults can override. */ @import url("assets/css/components/core.css?v=0.1.51") layer(dx-component-base); @import url("assets/css/components/button.css?v=0.1.51") layer(dx-component-base); @import url("assets/css/components/media.css?v=0.1.51") layer(dx-component-base); @import url("assets/css/components/nav-menu.css?v=0.1.51") layer(dx-component-base); @import url("assets/css/components/header.css?v=0.1.51") layer(dx-component-base); @import url("assets/css/components/hero.css?v=0.1.51") layer(dx-component-base); @import url("assets/css/components/feature.css?v=0.1.51") layer(dx-component-base); @import url("assets/css/components/footer.css?v=0.1.51") layer(dx-component-base); /* Admin-chrome tokens — shared between elegance-page.css and page-builder.css. Imported first so `--dx-elegance-*` vars are defined when the chrome rules consume them. (Page-builder context loads this same file via wp_enqueue_style in inc/meta-box.php.) */ @import url("assets/css/elegance-tokens.css?v=0.1.51"); /* Elegance page (dev tool) — unlayered chrome. */ @import url("assets/css/elegance-page.css?v=0.1.51"); /* Shared toast notification — used by both the Elegance page Save Changes confirmation and the front-editor's save / dirty toasts. Single source of truth so the visual stays identical across both surfaces. */ @import url("assets/css/dx-toast.css?v=0.1.51"); /* ========================================================================== 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; } }