/* ================================================================= BIOME PATTERNS — Consumer-Surface CVD Accessibility Encoding Single source of truth for biome pattern consumption on consumer surfaces. Sibling to tokens.css (which carries biome colours via --plum / --olive / --teal / --subtropical / --cape variables). Consumed by: companion page, lot detail page, farm profile page, and any future consumer surface rendering biome-identified elements. Governs: - DEC-022 (Accessibility Encoding): pattern specifications carry over verbatim from calendar-scope to consumer-surface scope. Coastal (plum): NO pattern — distinguishable under all CVD types (protanopia deltaE 6.5-9.4 against midlands/escarpment). Midlands (olive): dot grid. Escarpment (teal): diagonal lines. Subtropical + Cape: patterns NOT defined (O-028 debt). - DEC-030 (Consumer-Surface Biome Pattern Consumption): this file's existence is DEC-030's operational artefact. DEC-030 formalises the consumer-surface consumption specification for DEC-022 patterns. - L-046: shared asset, not per-surface duplication. - L-053 (lens-projection): visual-identity lens consumer-consumption for the fifth-instance biome visual-identity primitive (DEC-028 colour + DEC-022 pattern + classification enum). - O-042 (consumer-consumption gap): this file's consumption at three surfaces closes the gap for three biomes; O-028 continues to track the two biomes without pattern definitions (subtropical + cape). Asset format: CSS attribute selectors publish a --biome-pattern custom property. Consumers compose it into their own background properties (typically background-image via comma-stacking with the consumer's own gradient or fill). This avoids the shared asset dictating a single background-image architecture on consumers that may layer the pattern with gradients, overlays, or blend modes. Consumption pattern (for consuming pages): 1. Link this file in after tokens.css. 2. Add class="biome-surface" and data-biome="" to any element that should render the biome pattern. Biome values: coastal, midlands, escarpment, subtropical, cape. 3. In that element's own CSS, compose --biome-pattern into background-image. Example: .my-element { background-image: var(--biome-pattern, none); } For stacked composition with gradient: .my-element { background-image: var(--biome-pattern, none), linear-gradient(180deg, var(--bone), var(--accent-muted)); } When --biome-pattern is unset (coastal / subtropical / cape), the `none` fallback ensures the gradient-only layer renders. 4. The pattern tiles at 8px per DEC-022 Part 2 specification. Pattern design per DEC-022 Part 2: - 8px tile size, patternUnits="userSpaceOnUse" semantic preserved via natural 8px background-repeat (default). - Bone-coloured (#F5F2ED) overlays at 0.15 opacity — subtle under normal vision, discriminating under CVD. - Plum receives no pattern: DEC-022 reasoning preserved — adding pattern to already-distinguishable band adds visual noise without accessibility benefit. Why CSS custom properties over direct background-image rules: (a) Consumer surfaces frequently layer biome accents with gradients, muted fills, or other visual treatments; a direct background-image rule would fight with those layers. (b) The shared CSS should declare the asset ("here is the pattern for this biome"); consumer CSS decides the composition ("apply it over this gradient at this blend mode"). (c) Matches how tokens.css behaves — tokens publish values; consumer CSS applies them. Why inline SVG data URIs rather than external .svg asset: (a) Zero additional HTTP requests. (b) No asset-pipeline coupling; ships with the CSS. (c) Under 500 bytes total inlined; acceptable at consumer scale. (d) Renders immediately at first paint; no flash of unpatterned biome while asset loads. ================================================================= */ /* --biome-pattern carries the pattern asset as a url() that consumers compose into their own background-image declarations. Unset (or explicitly set to `none` via the fallback in var()) produces no pattern layer. Per DEC-022 Part 2, coastal is intentionally empty (solid colour suffices; adding pattern to already-distinguishable plum adds noise without accessibility benefit). Subtropical and Cape are honest-absence pending O-028 closure. */ .biome-surface[data-biome="coastal"] { /* Intentional no-op per DEC-022 Part 2 reasoning. Consumers still benefit from the class as a semantic marker: “this element carries biome identity.” */ } .biome-surface[data-biome="midlands"] { --biome-pattern: url("data:image/svg+xml;utf8,"); } .biome-surface[data-biome="escarpment"] { --biome-pattern: url("data:image/svg+xml;utf8,"); } /* Subtropical + Cape: patterns not yet defined (O-028 debt). Honest-absence rendering via colour only (--subtropical / --cape tokens in tokens.css) until pattern design authored. Removal path for O-028: founder authorises pattern design via P-91 editorial authority; specification extends DEC-022 Part 2 OR lands as DEC-031 Subtropical+Cape Accessibility Patterns; --biome-pattern values added here at the appropriate biome selectors. */ .biome-surface[data-biome="subtropical"] { /* Honest absence; pattern pending per O-028. */ } .biome-surface[data-biome="cape"] { /* Honest absence; pattern pending per O-028. */ }