migrate CSS to SCSS

Rename all src/*.css to src/_*.scss partials and convert style.css
to style.scss with SASS imports.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

assets/css/src/_generic.scss

@@ -138,5 +138,3 @@ button.less::after {
   width: 100%;
   margin-top: calc(var(--unit--vertical) / 2);
 }
-
-

assets/css/style.scss

@@ -0,0 +1,91 @@
+@import "src/reset";
+@import "src/html";
+@import "src/generic";
+@import "src/texts";
+@import "src/header";
+@import "src/nav";
+@import "src/article";
+@import "src/virtual";
+@import "src/home";
+@import "src/grid";
+@import "src/newsletter";
+@import "src/footer";
+@import "src/toggle-light-mode";
+@import "src/print";
+@import "src/toc";
+
+:root {
+  --color-primary--transparent: rgba(255, 255, 255, 0.86);
+
+  /* --color-secondary-rgb: 120, 171, 150;
+  --color-secondary: rgba(var(--color-secondary-rgb), 0.86);
+  --color-secondary--light: rgba(var(--color-secondary-rgb), 0.2);
+  --color-secondary--x-light: rgb(var(--color-secondary-rgb), 0.1);
+
+  --color-tertiary-rgb: 253, 68, 26;
+  --color-tertiary: rgba(var(--color-tertiary-rgb), 0.86);
+  --color-tertiary--light: rgba(var(--color-tertiary-rgb), 0.2);
+  --color-tertiary--x-light: rgb(var(--color-tertiary-rgb), 0.1); */
+  --color-secondary-rgb: 200, 200, 200;
+  --color-secondary: rgba(var(--color-secondary-rgb), 0.86);
+  --color-secondary--light: rgba(var(--color-secondary-rgb), 0.2);
+  --color-secondary--x-light: rgb(var(--color-secondary-rgb), 0.1);
+
+  --color-tertiary-rgb: 200, 200, 200;
+  --color-tertiary: rgba(var(--color-tertiary-rgb), 0.86);
+  --color-tertiary--light: rgba(var(--color-tertiary-rgb), 0.2);
+  --color-tertiary--x-light: rgb(var(--color-tertiary-rgb), 0.1);
+
+  --unit--horizontal: 5vw;
+  --unit--vertical: 1.7rem;
+  --unit--vertical-relative: calc(
+    var(--unit--vertical) * var(--window-height-factor)
+  );
+
+  --font-size-s: 0.8rem;
+  --font-size-m: calc(var(--font-size-s) * 1.5);
+  --font-size-l: calc(var(--font-size-m) * 1.5);
+  --font-size-xl: calc(var(--font-size-l) * 1.5);
+  --font-size-xxl: calc(var(--font-size-xl) * 1.5);
+
+  --font-weight-light: 200;
+  --font-weight-bold: 400;
+  --font-weight-extra-bold: 550;
+
+  --opacity-light: 0.6;
+
+  --curve-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95);
+}
+
+[data-theme="dark"] {
+  --color-background: #000;
+  --color-primary: #ffffff;
+
+  --font-weight-light: 200;
+}
+[data-theme="light"] {
+  --color-background: #ffffff;
+  --color-primary: #000;
+
+  --color-secondary-rgb: 140, 140, 140;
+  --font-weight-light: 240;
+}
+
+@media screen and (min-width: 640px) {
+  :root {
+    --unit--horizontal: 2.5vw;
+    --unit--vertical: 1.7rem;
+
+    --font-size-s: 0.9rem;
+    --font-size-m: calc(var(--font-size-s) * 1.5);
+    --font-size-l: calc(var(--font-size-m) * 1.5);
+    --font-size-xl: calc(var(--font-size-l) * 1.5);
+    --font-size-xxl: calc(var(--font-size-xl) * 1.5);
+
+    /* --font-weight-light: 200;
+    --font-weight-bold: 400;
+    --font-weight-extra-bold: 550; */
+
+    --body-padding: calc(10 * var(--unit--horizontal));
+  }
+}