Move variables to css

assets/styles/layout/_code.scss

@@ -128,7 +128,6 @@ pre[class*="language-"] {
     display: none;
 }
 
-.layout-dark {
 .doc-section-code-buttons {
     button {
         outline: 0 none;
@@ -136,45 +135,22 @@ pre[class*="language-"] {
         background-color: transparent;
         transition: background-color .2s, box-shadow .2s;
         border: 0 none;
-            color: var(--surface-400);
+        color: var(--demo-code-button-color);
         cursor: pointer;
 
         &:hover {
-                background-color: rgba(255,255,255,.1);
+            background-color: var(--demo-code-button-hover-bg);
-                color: var(--surface-500);
+            color: var(--demo-code-button-hover-color);
         }
     }
 }
 pre[class*="language-"] {    
     code {
-            background: var(--surface-card) !important;
+        background: var(--demo-code-bg) !important;
-        }
     }
 }
 
 .layout-light {
-    .doc-section-code-buttons {
-        button {
-            outline: 0 none;
-            outline-offset: 0;
-            background-color: transparent;
-            transition: background-color .2s, box-shadow .2s;
-            border: 0 none;
-            color: var(--surface-400);
-            cursor: pointer;
-
-            &:hover {
-                background-color: rgba(255,255,255,.1);
-                color: var(--surface-300);
-            }
-        }
-    }
-    pre[class*="language-"] {    
-        code {
-            background: var(--surface-700) !important;
-        }
-    }
-
     &[data-p-theme^="md-"] {
         pre[class*="language-"] {    
             code {

assets/styles/layout/_content.scss

@@ -9,22 +9,10 @@
     }
 }
 
-.layout-light {
 .card {
     background: var(--surface-card);
-        border: 1px solid var(--surface-border);
+    border: var(--card-border);
     padding: 2rem;
     border-radius: 10px;
     margin-bottom: 1rem;
 }
-}
-
-.layout-dark {
-    .card {
-        background: var(--surface-card);
-        border: 0 none;
-        padding: 2rem;
-        border-radius: 10px;
-        margin-bottom: 1rem;
-    }
-}

assets/styles/layout/landing/_dark.scss

@@ -1,7 +1,13 @@
 .layout-dark {
+    --card-border: 0 none;
+    --card-bg: var(--surface-card);
     --glow-image: url(https://www.primefaces.org/cdn/primevue/images/layout/top-pattern-light.png);
     --topbar-border: var(--surface-border);
     --mobile-menu-bg: rgba(0,0,0,.3);
+    --demo-code-bg: var(--surface-card);
+    --demo-code-button-color: var(--surface-400);
+    --demo-code-button-hover-bg: rgba(255,255,255,.1);
+    --demo-code-button-hover-color: var(--surface-500);
     --home-highlight-color:#10b981;
     --home-highlight-darker-color:#059669;
     --home-highlight-fore-color:#ffffff;

assets/styles/layout/landing/_light.scss

@@ -1,7 +1,12 @@
 .layout-light {
+    --card-border: 1px solid var(--surface-border);
     --glow-image: url(https://www.primefaces.org/cdn/primevue/images/layout/top-pattern-light.png);
     --topbar-border: rgba(0,0,0,.05);
     --mobile-menu-bg: var(--surface-overlay);
+    --demo-code-bg: var(--surface-700);
+    --demo-code-button-color: var(--surface-400);
+    --demo-code-button-hover-bg: rgba(255,255,255,.1);
+    --demo-code-button-hover-color: var(--surface-300);
     --home-highlight-color:#10b981;
     --home-highlight-darker-color:#059669;
     --home-highlight-fore-color:#ffffff;