@@ -6,7 +6,9 @@
 //! leading/trailing zeros (`0.2` → `.2`), and color-property values are
 //! validated (a color is a single component: keyword, hash, or function)
 //! so invalid declarations report through the recovery paths like they used
-//! to.
+//! to. `light-dark(a, b)` is preserved (branches canonicalized) for the
+//! runtime, which resolves it against the color scheme at computed-value
+//! time.
 
 use bombshell_css_core::Diagnostic;
 use bombshell_css_core::tokens::write_token;
@@ -30,28 +32,26 @@ pub(crate) fn canonicalize(name: &str, value: &str) -> Result<String, Diagnostic
         _ => {}
     }
 
-    if name == "color" || name.ends_with("-color") {
-        // `light-dark(a, b)` resolves to its light branch at compile time
-        // (the previous front-end's printer behavior).
-        let value = match resolve_light_dark(value) {
-            Some(light) => light,
-            None => value.to_string(),
-        };
-
-        validate_color(&value)?;
-
-        // The shortest representation wins; ties go to hex (the previous
-        // front-end's printer behavior: `red` stays, `yellow` → `#ff0`).
-        let trimmed = value.trim();
-        if let Some(hex) = named_color(trimmed.to_ascii_lowercase().as_str()) {
-            return Ok(if trimmed.len() < hex.len() {
-                trimmed.to_ascii_lowercase()
-            } else {
-                hex.to_string()
-            });
+    if bombshell_css_core::is_color_property(name) {
+        // `light-dark(a, b)` survives to the runtime, which resolves it
+        // against the environment's color scheme at computed-value time.
+        // Both branches are validated and canonicalized here so the IR only
+        // ever carries canonical color text.
+        if is_light_dark_value(value) {
+            let Some((light, dark)) = split_light_dark(value) else {
+                return Err(invalid_color(value));
+            };
+            validate_color(light.trim())?;
+            validate_color(dark.trim())?;
+            return Ok(minify_value(&format!(
+                "light-dark({}, {})",
+                canonical_color(light.trim()),
+                canonical_color(dark.trim()),
+            )));
         }
 
-        return Ok(minify_value(&value));
+        validate_color(value)?;
+        return Ok(canonical_color(value));
     }
 
     if name == "font-weight" {
@@ -65,12 +65,51 @@ pub(crate) fn canonicalize(name: &str, value: &str) -> Result<String, Diagnostic
     Ok(minify_value(value))
 }
 
-/// `light-dark(a, b)` → its first argument.
-fn resolve_light_dark(value: &str) -> Option<String> {
+/// Canonical color text: the shortest representation wins and ties go to
+/// hex (the previous front-end's printer behavior: `red` stays, `yellow` →
+/// `#ff0`).
+fn canonical_color(value: &str) -> String {
     let trimmed = value.trim();
-    let rest = trimmed.strip_prefix("light-dark(")?;
-    let rest = rest.strip_suffix(')')?;
+    if let Some(hex) = named_color(trimmed.to_ascii_lowercase().as_str()) {
+        return if trimmed.len() < hex.len() {
+            trimmed.to_ascii_lowercase()
+        } else {
+            hex.to_string()
+        };
+    }
+    minify_value(trimmed)
+}
 
+/// The shared diagnostic for a color value that does not parse.
+fn invalid_color(value: &str) -> Diagnostic {
+    Diagnostic::warning(
+        "declaration",
+        {
+            let mut message = String::from("invalid color value `");
+            message.push_str(value);
+            message.push('`');
+            message
+        },
+    )
+}
+
+/// `light-dark(a, b)` → its two branches, split at the top-level comma.
+/// Function names are case-insensitive; anything that is not exactly the
+/// two-argument form returns `None` (the caller reports it invalid).
+fn split_light_dark(value: &str) -> Option<(String, String)> {
+    let trimmed = value.trim();
+    if !trimmed[..trimmed.len().min("light-dark(".len())]
+        .eq_ignore_ascii_case("light-dark(")
+    {
+        return None;
+    }
+    let rest = &trimmed["light-dark(".len()..];
+    if !rest.ends_with(')') {
+        return None;
+    }
+    let rest = &rest[..rest.len() - 1];
+
+    let mut split: Option<usize> = None;
     let mut depth = 0usize;
     let mut quote: Option<u8> = None;
     for (i, &b) in rest.as_bytes().iter().enumerate() {
@@ -81,13 +120,30 @@ fn resolve_light_dark(value: &str) -> Option<String> {
                 b'"' | b'\'' => quote = Some(b),
                 b'(' => depth += 1,
                 b')' => depth = depth.saturating_sub(1),
-                b',' if depth == 0 => return Some(rest[..i].trim().to_string()),
+                b',' if depth == 0 => {
+                    if split.is_some() {
+                        // A second top-level comma is not the two-argument
+                        // form.
+                        return None;
+                    }
+                    split = Some(i);
+                }
                 _ => {}
             },
         }
     }
 
-    None
+    let comma = split?;
+    let (light, dark) = (&rest[..comma], &rest[comma + 1..]);
+    Some((light.trim().to_string(), dark.trim().to_string()))
+}
+
+/// Whether the value is a `light-dark(...)` function call (case-insensitive
+/// name, balanced parens).
+fn is_light_dark_value(value: &str) -> bool {
+    let trimmed = value.trim();
+    let lower = trimmed.to_ascii_lowercase();
+    lower.starts_with("light-dark(") && trimmed.ends_with(')')
 }
 
 /// A color value is one component: a keyword, a hash, or a balanced
@@ -169,15 +225,7 @@ fn validate_color(value: &str) -> Result<(), Diagnostic> {
     if valid {
         Ok(())
     } else {
-        Err(Diagnostic::warning(
-            "declaration",
-            {
-                let mut message = String::from("invalid color value `");
-                message.push_str(value);
-                message.push('`');
-                message
-            },
-        ))
+        Err(invalid_color(value))
     }
 }
 
 
@@ -123,3 +123,46 @@ fn ir_round_trips_through_compiler() {
     assert_eq!(decoded.rules.len(), 2);
     assert_eq!(decoded.rules[1].selector, ".a:hover");
 }
+
+#[test]
+fn preserves_light_dark_for_the_runtime() {
+    // The compiler no longer folds to the light branch: both branches are
+    // validated and canonicalized, and resolution happens against the
+    // environment's color scheme at computed-value time.
+    let sheet = compile_ok(".card { color: light-dark(white, black) }");
+    assert_eq!(sheet.rules[0].declarations[0].value, "light-dark(#fff, #000)");
+}
+
+#[test]
+fn canonicalizes_light_dark_branches_independently() {
+    // Case-insensitive function name; each branch canonicalizes like a
+    // standalone color value.
+    let sheet = compile_ok(".card { border-color: LIGHT-DARK( #ffffff , yellow ) }");
+    assert_eq!(
+        sheet.rules[0].declarations[0].value,
+        "light-dark(#ffffff, #ff0)"
+    );
+}
+
+#[test]
+fn rejects_malformed_light_dark() {
+    for css in [
+        ".card { color: light-dark(#fff) }",
+        ".card { color: light-dark(#fff, #000, #888) }",
+        ".card { color: light-dark(#fff, nope) }",
+    ] {
+        let out = compile(css, Origin::Author, Default::default());
+        let sheet = out.sheet.expect("recovered sheet");
+        assert!(
+            out.diagnostics
+                .iter()
+                .any(|d| d.message.contains("invalid color value")),
+            "missing diagnostic for {css}: {:?}",
+            out.diagnostics
+        );
+        assert!(
+            sheet.rules.iter().all(|rule| rule.declarations.is_empty()),
+            "declaration survived for {css}"
+        );
+    }
+}
@@ -221,6 +221,13 @@ pub struct Declaration {
     pub important: bool,
 }
 
+/// Whether `name` takes `<color>` values. Both the compiler's color
+/// canonicalization and the runtime's `light-dark()` resolution key off this
+/// predicate, so it lives here next to the declaration type.
+pub fn is_color_property(name: &str) -> bool {
+    name == "color" || name.ends_with("-color")
+}
+
 /// A preserved `@keyframes` block.
 #[derive(Debug, Clone, PartialEq, Eq, Hash, Serialize, Deserialize)]
 pub struct KeyframesRule {
 
@@ -8,7 +8,7 @@ use crate::conditions::{
     ContainerAncestor, ContainerType, eval_container_list, eval_media_list, eval_supports_list,
 };
 use crate::selectors::parse_selector_list;
-use crate::values::resolve_vars;
+use crate::values::{resolve_light_dark, resolve_vars};
 use bombshell_css_core::{CompiledStylesheet, ContainerQuery, Declaration, Origin, TreeSnapshot};
 use rustc_hash::FxHashMap as HashMap;
 
@@ -222,10 +222,6 @@ impl<'ir> Stylesheet<'ir> {
             .iter()
             .map(|d| &d.message["selector could not be matched at runtime: ".len()..])
     }
-
-    fn layer_rank(&self, layer: Option<&[String]>) -> u32 {
-        layer_rank(self.layer_order, layer)
-    }
 }
 
 
@@ -385,6 +381,10 @@ pub fn compute_tree<'ir>(
         // var() substitution is part of computing the value: descendants
         // inherit computed values, not raw `var()` text.
         resolve_vars_in_map(&mut map);
+        // `light-dark()` resolves at computed-value time, after var()
+        // substitution (a custom property may carry it into the using
+        // declaration) and before descendants inherit the value.
+        resolve_light_dark_in_map(&mut map, env.color_scheme);
         maps.push(Some(map));
     }
 
@@ -427,6 +427,38 @@ fn resolve_vars_in_map(map: &mut StyleMap<'_>) {
     }
 }
 
+/// Resolve `light-dark()` in every non-custom color declaration against the
+/// environment's color scheme. Resolution is scoped to the color properties
+/// the compiler canonicalizes; custom properties substitute verbatim and
+/// resolve at the using declaration. A malformed call drops the
+/// declaration, like a failed `var()` resolution.
+fn resolve_light_dark_in_map(map: &mut StyleMap<'_>, scheme: bombshell_css_core::ColorScheme) {
+    let names: Vec<Cow<'_, str>> = map.keys().cloned().collect();
+    for name in names {
+        if name.starts_with("--") {
+            continue;
+        }
+        if !bombshell_css_core::is_color_property(name.as_ref()) {
+            continue;
+        }
+        if let Some(value) = map.get(name.as_ref()) {
+            if value.contains("light-dark(") {
+                match resolve_light_dark(value, scheme) {
+                    Some(resolved) => {
+                        if resolved != value.as_ref() {
+                            map.insert(name, Cow::Owned(resolved));
+                        }
+                    }
+                    None => {
+                        // Invalid at computed-value time.
+                        map.remove(name.as_ref());
+                    }
+                }
+            }
+        }
+    }
+}
+
 /// Handle `inherit`, `initial`, `unset`, and `revert` keywords.
 fn apply_css_wide_keywords<'ir>(map: &mut StyleMap<'ir>, inherited: &StyleMap<'ir>) {
     let names: Vec<Cow<'ir, str>> = map.keys().cloned().collect();