From be1314f8b805fcc32722d37a505c18848b4cdf74 Mon Sep 17 00:00:00 2001
From: fs <fs@breadcrumb-solutions.de>
Date: Sun, 22 Mar 2026 16:03:10 +0100
Subject: [PATCH] fix: connect --app-font-size to --text-base token and remove
 redundant overrides

--app-font-size was still 100% (16px), disconnected from the type scale
tokens. Now references var(--text-base) so the 14px enterprise baseline
actually takes effect. Remove empty responsive @media font-size placeholders
in variables.base.css and raw heading size overrides in app-shell.css that
fought the clamp()-based tokens.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 web/css/base/variables.base.css | 36 +--------------------------------
 web/css/layout/app-shell.css    | 27 -------------------------
 2 files changed, 1 insertion(+), 62 deletions(-)

diff --git a/web/css/base/variables.base.css b/web/css/base/variables.base.css
index 042cba6..6c666e7 100644
--- a/web/css/base/variables.base.css
+++ b/web/css/base/variables.base.css
@@ -14,7 +14,7 @@
   --app-font-family: var(--app-font-family-sans-serif);
   --app-line-height: 1.5;
   --app-font-weight: 400;
-  --app-font-size: 100%;
+  --app-font-size: var(--text-base);
   --app-text-underline-offset: 0.1rem;
   --app-border-radius: 0.5rem;
   --app-border-width: 0.0625rem;
@@ -120,40 +120,6 @@
   --app-icon-loading: url("data:image/svg+xml,%3Csvg fill='none' height='24' width='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E g %7B animation: rotate 2s linear infinite; transform-origin: center center; %7D circle %7B stroke-dasharray: 75,100; stroke-dashoffset: -5; animation: dash 1.5s ease-in-out infinite; stroke-linecap: round; %7D @keyframes rotate %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D @keyframes dash %7B 0%25 %7B stroke-dasharray: 1,100; stroke-dashoffset: 0; %7D 50%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -17.5; %7D 100%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -62; %7D %7D %3C/style%3E%3Cg%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='rgb(136, 145, 164)' stroke-width='4' /%3E%3C/g%3E%3C/svg%3E");
 }
 
-@media (min-width: 576px) {
-  :host,
-  :root {
-    --app-font-size: 100%;
-  }
-}
-
-@media (min-width: 768px) {
-  :host,
-  :root {
-    --app-font-size: 100%;
-  }
-}
-
-@media (min-width: 1024px) {
-  :host,
-  :root {
-    --app-font-size: 100%;
-  }
-}
-
-@media (min-width: 1280px) {
-  :host,
-  :root {
-    --app-font-size: 100%;
-  }
-}
-
-@media (min-width: 1536px) {
-  :host,
-  :root {
-    --app-font-size: 100%;
-  }
-}
 
 :host(:not([data-theme])),
 :root:not([data-theme]),
diff --git a/web/css/layout/app-shell.css b/web/css/layout/app-shell.css
index 219fd49..ccc0acc 100644
--- a/web/css/layout/app-shell.css
+++ b/web/css/layout/app-shell.css
@@ -366,39 +366,12 @@
     padding-inline: calc(var(--app-spacing) * 1);
   }
 
-  /* NOTE: These responsive heading overrides may be redundant now that
-     --text-2xl … --text-5xl use clamp() for fluid scaling. Kept pending
-     browser verification — removal is tracked separately. */
   @media (min-width: 576px) {
     .container {
       max-width: 510px;
       padding-right: 0;
       padding-left: 0;
     }
-
-    h1 {
-      --app-font-size: 1.7rem;
-    }
-
-    h2 {
-      --app-font-size: 1.6rem;
-    }
-
-    h3 {
-      --app-font-size: 1.3rem;
-    }
-
-    h4 {
-      --app-font-size: 1.2rem;
-    }
-
-    h5 {
-      --app-font-size: 1.1rem;
-    }
-
-    h6 {
-      --app-font-size: 1rem;
-    }
   }
 
   @media (min-width: 768px) {