From f1049624f7407d4cad94a0919ed0238e6830c296 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sat, 16 May 2026 19:03:43 +0300
Subject: [PATCH] =?UTF-8?q?refactor:=20design=20tokens=20=E2=80=94=20shado?=
 =?UTF-8?q?w=20scale,=20animation=20timing,=20section=20width?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Expand brutal shadow scale: xs (1px) through 2xl (12px)
- Add --ease-micro cubic-bezier for fast micro-interactions
- Tune --duration-normal 200ms→150ms, --duration-spring 380ms→220ms
- Add --section-content-width and register as --container-section in @theme inline
- Register all brutal shadow tokens in @theme inline for Tailwind utility generation
- Add .btn-transition utility (transform-only, shadow snaps instantly)
- Add .rich-text editorial typography class with magazine-quality settings
- Remove section-body blur-out/slide-in view transition animations
---
 src/shared/styles/theme.css | 90 +++++++++++++++----------------------
 1 file changed, 35 insertions(+), 55 deletions(-)

diff --git a/src/shared/styles/theme.css b/src/shared/styles/theme.css
index e193ffe..a7a81da 100644
--- a/src/shared/styles/theme.css
+++ b/src/shared/styles/theme.css
@@ -69,21 +69,27 @@
   --radius: 0px;
 
   /* === BRUTALIST SHADOWS === */
-  --shadow-brutal: 8px 8px 0 var(--blue);
-  --shadow-brutal-sm: 4px 4px 0 var(--blue);
-  --shadow-brutal-lg: 12px 12px 0 var(--blue);
+  --shadow-brutal-xs: 1px 1px 0 var(--blue);
+  --shadow-brutal-sm: 3px 3px 0 var(--blue);
+  --shadow-brutal: 5px 5px 0 var(--blue);
+  --shadow-brutal-md: 7px 7px 0 var(--blue);
+  --shadow-brutal-lg: 8px 8px 0 var(--blue);
+  --shadow-brutal-xl: 10px 10px 0 var(--blue);
+  --shadow-brutal-2xl: 12px 12px 0 var(--blue);
 
   /* === GRID === */
   --grid-gap: var(--space-3);
+  --section-content-width: 56rem;
 
   /* === ANIMATION === */
   --ease-default: ease;
   --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
   --ease-decelerate: cubic-bezier(0.25, 0, 0, 1);
+  --ease-micro: cubic-bezier(0.22, 1, 0.36, 1);
   --duration-fast: 100ms;
-  --duration-normal: 200ms;
+  --duration-normal: 150ms;
   --duration-slow: 350ms;
-  --duration-spring: 380ms;
+  --duration-spring: 220ms;
 }
 
 @theme inline {
@@ -110,6 +116,15 @@
   --radius-sm: var(--radius);
   --radius-md: var(--radius);
   --radius-lg: var(--radius);
+  --container-section: var(--section-content-width);
+
+  --shadow-brutal-xs: var(--shadow-brutal-xs);
+  --shadow-brutal-sm: var(--shadow-brutal-sm);
+  --shadow-brutal: var(--shadow-brutal);
+  --shadow-brutal-md: var(--shadow-brutal-md);
+  --shadow-brutal-lg: var(--shadow-brutal-lg);
+  --shadow-brutal-xl: var(--shadow-brutal-xl);
+  --shadow-brutal-2xl: var(--shadow-brutal-2xl);
 }
 
 @layer base {
@@ -213,6 +228,11 @@
   }
 }
 
+/* Button elevation transition — only transform animates; shadow snaps instantly */
+.btn-transition {
+  transition: transform 0.13s var(--ease-micro);
+}
+
 /* Brutalist utility classes */
 .brutal-shadow {
   box-shadow: var(--shadow-brutal);
@@ -239,20 +259,18 @@
   border-right: var(--border-width) solid var(--blue);
 }
 
-/* Section content enter animation (initial render, no navigation) */
-.section-content {
-  opacity: 1;
-  transform: translateY(0);
-  transition:
-    opacity var(--duration-slow) var(--ease-default),
-    transform var(--duration-slow) var(--ease-default);
+/* Editorial rich-text typography */
+.rich-text {
+  max-width: 65ch;
+  line-height: 1.65;
+  font-feature-settings: "onum";
+  hanging-punctuation: first last;
+  text-wrap: pretty;
+  hyphens: auto;
 }
 
-@starting-style {
-  .section-content {
-    opacity: 0;
-    transform: translateY(12px);
-  }
+.rich-text p + p {
+  margin-top: 1.2em;
 }
 
 /* Cross-section view transition (navigation between sections) */
@@ -291,41 +309,3 @@
     transform: translateY(0);
   }
 }
-
-/* Section body: instant blur-out, clean slide-in */
-::view-transition-old(section-body) {
-  animation-name: section-body-out;
-  animation-duration: var(--duration-fast);
-  animation-timing-function: var(--ease-default);
-  animation-fill-mode: both;
-}
-
-::view-transition-new(section-body) {
-  animation-name: section-body-in;
-  animation-duration: var(--duration-slow);
-  animation-delay: var(--duration-normal);
-  animation-timing-function: var(--ease-decelerate);
-  animation-fill-mode: both;
-}
-
-@keyframes section-body-out {
-  from {
-    opacity: 1;
-    filter: blur(0);
-  }
-  to {
-    opacity: 0;
-    filter: blur(3px);
-  }
-}
-
-@keyframes section-body-in {
-  from {
-    opacity: 0;
-    transform: translateY(16px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}