💄(demo) improve some default style

Improve typography responsive and customize card design tokens for the
dark theme

apps/demo/cunningham.ts

@@ -2,6 +2,14 @@ import { Configuration } from "@openfun/cunningham-react";
 
 const defaultConfig: Configuration = {
   themes: {
+    dark: {
+      components: {
+        card: {
+          "border-width": "none",
+          "box-shadow": "rgba(0, 8, 16, 0.3) 0px 16px 24px",
+        },
+      },
+    },
     redflux_dark: {
       theme: {
         colors: {

apps/demo/src/cunningham-tokens.css

@@ -160,6 +160,8 @@
 	--c--theme--colors--danger-700: #C36666;
 	--c--theme--colors--danger-800: #AE6666;
 	--c--theme--colors--danger-900: #9D6666;
+	--c--components--card--border-width: none;
+	--c--components--card--box-shadow: rgba(0, 8, 16, 0.3) 0px 16px 24px;
 }
 .cunningham-theme--redflux_dark{
 	--c--theme--colors--primary-text: #FFFFFF;

apps/demo/src/index.scss

@@ -7,7 +7,7 @@
 // Reset
 h1 {
   font-family: var(--c--theme--font--families--accent);
-  font-size: 4rem;
+  font-size: clamp(2.5rem, 7vw, 4rem);
   margin: 0;
 }
 
@@ -60,13 +60,6 @@ html, body, #root {
   box-shadow: var(--c--components--card--box-shadow, rgba(149, 157, 165, 0.2) 0px 8px 24px);
 }
 
-.cunningham-theme--dark {
-  .card {
-    box-shadow: none;
-    border: none;
-  }
-}
-
 .container {
   margin: auto;
   position: relative;
@@ -89,9 +82,6 @@ html, body, #root {
     gap: 1.5rem;
     margin: 4rem 0;
 
-    h1 {
-    }
-
     button {
       margin-top: 1.5rem;
     }