layout tokens: all dimensions in 01-asw.css, 08-layout.css only uses var()

New tokens: --width-prose (65ch), --width-report (72ch), --container-padding,
--grid-gap, --grid-gap-tight. Layout layer no longer picks values —
edit 01-asw.css to change any layout dimension.

assets/css/layers/01-asw.css

@@ -150,30 +150,37 @@
   --space-6:  var(--size-7);    /* 2.00rem */
   --space-8:  var(--size-9);    /* 4.00rem */
 
-  /* ── Width tokens ───────────────────────────────────────────────── */
+  /* ── Layout tokens ────────────────────────────────────────────────── */
-
+  /* All layout decisions live here. 08-layout.css only uses var(--*).   */
-  --width-prose:   var(--size-content-3);  /* 60ch — Open Props reading width */
-  --width-content: var(--size-lg);         /* 1024px — Open Props content width */
-  --width-full:    var(--width-xl);        /* alias → --width-xl */
-
-  /* ── Layout breakpoints ──────────────────────────────────────────── */
-  /* These don't map exactly to Open Props --size-* — defined explicitly */
 
+  /* Container breakpoints (responsive max-widths for body > landmarks) */
   --width-sm:   510px;
   --width-md:   700px;
   --width-lg:   950px;
   --width-xl:  1200px;
   --width-2xl: 1450px;
 
-  /* ── Structural component dimensions ─────────────────────────────── */
+  /* Content widths */
+  --width-prose:     65ch;              /* reading-optimised line length */
+  --width-report:    72ch;              /* report/formal layout */
+  --width-content:   var(--size-lg);    /* 1024px — general content cap */
+  --width-full:      var(--width-xl);   /* full-width alias */
 
+  /* Container padding */
+  --container-padding: var(--space-4);  /* inline padding at small viewports */
+
+  /* Structural dimensions */
   --sidebar-width:       220px;         /* docs sidebar column */
   --toc-width:           200px;         /* docs TOC column */
-  --nav-height:           60px;         /* sticky nav offset for calc() */
+  --nav-height:           60px;         /* sticky nav offset */
   --docs-max-width:      1400px;        /* docs layout outer cap */
   --card-min-width:       280px;        /* card-grid minmax floor */
-  --tooltip-max-width:   var(--size-px-14);  /* 320px — tooltip overflow cap */
+  --tooltip-max-width:   var(--size-px-14);  /* 320px */
-  --scrollbar-size:      var(--border-size-3); /* 5px — thin webkit scrollbar thumb */
+  --scrollbar-size:      var(--border-size-3); /* 5px */
+
+  /* Grid gaps */
+  --grid-gap:            var(--space-5);  /* default grid gap */
+  --grid-gap-tight:      var(--space-4);  /* compact grid gap */
 
   /* ── Chart dimensions ────────────────────────────────────────────── */
 

assets/css/layers/08-layout.css

@@ -7,9 +7,9 @@
 /* ── Container ─────────────────────────────────────────────────────── */
 
 .container {
-  max-width: var(--container-width, var(--width-xl));
+  max-width: var(--width-content);
   margin-inline: auto;
-  padding-inline: var(--space-5);
+  padding-inline: var(--container-padding);
 }
 
 /* ── Body landmark container ────────────────────────────────────────── */
@@ -23,8 +23,8 @@ body > footer {
   width: 100%;
   margin-right: auto;
   margin-left: auto;
-  padding-right: var(--space-4);
+  padding-right: var(--container-padding);
-  padding-left: var(--space-4);
+  padding-left: var(--container-padding);
 }
 
 @media (--sm-n-above) {
@@ -406,25 +406,25 @@ nav[data-nav="toc"] ul li + li::before {
 [data-layout="grid-2"] {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
-  gap: var(--space-5);
+  gap: var(--grid-gap);
 }
 
 [data-layout="grid-3"] {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  gap: var(--space-5);
+  gap: var(--grid-gap);
 }
 
 [data-layout="card-grid"] {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(var(--card-min-width), 1fr));
-  gap: var(--space-5);
+  gap: var(--grid-gap);
 }
 
 [data-layout="stats"] {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--space-5);
+  gap: var(--grid-gap);
 }
 
 [data-layout="stats"] > * {
@@ -463,7 +463,7 @@ nav[data-nav="toc"] ul li + li::before {
 
 article[data-layout="prose"],
 [data-layout="prose"] {
-  max-width: 65ch;
+  max-width: var(--width-prose);
   margin-inline: auto;
 }
 
@@ -565,7 +565,7 @@ article[data-layout="prose"],
 [data-layout="report"] > header,
 [data-layout="report"] > article,
 [data-layout="report"] > footer {
-  max-width: 72ch;
+  max-width: var(--width-report);
   margin-inline: auto;
   padding-inline: var(--space-5);
 }