FEATURE: Handle special font properties from discourse-fonts (#30891)

In https://github.com/discourse/discourse-fonts/pull/15 we are
introducing special font properties for certain fonts,
specifically the `font-variation-settings` and `font-feature-settings`.
For now this will only apply to Inter, but we may do it for other
fonts in future.

This commit makes it so the color_definitions.css file includes
these special properties for each font, either defined on the
root `html` element for the body font or on the `h1-h6` elements
for the heading font. This is done in this way because defining
them on `@font-face` is ignored by the browser.

This also ensures special CSS classes for the wizard container
e.g. wizard-container-font-FONTID are defined, this is so we can
use these special properties scoped to the font selected in the
wizard, which will affect the way the canvas preview is rendered.

Here is an example of before/after with special properties applied to
Inter,
in this case:

```css
font-variation-settings: 'opsz' 28;
font-feature-settings: 'calt' 0, 'ccmp' 0, 'ss02' 1;
```

lib/stylesheet/importer.rb

@@ -42,19 +42,23 @@ module Stylesheet
       contents = +""
 
       contents << <<~CSS if body_font.present?
+          // Body font definition
           #{font_css(body_font)}
-
+          #{render_font_special_properties(body_font, "body")}
           :root {
             --font-family: #{body_font[:stack]};
           }
+
         CSS
 
       contents << <<~CSS if heading_font.present?
+          // Heading font definition
           #{font_css(heading_font)}
-
+          #{render_font_special_properties(heading_font, "heading")}
           :root {
             --heading-font-family: #{heading_font[:stack]};
           }
+
         CSS
 
       contents
@@ -90,6 +94,7 @@ module Stylesheet
             font-family: #{font[:stack]};
           }
         CSS
+        contents << render_wizard_font_special_properties(font)
       end
 
       contents
@@ -108,7 +113,10 @@ module Stylesheet
 
       if resolved_ids
         theme = Theme.find_by_id(theme_id)
-        contents << theme&.scss_variables.to_s
+
+        contents << "\n\n// Theme SCSS variables\n\n"
+        contents << theme&.scss_variables.to_s.split(";").join(";\n") + ";\n\n"
+        contents << "\n\n"
         Theme
           .list_baked_fields(resolved_ids, :common, :color_definitions)
           .each do |field|
@@ -220,6 +228,7 @@ module Stylesheet
                 "url(\"#{fonts_dir}/#{variant[:filename]}?v=#{DiscourseFonts::VERSION}\") format(\"#{variant[:format]}\")"
               end
             )
+
           contents << <<~CSS
             @font-face {
               font-family: '#{font[:name]}';
@@ -232,5 +241,41 @@ module Stylesheet
 
       contents
     end
+
+    def render_font_special_properties(font, font_type)
+      contents = +""
+      root_elements = font_type == "body" ? "html" : "h1, h2, h3, h4, h5, h6"
+      contents << "#{root_elements} {\n"
+      contents << font_special_properties(font)
+      contents << "}\n"
+    end
+
+    def render_wizard_font_special_properties(font)
+      contents = +""
+      contents << ".wizard-container-heading-font-#{font[:key]} {\n"
+      contents << "  h1, h2, h3, h4, h5, h6 {\n"
+      contents << font_special_properties(font, 4)
+      contents << "  }\n"
+      contents << "}\n"
+      contents << ".wizard-container-body-font-#{font[:key]} {\n"
+      contents << font_special_properties(font)
+      contents << "}\n"
+    end
+
+    def font_special_properties(font, indent = 2)
+      contents = +""
+      if font[:font_variation_settings].present?
+        contents << "#{" " * indent}font-variation-settings: #{font[:font_variation_settings]};\n"
+      else
+        contents << "#{" " * indent}font-variation-settings: normal;\n"
+      end
+
+      if font[:font_feature_settings].present?
+        contents << "#{" " * indent}font-feature-settings: #{font[:font_feature_settings]};\n"
+      else
+        contents << "#{" " * indent}font-feature-settings: normal;\n"
+      end
+      contents
+    end
   end
 end