feat: refresh frontend visual design

frontend/src/styles.css

@@ -1,13 +1,28 @@
 :root {
-  --azionelab-bg: #f3eee6;
-  --azionelab-surface: rgba(255, 255, 255, 0.78);
-  --azionelab-surface-strong: rgba(255, 255, 255, 0.92);
-  --azionelab-ink: #1e1b18;
-  --azionelab-muted: #645b53;
-  --azionelab-accent: #9f2f28;
-  --azionelab-accent-strong: #7f211c;
-  --azionelab-border: rgba(30, 27, 24, 0.12);
-  --azionelab-shadow: 0 18px 48px rgba(46, 28, 18, 0.12);
+  --azionelab-bg: #f5efe6;
+  --azionelab-bg-strong: #efe4d4;
+  --azionelab-surface: rgba(255, 251, 246, 0.84);
+  --azionelab-surface-strong: rgba(255, 252, 248, 0.96);
+  --azionelab-surface-dark: #342924;
+  --azionelab-ink: #221c18;
+  --azionelab-ink-soft: #3a302a;
+  --azionelab-muted: #6f6258;
+  --azionelab-accent: #8f332d;
+  --azionelab-accent-strong: #6e251f;
+  --azionelab-accent-soft: #c88f64;
+  --azionelab-highlight: #c6a768;
+  --azionelab-border: rgba(34, 28, 24, 0.11);
+  --azionelab-border-strong: rgba(34, 28, 24, 0.18);
+  --azionelab-shadow: 0 18px 48px rgba(46, 28, 18, 0.10);
+  --azionelab-shadow-strong: 0 26px 64px rgba(46, 28, 18, 0.16);
+  --azionelab-radius-sm: 10px;
+  --azionelab-radius-md: 16px;
+  --azionelab-radius-lg: 24px;
+  --azionelab-shell-width: 1180px;
+  --azionelab-copy-width: 64ch;
+  --azionelab-section-gap: 28px;
+  --azionelab-sans: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+  --azionelab-serif: Georgia, "Times New Roman", serif;
   --azionelab-success-bg: #edf7ef;
   --azionelab-success-ink: #1f5f2b;
   --azionelab-success-border: rgba(46, 125, 50, 0.18);
@@ -23,12 +38,11 @@
 html, body {
   margin: 0;
   min-height: 100%;
-  font-family: "Manrope", "Segoe UI", sans-serif;
+  font-family: var(--azionelab-sans);
   color: var(--azionelab-ink);
   background:
-    radial-gradient(circle at top right, rgba(159, 47, 40, 0.12), transparent 28%),
-    radial-gradient(circle at left center, rgba(140, 116, 86, 0.14), transparent 35%),
-    linear-gradient(180deg, #fbf7f2 0%, var(--azionelab-bg) 100%);
+    linear-gradient(180deg, rgba(143, 51, 45, 0.06), transparent 140px),
+    linear-gradient(180deg, #faf5ee 0%, var(--azionelab-bg) 52%, #efe4d6 100%);
 }
 
 body {
@@ -36,18 +50,79 @@ body {
 }
 
 h1, h2, h3 {
-  font-family: "Fraunces", "Times New Roman", serif;
-  letter-spacing: -0.02em;
+  font-family: var(--azionelab-serif);
+  font-weight: 700;
+  letter-spacing: 0;
+  color: var(--azionelab-ink);
+}
+
+h1 {
+  font-size: 2.5rem;
+  line-height: 1.02;
+}
+
+h2 {
+  font-size: 1.65rem;
+  line-height: 1.12;
+}
+
+h3 {
+  font-size: 1.15rem;
+  line-height: 1.2;
 }
 
 button, input, textarea {
   font: inherit;
 }
 
-.material-symbols-outlined {
-  font-variation-settings:
-    'FILL' 0,
-    'wght' 500,
-    'GRAD' 0,
-    'opsz' 24;
+a {
+  color: var(--azionelab-accent-strong);
+}
+
+img {
+  max-width: 100%;
+}
+
+code {
+  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
+}
+
+.page {
+  width: min(100%, var(--azionelab-shell-width));
+  margin: 0 auto;
+}
+
+.eyebrow {
+  margin: 0 0 12px;
+  color: var(--azionelab-accent);
+  text-transform: uppercase;
+  font-size: 0.78rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+}
+
+.supporting {
+  color: var(--azionelab-muted);
+  line-height: 1.65;
+  max-width: var(--azionelab-copy-width);
+}
+
+@media (max-width: 900px) {
+  h1 {
+    font-size: 2.15rem;
+  }
+
+  h2 {
+    font-size: 1.45rem;
+  }
+}
+
+@media (max-width: 640px) {
+  h1 {
+    font-size: 1.9rem;
+  }
+
+  h2 {
+    font-size: 1.3rem;
+  }
 }