refactor(css): align shared tokens and app styles with stylelint

Author: gildesmarais

frontend/src/styles/main.css

@@ -68,6 +68,11 @@
   opacity: 0.34;
 }
 
+.dominant-field {
+  position: relative;
+  align-items: center;
+}
+
 .form-shell--minimal .dominant-field {
   width: min(100%, 52rem);
   margin: 0 auto;
@@ -78,21 +83,16 @@
 }
 
 .result-shell .dominant-field {
-  --input-lg-min-height: 3.85rem;
-  --input-lg-padding-inline: 1.35rem 5.2rem;
+  --input-lg-min-height: 4rem;
+  --input-lg-padding-inline: 1.25rem 5rem;
   --input-lg-font-size: clamp(1rem, 1.8vw, 1.22rem);
   --input-lg-letter-spacing: -0.01em;
-  --dominant-field-action-top: 0.48rem;
-  --dominant-field-action-right: 0.48rem;
-  --dominant-field-action-text-min-width: 4.2rem;
-  --dominant-field-action-text-padding-inline: 0.8rem;
-  --dominant-field-action-soft-bg: rgba(255, 255, 255, 0.045);
-  --dominant-field-action-soft-hover-bg: rgba(255, 255, 255, 0.08);
-}
-
-.dominant-field {
-  position: relative;
-  align-items: center;
+  --dominant-field-action-top: 0.5rem;
+  --dominant-field-action-right: 0.5rem;
+  --dominant-field-action-text-min-width: 4rem;
+  --dominant-field-action-text-padding-inline: var(--space-3);
+  --dominant-field-action-soft-bg: var(--surface-base);
+  --dominant-field-action-soft-hover-bg: var(--border-subtle);
 }
 
 .field-block {
@@ -130,7 +130,7 @@
   padding: 0;
   margin: -1px;
   overflow: hidden;
-  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
   white-space: nowrap;
   border: 0;
 }
@@ -155,7 +155,7 @@
 
 .input {
   width: 100%;
-  padding: 0.95rem 1.1rem;
+  padding: var(--space-4);
   border: var(--border-width) solid var(--border-muted);
   border-radius: 999px;
   background: var(--surface-elevated);
@@ -172,9 +172,6 @@
 }
 
 .input:focus-visible,
-.btn:focus-visible,
-.utility-link:focus-visible,
-.utility-button:focus-visible,
 a:focus-visible {
   outline: none;
   box-shadow: var(--focus-ring);
@@ -187,7 +184,7 @@ a:focus-visible {
 
 .input--lg {
   min-height: var(--input-lg-min-height, 4.5rem);
-  padding-inline: var(--input-lg-padding-inline, 1.35rem 4.9rem);
+  padding-inline: var(--input-lg-padding-inline, 1.25rem 5rem);
   font-size: var(--input-lg-font-size, clamp(1.05rem, 2.3vw, 1.5rem));
   letter-spacing: var(--input-lg-letter-spacing, -0.03em);
 }
@@ -199,7 +196,7 @@ a:focus-visible {
   border-color: transparent;
   color: var(--text-muted);
   text-align: center;
-  font-size: 0.98rem;
+  font-size: var(--font-size-0);
   font-weight: 500;
   padding: 0;
 }
@@ -219,7 +216,7 @@ a:focus-visible {
   justify-content: center;
   border: 0;
   border-radius: 999px;
-  background: var(--dominant-field-action-bg, rgba(255, 255, 255, 0.06));
+  background: var(--dominant-field-action-bg, var(--surface-elevated));
   color: var(--text-strong);
   cursor: pointer;
   transition:
@@ -231,28 +228,18 @@ a:focus-visible {
 
 .dominant-field__action--text {
   width: auto;
-  min-width: var(--dominant-field-action-text-min-width, 4.4rem);
-  padding: 0 var(--dominant-field-action-text-padding-inline, 0.9rem);
+  min-width: var(--dominant-field-action-text-min-width, 4rem);
+  padding: 0 var(--dominant-field-action-text-padding-inline, var(--space-3));
   font-size: var(--font-size-00);
   letter-spacing: 0.04em;
   text-transform: uppercase;
 }
 
 .dominant-field__action--soft {
-  background: var(--dominant-field-action-soft-bg, rgba(255, 255, 255, 0.045));
+  background: var(--dominant-field-action-soft-bg, var(--surface-base));
   color: var(--text-muted);
 }
 
-.dominant-field__action:hover:not(:disabled) {
-  transform: translateX(0.04rem);
-  background: rgba(255, 255, 255, 0.11);
-}
-
-.dominant-field__action--soft:hover:not(:disabled) {
-  background: var(--dominant-field-action-soft-hover-bg, rgba(255, 255, 255, 0.08));
-  color: var(--text-strong);
-}
-
 .dominant-field__action:disabled {
   opacity: 0.5;
   cursor: not-allowed;
@@ -263,6 +250,16 @@ a:focus-visible {
   box-shadow: var(--focus-ring);
 }
 
+.dominant-field__action:hover:not(:disabled) {
+  transform: translateX(0.04rem);
+  background: var(--border-subtle);
+}
+
+.dominant-field__action--soft:hover:not(:disabled) {
+  background: var(--dominant-field-action-soft-hover-bg, var(--border-subtle));
+  color: var(--text-strong);
+}
+
 .notice {
   display: grid;
   gap: var(--space-2);
@@ -309,7 +306,7 @@ a:focus-visible {
 .featured-feed-item:hover,
 .featured-feed-item:focus-within {
   border-color: var(--border-strong);
-  background: rgba(255, 255, 255, 0.065);
+  background: var(--border-subtle);
 }
 
 .featured-feed-item__link:hover,
@@ -330,12 +327,12 @@ a:focus-visible {
 }
 
 .notice[data-tone="error"] {
-  border-color: rgba(248, 113, 113, 0.22);
+  border-color: var(--border-danger);
   background: var(--bg-danger);
 }
 
 .notice[data-tone="success"] {
-  border-color: rgba(110, 231, 183, 0.22);
+  border-color: var(--border-success);
   background: var(--bg-success);
 }
 
@@ -387,13 +384,13 @@ a:focus-visible {
 }
 
 .token-gate__actions .btn {
-  min-height: 2.55rem;
-  padding-inline: 0.95rem;
+  min-height: 2.5rem;
+  padding-inline: var(--space-4);
   border-color: var(--border-subtle);
-  background: rgba(255, 255, 255, 0.025);
+  background: var(--surface-base);
   color: var(--text-body);
-  font-size: 0.98rem;
-  font-weight: 550;
+  font-size: var(--font-size-0);
+  font-weight: 600;
 }
 
 .token-gate__back {
@@ -410,7 +407,7 @@ a:focus-visible {
 
 .token-gate__nudge-link {
   text-decoration: none;
-  color: rgba(255, 255, 255, 0.72);
+  color: var(--eyebrow-color);
 }
 
 .token-gate__nudge-link:hover,
@@ -426,27 +423,27 @@ a:focus-visible {
 
 .field-block--stretch .input {
   min-height: 3.5rem;
-  padding-inline: 1.1rem;
+  padding-inline: var(--space-4);
   border-color: var(--border-muted);
   background: var(--surface-elevated);
 }
 
 .field-block--stretch .input::placeholder {
-  color: rgba(255, 255, 255, 0.28);
+  color: var(--text-faint);
 }
 
 .field-block--stretch .field-error {
   text-align: left;
 }
 
 .result-hero__reader {
-  border-color: rgba(255, 147, 0, 0.24);
-  background: rgba(255, 147, 0, 0.12);
+  border-color: var(--border-reader);
+  background: var(--surface-reader);
 }
 
 .result-meta {
   margin: 0;
-  font-size: clamp(0.98rem, 1.5vw, 1.16rem);
+  font-size: clamp(var(--font-size-0), 1.5vw, var(--font-size-2));
   line-height: 1.18;
   color: var(--text-strong);
   text-align: left;
@@ -488,7 +485,7 @@ a:focus-visible {
 
 .preview-card__date {
   margin: 0;
-  color: rgba(255, 255, 255, 0.62);
+  color: var(--text-muted);
   font-size: var(--font-size-00);
   letter-spacing: 0.05em;
   text-transform: uppercase;
@@ -505,7 +502,7 @@ a:focus-visible {
 }
 
 .preview-card__actions a {
-  color: rgba(255, 255, 255, 0.72);
+  color: var(--eyebrow-color);
   font-size: var(--font-size-00);
   font-weight: 600;
   letter-spacing: 0.06em;
@@ -527,8 +524,8 @@ a:focus-visible {
 }
 
 .btn--linkish {
-  color: rgba(255, 255, 255, 0.78);
-  font-weight: 560;
+  color: var(--eyebrow-color);
+  font-weight: 600;
 }
 
 .notice[data-state="loading"] p {
@@ -543,7 +540,7 @@ a:focus-visible {
 .notice__spinner {
   width: 1rem;
   height: 1rem;
-  border: var(--border-width) solid rgba(255, 255, 255, 0.16);
+  border: var(--border-width) solid var(--border-muted);
   border-top-color: var(--accent);
   border-radius: 999px;
   animation: spin 0.9s linear infinite;
@@ -568,6 +565,13 @@ a:focus-visible {
   cursor: pointer;
 }
 
+.utility-link:focus-visible,
+.utility-button:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+  border-color: var(--border-strong);
+}
+
 .utility-link:hover,
 .utility-button:hover {
   color: var(--text-strong);
@@ -578,7 +582,7 @@ a:focus-visible {
   text-transform: uppercase;
 }
 
-@media (min-width: 48rem) {
+@media (width >= 48rem) {
   .page-main {
     padding-top: clamp(1rem, 6vh, 4rem);
   }
@@ -589,7 +593,7 @@ a:focus-visible {
   }
 }
 
-@media (max-width: 47.9375rem) {
+@media (width < 48rem) {
   .workspace-shell {
     gap: var(--space-4);
   }