Introduce a type scale and apply to the font-size rules

1 files changed, 40 insertions, 29 deletions

diff --git a/public/stylesheets/admin.css b/public/stylesheets/admin.css
index d69a5e5c..db4b02a1 100644
--- a/public/stylesheets/admin.css
+++ b/public/stylesheets/admin.css
@@ -55,6 +55,15 @@
   --shadow-modal:          0 4px 16px light-dark(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.7));
 
   --radius:                6px;
+
+  /* Type scale. Everything secondary is --text-sm; --text-xs is for hints
+     and paths. */
+  --text-xs:               0.75rem;
+  --text-sm:               0.875rem;
+  --text-base:             1rem;
+  --text-lg:               1.125rem;
+  --text-xl:               1.25rem;
+  --badge-text:            0.65rem;
 }
 
 @media (prefers-color-scheme: light) {
@@ -71,7 +80,7 @@
 
 body {
   font-family: Helvetica, Arial, sans-serif;
-  font-size: 1rem;
+  font-size: var(--text-base);
   margin: 0px;
 }
 
@@ -98,14 +107,14 @@ th {
 input[type=text],
 input[type=password],
 textarea {
-  font-size: 1rem;
+  font-size: var(--text-base);
   font-family: Helvetica, Arial, sans-serif;
   border: 1px solid var(--field-border);
   border-radius: 2px;
 }
 
 select {
-  font-size: 1rem;
+  font-size: var(--text-base);
   border: 1px solid var(--field-border);
 }
 
@@ -162,7 +171,7 @@ input[type=radio] {
 
 #login_form h1 {
   margin-top: 0;
-  font-size: 1.25rem;
+  font-size: var(--text-xl);
 }
 
 #login_form label {
@@ -534,7 +543,7 @@ form.button_to svg  {
 }
 
 #main_navigation a.nav_locale {
-  font-size: 0.875rem;
+  font-size: var(--text-sm);
   font-weight: 700;
   letter-spacing: 0.04em;
   line-height: 1;
@@ -548,7 +557,7 @@ form.button_to svg  {
   width: 100%;
   box-sizing: border-box;
   padding: 10px 14px;
-  font-size: 1.1rem;
+  font-size: var(--text-lg);
   border-radius: 2px;
 }
 
@@ -611,7 +620,7 @@ form.button_to svg  {
 .dashboard_widget_meta {
   white-space: nowrap;
   color: var(--text-muted);
-  font-size: 0.85rem;
+  font-size: var(--text-sm);
 }
 
 .dashboard_widget_meta svg {
@@ -690,7 +699,7 @@ form.button_to svg  {
   align-items: center;
   gap: 0.3rem;
   margin-top: 0.25rem;
-  font-size: 0.875rem;
+  font-size: var(--text-sm);
   color: var(--text-muted);
 }
 
@@ -913,6 +922,8 @@ form.button_to svg  {
   background-color: var(--action-solid);
 }
 
+/* Deliberate override of the rule above: the disabled tile takes its
+   layout from the shared selector and neutralises the fill and border. */
 .action_item .disabled_action {
   color: var(--text-muted);
   background-color: transparent;
@@ -1077,7 +1088,7 @@ div.layout_row_content {
   display: block;
   font-weight: normal;
   color: var(--text-muted);
-  font-size: 0.85rem;
+  font-size: var(--text-sm);
   text-transform: lowercase;
 }
 
@@ -1127,7 +1138,7 @@ div.layout_row_content {
 .field_hint {
   display: block;
   margin-top: 2px;
-  font-size: 0.75rem;
+  font-size: var(--text-xs);
   color: var(--text-muted);
   padding-bottom: 4px;
 }
@@ -1223,12 +1234,12 @@ div.layout_row_content {
 }
 
 .link_locale_tag {
-  font-size: 0.85rem;
+  font-size: var(--text-sm);
   color: var(--text-muted);
 }
 
 .link_matrix_locale {
-  font-size: 0.8rem;
+  font-size: var(--text-xs);
   font-variant: all-small-caps;
   letter-spacing: 0.06em;
   color: var(--text);
@@ -1262,7 +1273,7 @@ div.layout_row_content {
 /* Transient "Copied!" text; empty at rest. */
 .link_icon_button .copy_button_label:not(:empty) {
   margin-left: 0.35rem;
-  font-size: 0.85rem;
+  font-size: var(--text-sm);
 }
 
 @media (min-width: 1016px) {
@@ -1407,7 +1418,7 @@ div.layout_row_content {
    changes. */
 #sitemap summary {
   padding: 0 0 0.5rem 0;
-  font-size: 0.875rem;
+  font-size: var(--text-sm);
   margin-left: 1rem;
   color: var(--text-muted);
 }
@@ -1675,7 +1686,7 @@ input#menu_item_title {
   padding: 2px 10px;
   border-radius: 999px;
   background-color: var(--surface-tint);
-  font-size: 0.85rem;
+  font-size: var(--text-sm);
   text-decoration: none;
 }
 
@@ -1692,7 +1703,7 @@ input#menu_item_title {
   background: var(--surface-tint);
   border-radius: 999px;
   padding: 0.15rem 0.75rem;
-  font-size: 0.9em;
+  font-size: var(--text-sm);
 }
 
 /* ============================================================
@@ -1717,7 +1728,7 @@ input#menu_item_title {
   box-sizing: border-box;
   padding: 8px 12px;
   border-radius: 2px;
-  font-size: 18px;
+  font-size: var(--text-lg);
 }
 
 .search_results p {
@@ -1730,13 +1741,13 @@ input#menu_item_title {
   text-decoration: none;
   display: block;
   font-weight: bold;
-  font-size: 0.95rem;
+  font-size: var(--text-base);
 }
 
 .search_results p span.result_path {
   display: block;
   margin-top: 2px;
-  font-size: 0.75rem;
+  font-size: var(--text-xs);
   font-family: monospace;
   color: var(--text-muted);
   padding-bottom: 4px;
@@ -1744,14 +1755,14 @@ input#menu_item_title {
 
 .search_results .restricted_result {
   display: block;
-  font-size: 0.85rem;
+  font-size: var(--text-sm);
   color: var(--accent);
 }
 
 .search_results p.search_more {
   margin: 0;
   padding: 6px 4px;
-  font-size: 0.8rem;
+  font-size: var(--text-xs);
   color: var(--text-muted);
   font-style: italic;
   border-bottom: none;
@@ -1761,7 +1772,7 @@ input#menu_item_title {
   margin: 8px 0 2px;
   padding: 0;
   border-bottom: none;
-  font-size: 0.75rem;
+  font-size: var(--text-xs);
   color: var(--text-muted);
   text-transform: lowercase;
   font-weight: normal;
@@ -1802,7 +1813,7 @@ input#menu_item_title {
 
 .menu_item_translation {
   display: block;
-  font-size: 0.85rem;
+  font-size: var(--text-sm);
   color: var(--text-muted);
 }
 
@@ -2138,7 +2149,7 @@ input#menu_item_title {
   right: 2px;
   background: var(--headline-badge-bg);
   color: var(--headline-badge-fg);
-  font-size: 0.65em;
+  font-size: var(--badge-text);
   text-align: center;
   border-radius: 3px;
   padding: 1px 0;
@@ -2167,7 +2178,7 @@ input#menu_item_title {
 #node_action_list td.node_action_time {
   white-space: nowrap;
   vertical-align: top;
-  font-size: 0.8em;
+  font-size: var(--text-xs);
   color: var(--text-muted);
   padding-right: 1em;
 }
@@ -2183,19 +2194,19 @@ input#menu_item_title {
 
 .node_action_inferred {
   opacity: 0.5;
-  font-size: smaller;
+  font-size: var(--text-xs);
   margin-left: 0.5em;
 }
 
 .node_action_zoom {
-  font-size: smaller;
+  font-size: var(--text-xs);
   margin-left: 0.5em;
 }
 
 .node_action_details summary {
   margin-top: 0.2rem;
   cursor: pointer;
-  font-size: smaller;
+  font-size: var(--text-xs);
   color: var(--text-muted);
 }
 
@@ -2206,7 +2217,7 @@ input#menu_item_title {
 }
 
 .revision_lifecycle {
-  font-size: 0.85rem;
+  font-size: var(--text-sm);
   color: var(--text-muted);
 }