@noobsociety/nsds 0.3.0 → 0.4.1

package/dist/tokens/hud.css

@@ -9,125 +9,166 @@
    vital bar colours that have no homepage analogue) the token is defined independently. */
 
 :root {
-
   /* ── Fonts ─────────────────────────────────────────────────── */
-  --hud-font:    var(--ns-font-pixel);  /* chrome labels, tab caps, key glyphs */
-  --hud-font-ui: var(--ns-font-body);  /* draggable windows, dialogue, inventory */
+  --hud-font: var(--ns-font-pixel); /* chrome labels, tab caps, key glyphs */
+  --hud-font-ui: var(--ns-font-body); /* draggable windows, dialogue, inventory */
+
+  /* ── HUD text scale (pixel-perfect at 24×24 grid) ───────────── */
+  --hud-text-xs: 4px;
+  --hud-text-sm: 5px;
+  --hud-text-md: 7px;
+  --hud-text-lg: 9px;
+  --hud-text-xl: 11px;
 
   /* ── Accent / currency ─────────────────────────────────────── */
   /* DS is source of truth: game migrates from #ffe066 → --ns-gold (#e6db74). */
-  --hud-gold:    var(--ns-gold);
-  --hud-talents: var(--ns-gold);        /* Talents wallet number */
+  --hud-gold: var(--ns-gold);
+  --hud-talents: var(--ns-gold); /* Talents wallet number */
 
   /* ── Text ───────────────────────────────────────────────────── */
-  --hud-text:     var(--ns-ink);
+  --hud-text: var(--ns-ink);
   --hud-text-dim: var(--ns-ink-dim);
-  --hud-shadow:   none;                  /* no text-shadow at HUD pixel sizes */
+  --hud-shadow: none; /* no text-shadow at HUD pixel sizes */
   --hud-bar-shadow: none;
 
   /* ── Surfaces ───────────────────────────────────────────────── */
   /* Game chrome glass: lighter than --ns-glass so the world reads through. */
-  --hud-glass:      rgba(12, 16, 22, 0.62);
+  --hud-glass: rgba(12, 16, 22, 0.62);
   --hud-glass-blur: 6px;
-  --hud-bg:         rgba(0, 0, 0, 0.35);
-  --hud-bg-strong:  rgba(0, 0, 0, 0.72);
-  --hud-track:      rgba(255, 255, 255, 0.10);   /* bar + XP track background */
-  --hud-line:       rgba(255, 255, 255, 0.18);
-  --hud-avatar-bg:  rgba(72, 86, 116, 0.82);
+  --hud-bg: rgba(0, 0, 0, 0.35);
+  --hud-bg-strong: rgba(0, 0, 0, 0.72);
+  --hud-track: rgba(255, 255, 255, 0.1); /* bar + XP track background */
+  --hud-line: rgba(255, 255, 255, 0.18);
+  --hud-divider: var(--hud-line);
+  --hud-avatar-bg: rgba(72, 86, 116, 0.82);
 
   /* ── Input / selection ─────────────────────────────────────── */
-  --hud-input-bg:  rgba(10, 14, 20, 0.55);
-  --hud-sel-bg:    var(--ns-ink);
-  --hud-sel-fg:    var(--ns-bg-1);
+  --hud-input-bg: rgba(10, 14, 20, 0.55);
+  --hud-sel-bg: var(--ns-ink);
+  --hud-sel-fg: var(--ns-bg-1);
 
   /* ── Elements (identity.ts ELEMENT_DISPLAY) ───────────────────── */
   /* ── Elements (identity.ts ELEMENT_DISPLAY exact colors) ─────────── */
   --hud-el-neutral: #888780;
-  --hud-el-earth:   #639922;
-  --hud-el-wind:    #5dcaa5;
-  --hud-el-water:   #378add;
-  --hud-el-fire:    #ba7517;
-  --hud-el-light:   #fac775;
-  --hud-el-dark:    #888780;
-  --hud-el-void:    #7f77dd;
+  --hud-el-earth: #639922;
+  --hud-el-wind: #5dcaa5;
+  --hud-el-water: #378add;
+  --hud-el-fire: #ba7517;
+  --hud-el-light: #fac775;
+  --hud-el-dark: #888780;
+  --hud-el-void: #7f77dd;
 
   /* ── Vital bars ─────────────────────────────────────────────── */
   /* HP — green track, bright fill, low-HP red warning */
-  --hud-hp:         var(--hud-track);  /* track background */
-  --hud-hp-fill:    #4caf73;   /* normal fill */
-  --hud-hp-low:     #cc3333;   /* fill under 30% → also pulses */
-  --hud-hp-label:   #88ee88;   /* "HP" label text in classic bar */
+  --hud-hp: var(--hud-track); /* track background */
+  --hud-hp-fill: #4caf73; /* normal fill */
+  --hud-hp-low: #cc3333; /* fill under 30% → also pulses */
+  --hud-hp-label: #88ee88; /* "HP" label text in classic bar */
   /* MP — blue track, bright fill, low-MP muted */
-  --hud-mp:         var(--hud-track);  /* track background (internal id: sp) */
-  --hud-mp-fill:    #5b9bd5;   /* normal fill */
-  --hud-mp-low:     #4f7fc0;   /* fill under 30% */
-  --hud-mp-label:   #8888ee;   /* "MP"/"SP" label text */
+  --hud-mp: var(--hud-track); /* track background (internal id: sp) */
+  --hud-mp-fill: #5b9bd5; /* normal fill */
+  --hud-mp-low: #4f7fc0; /* fill under 30% */
+  --hud-mp-label: #8888ee; /* "MP"/"SP" label text */
+
+  /* Stamina — segmented endurance bar */
+  --hud-stamina-fill: #5dcaa5; /* teal fill */
+  --hud-stamina-label: #8fe6cc; /* stamina label text */
 
   /* ── XP tracks ──────────────────────────────────────────────── */
   /* Three independent mastery tracks: Base (BXP), Tech (TXP), Weapon (WXP). */
-  --hud-xp-base:          #4488cc;   /* BXP fill — steel blue */
-  --hud-xp-base-rgb:      68 136 204;  /* @kind other */
-  --hud-xp-base-label:    #88aaee;   /* BXP label */
-  --hud-xp-job:           #8855cc;   /* TXP fill — purple */
-  --hud-xp-job-rgb:       136 85 204;  /* @kind other */
-  --hud-xp-job-label:     #aa88ee;   /* TXP label */
-  --hud-xp-weapon:        #cc8844;   /* WXP fill — amber */
-  --hud-xp-weapon-rgb:    204 136 68;  /* @kind other */
-  --hud-xp-weapon-label:  #eeaa66;   /* WXP label */
+  --hud-xp-base: #4488cc; /* BXP fill — steel blue */
+  --hud-xp-base-rgb: 68 136 204; /* @kind other */
+  --hud-xp-base-label: #88aaee; /* BXP label */
+  --hud-xp-job: #8855cc; /* TXP fill — purple */
+  --hud-xp-job-rgb: 136 85 204; /* @kind other */
+  --hud-xp-job-label: #aa88ee; /* TXP label */
+  --hud-xp-weapon: #cc8844; /* WXP fill — amber */
+  --hud-xp-weapon-rgb: 204 136 68; /* @kind other */
+  --hud-xp-weapon-label: #eeaa66; /* WXP label */
 
   /* Progress bars in the player card detail (Marks / Craft). */
-  --hud-marks-track:  #3a2e6e;
-  --hud-marks-fill:   #7f77dd;
-  --hud-craft-track:  #4a2e0a;
-  --hud-craft-fill:   #ba7517;
+  --hud-marks-track: #3a2e6e;
+  --hud-marks-fill: #7f77dd;
+  --hud-craft-track: #4a2e0a;
+  --hud-craft-fill: #ba7517;
 
   /* ── Chat log channel tones ─────────────────────────────────── */
   /* Logs tab (battle narration) vs Chat tab (social stream). */
-  --hud-tone-battle: #ff8888;   /* combat hits, defeat lines */
-  --hud-tone-world:  #88ccff;   /* map announcements, world events */
-  --hud-tone-gain:   #aaffaa;   /* EXP / loot / discovery / rewards */
-  --hud-tone-say:    #cccccc;   /* player speech, system messages */
+  --hud-tone-battle: #ff8888; /* combat hits, defeat lines */
+  --hud-tone-world: #88ccff; /* map announcements, world events */
+  --hud-tone-gain: #aaffaa; /* EXP / loot / discovery / rewards */
+  --hud-tone-say: #cccccc; /* player speech, system messages */
 
   /* ── Status / buffs ─────────────────────────────────────────── */
-  --hud-danger:  var(--ns-pink);   /* death zone, error states */
-  --hud-buff:    var(--ns-green);  /* positive effect glyphs */
-  --hud-debuff:  #ee6666;          /* negative effect glyphs */
+  --hud-danger: var(--ns-pink); /* death zone, error states */
+  --hud-buff: var(--ns-green); /* positive effect glyphs */
+  --hud-debuff: #ee6666; /* negative effect glyphs */
 
   /* ── Minimap ────────────────────────────────────────────────── */
-  --hud-minimap-bg:   #091509;                      /* canvas fill */
-  --hud-minimap-edge: #2a4a2a;                      /* outer diamond stroke */
-  --hud-minimap-player: #ffffff;                    /* player dot */
-  --hud-minimap-enemy:  #ff5a5a;                    /* aggressive mob dot */
-  --hud-minimap-npc:    #f4c542;                    /* interactable / NPC dot */
-  --hud-minimap-dest:   var(--ns-cyan);             /* walk-goal diamond */
+  --hud-minimap-bg: #091509; /* canvas fill */
+  --hud-minimap-edge: #2a4a2a; /* outer diamond stroke */
+  --hud-minimap-path: var(--hud-gold); /* paths / points of interest */
+  --hud-minimap-player: #ffffff; /* player dot */
+  --hud-minimap-enemy: #ff5a5a; /* aggressive mob dot */
+  --hud-minimap-npc: #f4c542; /* interactable / NPC dot */
+  --hud-minimap-dest: var(--ns-cyan); /* walk-goal diamond */
 
   /* ── Geometry ───────────────────────────────────────────────── */
-  --hud-radius:    4px;
+  --hud-radius: 4px;
   --hud-radius-sm: 2px;
+  --hud-grid-overlay: rgba(255, 255, 255, 0.07); /* drag-mode grid line tint */
+
+  /* ── Scene Builder editor chrome ────────────────────────────── */
+  /* Canvas-editing affordances for the HUD composer (resize handles, delete
+     buttons, align bar, swatches, ghost, tooltips). Consumed by
+     components/scene-builder.css — the source of truth for the editor's look.
+     The black-ink shadows below live in tokens (not literals) so every editing
+     overlay shares one stroke/ring vocabulary. */
+  --hud-edit-handle: 5px; /* resize-handle box */
+  --hud-edit-handle-fill: rgb(var(--ns-gold-rgb) / 0.95);
+  --hud-edit-handle-ring: 0 0 0 1px rgba(0, 0, 0, 0.6);
+  --hud-edit-del: 10px; /* per-element + floating delete */
+  --hud-edit-btn: 22px; /* header chrome buttons */
+  --hud-edit-toggle-h: 18px; /* grid / hud / bg toggles */
+  --hud-edit-ring: rgba(0, 0, 0, 0.5); /* floater & tooltip 1px ring / drop shadow */
+  --hud-edit-hover: rgba(255, 255, 255, 0.06); /* subtle chrome hover fill */
+  --hud-edit-overlay: rgba(255, 255, 255, 0.1); /* align-button resting fill */
+  /* White HUD text over the world: 4-corner pixel stroke (+ soft glow on labels). */
+  --hud-edit-stroke:
+    -1px -1px 0 rgba(0, 0, 0, 0.92), 1px -1px 0 rgba(0, 0, 0, 0.92), -1px 1px 0 rgba(0, 0, 0, 0.92),
+    1px 1px 0 rgba(0, 0, 0, 0.92), 0 0 4px rgba(0, 0, 0, 0.6);
+  --hud-edit-stroke-bar:
+    -1px -1px 0 rgba(0, 0, 0, 0.92), 1px -1px 0 rgba(0, 0, 0, 0.92), -1px 1px 0 rgba(0, 0, 0, 0.92),
+    1px 1px 0 rgba(0, 0, 0, 0.92);
 
   /* ── Cross-layout geometry (640×360 design space) ───────────── */
   /* The HUD lives in a 3×3 grid over the 640×360 canvas.
      Each corner pocket sits inside its cell with 5% padding per axis. */
-  --hud-cross-cell-w: calc(640px / 3); /* @kind other */  /* 213.33px */
-  --hud-cross-cell-h: calc(360px / 3); /* @kind other */  /* 120px */
-  --hud-cross-pad-x:  calc(var(--hud-cross-cell-w) * 0.05); /* 10.67px */
+  --hud-cross-cell-w: calc(640px / 3); /* @kind other */ /* 213.33px */
+  --hud-cross-cell-h: calc(360px / 3); /* @kind other */ /* 120px */
+  --hud-cross-pad-x: calc(var(--hud-cross-cell-w) * 0.05); /* 10.67px */
   /* NOTE: CSS percentage padding always resolves to % of the element WIDTH,
      so pad-y equals pad-x, not 5% of the cell height. */
-  --hud-cross-pad-y:  calc(var(--hud-cross-cell-w) * 0.05); /* 10.67px — same as pad-x */
-
-  /* ── Inner 8×8 grid cell size (padded pocket ÷ 8) ──────────── */
-  /* The padded pocket is 90% of the cell (5% pad each side). */
-  /* Padded inner area: width = cell-w - 2*pad = 192px, height = cell-h - 2*pad = 98.67px */
-  --hud-grid-cell-w: calc((var(--hud-cross-cell-w) - 2 * var(--hud-cross-pad-x)) / 8); /* @kind spacing */ /* 24px    */
-  --hud-grid-cell-h: calc((var(--hud-cross-cell-h) - 2 * var(--hud-cross-pad-y)) / 8); /* @kind spacing */ /* 12.33px */
-
-  /* ── Minimum interactive element: 2×2 inner grid cells ─────── */
-  /* No HUD element (button, slot, pip row, icon) may be smaller than this.
-     Smaller than 2×2 is invisible at a glance and un-tappable on mobile.
-     At runtime the HUD scales by --hud-scale (~2–3×), so 48×27 design px
-     maps to ~96×54 real px on a typical phone — the 44px mobile floor. */
-  /* Interactive elements only — buttons, slots, icons, cells.
-     Passive elements (bars, dividers, borders) are exempt. */
-  --hud-min-tap-w: calc(var(--hud-grid-cell-w) * 2); /* @kind spacing */ /* 48px   */
-  --hud-min-tap-h: calc(var(--hud-grid-cell-h) * 2); /* @kind spacing */ /* 27px   */
+  --hud-cross-pad-y: calc(var(--hud-cross-cell-w) * 0.05); /* 10.67px — same as pad-x */
+
+  /* ── Game canvas & 24×24 drag grid ─────────────────────────── */
+  /* Source of truth for the 667×375 HUD canvas and its 24×24 placement grid.
+     All HUD element positioning uses grid-column / grid-row spans.
+     No element may span fewer than 1 cell on either axis. */
+  --hud-canvas-bg: #000; /* outer background behind the game canvas */
+  --hud-canvas-w: 667px; /* design canvas width  */
+  --hud-canvas-h: 375px; /* design canvas height */
+  --hud-grid-cols: 24; /* @kind other */
+  --hud-grid-rows: 24; /* @kind other */
+  --hud-grid-gap: 2px; /* gap between cells          */
+  /* Cell dimensions (canvas minus gaps, divided by count) */
+  --hud-cell-w: calc((667px - 23 * 2px) / 24); /* @kind spacing */ /* ≈27.8px */
+  --hud-cell-h: calc((375px - 23 * 2px) / 24); /* @kind spacing */ /* ≈15.6px */
+
+  /* ── Minimum interactive tap target: 2×2 cells ──────────────── */
+  /* No HUD button, slot, or icon may be smaller than this.
+     Passive elements (bars, dividers, borders) are exempt.
+     At runtime HUD scales ~2–3×, mapping these to ≥44px real px. */
+  --hud-min-tap-w: calc(var(--hud-cell-w) * 2); /* @kind spacing */ /* ≈55.6px */
+  --hud-min-tap-h: calc(var(--hud-cell-h) * 2); /* @kind spacing */ /* ≈31.2px */
 }

package/dist/tokens/motion.css

@@ -1,63 +1,97 @@
 /* NoobSociety — Motion tokens & keyframes */
 :root {
   /* ── Durations ────────────────────────────────────────────── */
-  --ns-dur-fast:    150ms;  /* @kind other */
-  --ns-dur-base:    200ms;  /* @kind other */
-  --ns-dur-slow:    400ms;  /* @kind other */
-  --ns-dur-xslow:   600ms;  /* @kind other */
+  --ns-dur-fast: 150ms; /* @kind other */
+  --ns-dur-base: 200ms; /* @kind other */
+  --ns-dur-slow: 400ms; /* @kind other */
+  --ns-dur-xslow: 600ms; /* @kind other */
 
   /* ── Easings ──────────────────────────────────────────────── */
-  --ns-ease-out:    ease-out;                             /* @kind other */
-  --ns-ease-in-out: ease-in-out;                           /* @kind other */
-  --ns-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);    /* @kind other */
+  --ns-ease-out: ease-out; /* @kind other */
+  --ns-ease-in-out: ease-in-out; /* @kind other */
+  --ns-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
 
   /* ── Transitions (common shorthand) ──────────────────────── */
-  --ns-transition-fast: var(--ns-dur-fast) var(--ns-ease-out);  /* @kind other */
-  --ns-transition-base: var(--ns-dur-base) var(--ns-ease-out);  /* @kind other */
+  --ns-transition-fast: var(--ns-dur-fast) var(--ns-ease-out); /* @kind other */
+  --ns-transition-base: var(--ns-dur-base) var(--ns-ease-out); /* @kind other */
 }
 
 /* ── Keyframes ────────────────────────────────────────────────── */
 
 /* Character idle bob (with centered offset) */
 @keyframes ns-bob {
-  0%, 100% { transform: translateX(-50%) translateY(0); }
-  50%       { transform: translateX(-50%) translateY(-6px); }
+  0%,
+  100% {
+    transform: translateX(-50%) translateY(0);
+  }
+  50% {
+    transform: translateX(-50%) translateY(-6px);
+  }
 }
 
 /* Generic idle bob (no X offset) */
 @keyframes ns-bob-plain {
-  0%, 100% { transform: translateY(0); }
-  50%       { transform: translateY(-5px); }
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-5px);
+  }
 }
 
 /* Pixel text blink (e.g. "Press Start") */
 @keyframes ns-blink {
-  0%,  55% { opacity: 1; }
-  56%, 100% { opacity: 0; }
+  0%,
+  55% {
+    opacity: 1;
+  }
+  56%,
+  100% {
+    opacity: 0;
+  }
 }
 
 /* Star field twinkle */
 @keyframes ns-twinkle {
-  0%, 100% { opacity: 0.7; }
-  50%       { opacity: 0.35; }
+  0%,
+  100% {
+    opacity: 0.7;
+  }
+  50% {
+    opacity: 0.35;
+  }
 }
 
 /* Section arrow nudge */
 @keyframes ns-arrow {
-  0%, 100% { transform: translateX(-50%) translateY(0); }
-  50%       { transform: translateX(-50%) translateY(5px); }
+  0%,
+  100% {
+    transform: translateX(-50%) translateY(0);
+  }
+  50% {
+    transform: translateX(-50%) translateY(5px);
+  }
 }
 
 /* Live pulse dot */
 @keyframes ns-live {
-  0%   { box-shadow: 0 0 0 0   rgba(166, 226, 46, 0.7); }
-  70%  { box-shadow: 0 0 0 7px rgba(166, 226, 46, 0);   }
-  100% { box-shadow: 0 0 0 0   rgba(166, 226, 46, 0);   }
+  0% {
+    box-shadow: 0 0 0 0 rgba(166, 226, 46, 0.7);
+  }
+  70% {
+    box-shadow: 0 0 0 7px rgba(166, 226, 46, 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(166, 226, 46, 0);
+  }
 }
 
 /* Reduced motion: disable all ns animations */
 @media (prefers-reduced-motion: reduce) {
-  *, *::before, *::after {
+  *,
+  *::before,
+  *::after {
     animation: none !important;
     scroll-behavior: auto !important;
   }

package/dist/tokens/spacing.css

@@ -4,60 +4,60 @@
 
 :root {
   /* ── Base scale (4px grid, expressed in rem) ──────────────────── */
-  --ns-space-1:   0.25rem;   /* 4px  */
-  --ns-space-2:   0.5rem;    /* 8px  */
-  --ns-space-3:   0.75rem;   /* 12px */
-  --ns-space-4:   1rem;      /* 16px */
-  --ns-space-5:   1.25rem;   /* 20px */
-  --ns-space-6:   1.5rem;    /* 24px */
-  --ns-space-7:   1.75rem;   /* 28px */
-  --ns-space-8:   2rem;      /* 32px */
-  --ns-space-10:  2.5rem;    /* 40px */
-  --ns-space-12:  3rem;      /* 48px */
-  --ns-space-14:  3.5rem;    /* 56px */
-  --ns-space-16:  4rem;      /* 64px */
-  --ns-space-20:  5rem;      /* 80px */
-  --ns-space-24:  5.75rem;   /* 92px */
+  --ns-space-1: 0.25rem; /* 4px  */
+  --ns-space-2: 0.5rem; /* 8px  */
+  --ns-space-3: 0.75rem; /* 12px */
+  --ns-space-4: 1rem; /* 16px */
+  --ns-space-5: 1.25rem; /* 20px */
+  --ns-space-6: 1.5rem; /* 24px */
+  --ns-space-7: 1.75rem; /* 28px */
+  --ns-space-8: 2rem; /* 32px */
+  --ns-space-10: 2.5rem; /* 40px */
+  --ns-space-12: 3rem; /* 48px */
+  --ns-space-14: 3.5rem; /* 56px */
+  --ns-space-16: 4rem; /* 64px */
+  --ns-space-20: 5rem; /* 80px */
+  --ns-space-24: 5.75rem; /* 92px */
 
   /* ── Fluid layout tokens (viewport-responsive) ────────────────── */
-  --ns-fluid-container:       clamp(1rem, 4vw, 2rem);          /* @kind spacing */
-  --ns-fluid-section-top:     clamp(2.5rem, 8svh, 4rem);        /* @kind spacing */
-  --ns-fluid-section-bottom:  clamp(4rem, 10svh, 5.5rem);       /* @kind spacing */
-  --ns-fluid-gap-cards:       clamp(0.75rem, 2vw, 1.5rem);      /* @kind spacing */
-  --ns-fluid-card-pad:        clamp(1rem, 2vw, 1.25rem);         /* @kind spacing */
-  --ns-fluid-hero-gap:        clamp(1.5rem, 4vw, 3rem);          /* @kind spacing */
-  --ns-fluid-footer-gap:      clamp(2rem, 5vw, 3rem);            /* @kind spacing */
+  --ns-fluid-container: clamp(1rem, 4vw, 2rem); /* @kind spacing */
+  --ns-fluid-section-top: clamp(2.5rem, 8svh, 4rem); /* @kind spacing */
+  --ns-fluid-section-bottom: clamp(4rem, 10svh, 5.5rem); /* @kind spacing */
+  --ns-fluid-gap-cards: clamp(0.75rem, 2vw, 1.5rem); /* @kind spacing */
+  --ns-fluid-card-pad: clamp(1rem, 2vw, 1.25rem); /* @kind spacing */
+  --ns-fluid-hero-gap: clamp(1.5rem, 4vw, 3rem); /* @kind spacing */
+  --ns-fluid-footer-gap: clamp(2rem, 5vw, 3rem); /* @kind spacing */
 
   /* ── Fixed layout ─────────────────────────────────────────────── */
-  --ns-container:     1080px;
-  --ns-header-h:      4rem;    /* 64px — sticky header */
-  --ns-section-min:   calc(100svh - var(--ns-header-h));
+  --ns-container: 1080px;
+  --ns-header-h: 4rem; /* 64px — sticky header */
+  --ns-section-min: calc(100svh - var(--ns-header-h));
 
   /* ── Radii ────────────────────────────────────────────────────── */
-  --ns-radius-sm:     0.25rem;  /* 4px  */
-  --ns-radius-md:     0.5rem;   /* 8px  */
-  --ns-radius-lg:     0.625rem; /* 10px */
-  --ns-radius-xl:     0.75rem;  /* 12px */
-  --ns-radius-full:   9999px;
+  --ns-radius-sm: 0.25rem; /* 4px  */
+  --ns-radius-md: 0.5rem; /* 8px  */
+  --ns-radius-lg: 0.625rem; /* 10px */
+  --ns-radius-xl: 0.75rem; /* 12px */
+  --ns-radius-full: 9999px;
 
   /* ── Shadows ──────────────────────────────────────────────────── */
-  --ns-shadow-card-rest:  none;
+  --ns-shadow-card-rest: none;
   --ns-shadow-card-hover: 0 1rem 2.125rem rgba(0, 0, 0, 0.38);
-  --ns-shadow-modal:      0 1.5rem 3.5rem rgba(0, 0, 0, 0.5);
-  --ns-shadow-btn:        0 0.1875rem 0 var(--ns-gold-shadow);
-  --ns-shadow-arrow:      0 0 0 0.25rem rgba(230, 219, 116, 0.12), 0 0.75rem 1.75rem rgba(0, 0, 0, 0.36);
+  --ns-shadow-modal: 0 1.5rem 3.5rem rgba(0, 0, 0, 0.5);
+  --ns-shadow-btn: 0 0.1875rem 0 var(--ns-gold-shadow);
+  --ns-shadow-arrow: 0 0 0 0.25rem rgba(230, 219, 116, 0.12), 0 0.75rem 1.75rem rgba(0, 0, 0, 0.36);
 
   /* ── Borders ──────────────────────────────────────────────────── */
-  --ns-border-card:        1px solid var(--ns-line);
+  --ns-border-card: 1px solid var(--ns-line);
   --ns-border-card-strong: 1px solid var(--ns-line-strong);
-  --ns-border-gold:        2px solid var(--ns-gold-deep);
+  --ns-border-gold: 2px solid var(--ns-gold-deep);
 
   /* ── Blur ─────────────────────────────────────────────────────── */
-  --ns-blur-glass:  blur(8px);   /* @kind other */
-  --ns-blur-header: blur(12px);  /* @kind other */
+  --ns-blur-glass: blur(8px); /* @kind other */
+  --ns-blur-header: blur(12px); /* @kind other */
 
   /* ── Component sizing ──────────────────────────────────────────── */
-  --ns-icon-slot:    2.625rem; /* 42px */
+  --ns-icon-slot: 2.625rem; /* 42px */
   --ns-icon-slot-sm: 1.625rem; /* 26px */
-  --ns-arrow-size:   2.125rem; /* 34px */
+  --ns-arrow-size: 2.125rem; /* 34px */
 }

package/dist/tokens/typography.css

@@ -1,42 +1,42 @@
 /* NoobSociety — Typography tokens */
 :root {
   /* ── Font families ────────────────────────────────────────── */
-  --ns-font-body:  'Inter', system-ui, sans-serif;
+  --ns-font-body: 'Inter', system-ui, sans-serif;
   --ns-font-pixel: 'Press Start 2P', system-ui, sans-serif;
 
   /* ── Type scale ───────────────────────────────────────────── */
-  --ns-text-xs:   0.75rem;   /* 12px */
-  --ns-text-sm:   0.875rem;  /* 14px */
-  --ns-text-base: 1rem;      /* 16px */
-  --ns-text-lg:   1.125rem;  /* 18px */
-  --ns-text-xl:   1.25rem;   /* 20px */
-  --ns-text-2xl:  1.5rem;    /* 24px */
-  --ns-text-3xl:  1.875rem;  /* 30px */
-  --ns-text-4xl:  2.25rem;   /* 36px */
+  --ns-text-xs: 0.75rem; /* 12px */
+  --ns-text-sm: 0.875rem; /* 14px */
+  --ns-text-base: 1rem; /* 16px */
+  --ns-text-lg: 1.125rem; /* 18px */
+  --ns-text-xl: 1.25rem; /* 20px */
+  --ns-text-2xl: 1.5rem; /* 24px */
+  --ns-text-3xl: 1.875rem; /* 30px */
+  --ns-text-4xl: 2.25rem; /* 36px */
 
   /* ── Pixel font scale ─────────────────────────────────────── */
   --ns-pixel-2xs: 7px;
-  --ns-pixel-xs:  8px;
-  --ns-pixel-sm:  9px;
+  --ns-pixel-xs: 8px;
+  --ns-pixel-sm: 9px;
   --ns-pixel-base: 11px;
-  --ns-pixel-md:  12px;
-  --ns-pixel-lg:  13px;
-  --ns-pixel-xl:  1.6rem;    /* hero accent title */
+  --ns-pixel-md: 12px;
+  --ns-pixel-lg: 13px;
+  --ns-pixel-xl: 1.6rem; /* hero accent title */
   --ns-pixel-2xl: clamp(2rem, 1rem + 3vw, 3.5rem); /* @kind other */
   --ns-title-section: clamp(1.8rem, 1rem + 2vw, 2.4rem); /* @kind other */
 
   /* ── Line heights ─────────────────────────────────────────── */
-  --ns-leading-tight:  1.08;
-  --ns-leading-snug:   1.35;
+  --ns-leading-tight: 1.08;
+  --ns-leading-snug: 1.35;
   --ns-leading-normal: 1.45;
   --ns-leading-relaxed: 1.6;
-  --ns-leading-pixel:  1.5;  /* for Press Start 2P */
+  --ns-leading-pixel: 1.5; /* for Press Start 2P */
 
   /* ── Font weights ─────────────────────────────────────────── */
-  --ns-weight-normal:   400;
-  --ns-weight-medium:   500;
+  --ns-weight-normal: 400;
+  --ns-weight-medium: 500;
   --ns-weight-semibold: 600;
-  --ns-weight-bold:     700;
+  --ns-weight-bold: 700;
 
   /* ── Section eyebrow ─────────────────────────────────────────*/
   /* font: 700 13px/1 var(--ns-font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--ns-gold) */