stuff

src/styles/tokens.css

@@ -4,19 +4,14 @@
    Old-iOS skeuomorphism × macOS Sequoia neatness × Ubuntu warmth.
    ------------------------------------------------------------
    Single source of truth. Every component reads from here.
+   ------------------------------------------------------------
+   Fonts are NOT loaded here. The branded faces (Anta / Onest /
+   Geist Mono) live in the optional `modern-sk/fonts.css`. The
+   --font-* chains below degrade to system-ui when that file is
+   not imported, and an app can override the tokens to remap any
+   typeface without touching this file.
    ============================================================ */
 
-@import url('https://fonts.googleapis.com/css2?family=Onest:wght@300;400;500;600;700;800&family=Geist+Mono:wght@400;500;600&display=swap');
-
-/* Anta — squared geometric display face (self-hosted from /public/fonts). */
-@font-face {
-  font-family: 'Anta';
-  src: url('../assets/Anta-Regular.ttf') format('truetype');
-  font-weight: 400;
-  font-style: normal;
-  font-display: swap;
-}
-
 :root {
   /* ---------- BRAND ---------- */
   --lime:          #bef264;
@@ -192,7 +187,7 @@
 /* ============================================================
    THE FELT — the one global background.
    ============================================================ */
-.msk-felt {
+.modern-sk-felt {
   position: relative;
   background-color: var(--ink);
   background-image: var(--bg-glow);
@@ -201,7 +196,7 @@
   background-attachment: fixed;
   color: var(--fg-1);
 }
-.msk-felt::before {
+.modern-sk-felt::before {
   content: "";
   position: fixed;
   inset: 0;
@@ -277,40 +272,40 @@
 /* ============================================================
    SEMANTIC TYPE CLASSES
    ============================================================ */
-.msk-display {
+.modern-sk-display {
   font-family: var(--font-display); font-weight: 400;
   font-size: var(--text-5xl); line-height: var(--lh-tight);
   letter-spacing: -0.01em; color: var(--fg-1);
 }
-.msk-h1 {
+.modern-sk-h1 {
   font-family: var(--font-sans); font-weight: var(--w-bold);
   font-size: var(--text-3xl); line-height: var(--lh-snug);
   letter-spacing: var(--track-snug); color: var(--fg-1);
 }
-.msk-h2 {
+.modern-sk-h2 {
   font-family: var(--font-sans); font-weight: var(--w-semibold);
   font-size: var(--text-2xl); line-height: var(--lh-snug);
   letter-spacing: var(--track-snug); color: var(--fg-1);
 }
-.msk-h3 {
+.modern-sk-h3 {
   font-family: var(--font-sans); font-weight: var(--w-semibold);
   font-size: var(--text-xl); line-height: var(--lh-snug); color: var(--fg-1);
 }
-.msk-body {
+.modern-sk-body {
   font-family: var(--font-sans); font-weight: var(--w-regular);
   font-size: var(--text-base); line-height: var(--lh-normal); color: var(--fg-2);
 }
-.msk-body-strong { font-weight: var(--w-medium); color: var(--fg-1); }
-.msk-caption {
+.modern-sk-body-strong { font-weight: var(--w-medium); color: var(--fg-1); }
+.modern-sk-caption {
   font-family: var(--font-sans); font-weight: var(--w-medium);
   font-size: var(--text-sm); color: var(--fg-3);
 }
-.msk-label {
+.modern-sk-label {
   font-family: var(--font-sans); font-weight: var(--w-semibold);
   font-size: 11px; text-transform: uppercase;
   letter-spacing: var(--track-caps); color: var(--fg-3);
 }
-.msk-mono {
+.modern-sk-mono {
   font-family: var(--font-mono); font-weight: var(--w-regular);
   font-size: var(--text-sm); color: var(--fg-2);
 }