M3: bind variables to opacity, padding, gaps, sizes, font size, text and visibility (#31)

Number fields for opacity (variables hold percentages), individual corner
radii, auto layout padding and gaps, min/max sizes and font size now take
variables like width and corner radius already did. Text content binds to
string variables and visibility to boolean ones from the Typography and
Appearance section headers; bound ones show as a variable chip that
changes or detaches the binding.

Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>

crates/engine/src/cmd/styles.rs

@@ -134,7 +134,7 @@ pub fn specs() -> Vec<CommandSpec> {
         spec!(
             "variable.bind",
             "Bind variable",
-            "{ids?, field (fill|stroke|width|height|opacity|cornerRadius|gap|padding|characters|visible|fontSize…), variable (null unbinds)}",
+            "{ids?, field (fill|stroke|width|height|opacity (percent)|cornerRadius|gap|paddingHorizontal|characters|visible|fontSize…), variable (null unbinds)}",
             true,
             |s, p| {
                 let field = req_string("variable.bind", p, "field")?;
@@ -453,6 +453,8 @@ pub fn apply_bindings(doc: &mut Document) {
             let Some(val) = doc.variables.resolve(&var, &modes) else { continue };
             let jv = match &val {
                 VariableValue::Color(c) => json!(c.to_css_hex()),
+                // Opacity variables hold percentages.
+                VariableValue::Number(x) if field == "opacity" => json!((x / 100.0).clamp(0.0, 1.0)),
                 VariableValue::Number(x) => json!(x),
                 VariableValue::String(x) => json!(x),
                 VariableValue::Boolean(b) => json!(b),