@24vlh/vds 0.1.1 → 0.1.3

package/dist/core.css

@@ -1 +1,866 @@
-:root{--font-family-sans:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,BlinkMacSystemFont,"Segoe UI",sans-serif;--font-family-mono:"JetBrains Mono","SF Mono",Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--text-xxxs:0.65rem;--text-xxs:0.75rem;--text-xs:0.8125rem;--text-sm:0.875rem;--text-base:1rem;--text-md:1.0625rem;--text-lg:1.125rem;--text-xl:1.25rem;--text-2xl:1.5rem;--text-3xl:1.875rem;--text-4xl:2.25rem;--text-5xl:3.25rem;--line-height-xs-tight:0.5;--line-height-tight:1.1;--line-height-xl-tight:1.2;--line-height-snug:1.25;--line-height-normal:1.5;--line-height-relaxed:1.7;--font-weight-regular:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--letter-tight:-0.015em;--letter-normal:0;--letter-loose:0.015em;--footnote-font-size:var(--text-xs);--space-0:0;--space-0_5:0.125rem;--space-1:0.25rem;--space-1_5:0.375rem;--space-2:0.5rem;--space-2_5:0.625rem;--space-3:0.75rem;--space-3_5:0.875rem;--space-4:1rem;--space-5:1.25rem;--space-5_5:1.3125rem;--space-6:1.5rem;--space-7:1.75rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-14:3.5rem;--space-16:4rem;--space-20:5rem;--space-24:6rem;--space-28:7rem;--space-32:8rem;--space-36:9rem;--space-40:10rem;--space-44:11rem;--space-48:12rem;--space-64:16rem;--section-spacing-xs:var(--space-6);--section-spacing-sm:var(--space-8);--section-spacing-md:var(--space-12);--section-spacing-lg:var(--space-16);--section-spacing-xl:var(--space-20);--gap-xs:var(--space-2);--gap-sm:var(--space-3);--gap-md:var(--space-6);--gap-lg:var(--space-8);--gap-xl:var(--space-12);--component-gap-xs:var(--space-2);--component-gap-sm:var(--space-3);--component-gap-md:var(--space-4);--component-gap-lg:var(--space-6);--component-gap-xl:var(--space-10);--radius-none:0;--radius-xs:2px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-xl:18px;--radius-full:999px;--radius-pill:9999px;--border-width:1px;--border-width-strong:3px;--tab-indicator-height:2px;--shadow-xs:0 1px 2px rgba(0,0,0,.05);--shadow-sm:0 1px 3px rgba(0,0,0,.1);--shadow-md:0 4px 6px rgba(0,0,0,.1);--shadow-lg:0 10px 15px rgba(0,0,0,.15);--shadow-xl:0 20px 25px rgba(0,0,0,.2);--layout-max-width:80rem;--content-width-sm:640px;--content-width-md:768px;--content-width-lg:1024px;--content-width-xl:1200px;--content-width-2xl:1440px;--sidebar-width-md:280px;--grid-min:16rem;--icon-xxs:1rem;--icon-xs:1.15rem;--icon-sm:1.25rem;--icon-md:1.35rem;--icon-lg:1.75rem;--icon-xl:2.25rem;--icon-container-sm:1.75rem;--icon-container-md:2.25rem;--icon-container-lg:3rem;--icon-container-xl:3.75rem;--icon-stroke-thin:1.25;--icon-stroke-regular:1.75;--icon-stroke-bold:2.25;--avatar-size-sm:var(--space-7);--avatar-size-md:var(--space-10);--avatar-size-lg:var(--space-16);--avatar-status-size:var(--space-2);--transition-fast:120ms ease-out;--transition-normal:180ms ease-out;--transition-slow:260ms ease-out;--ease-out:cubic-bezier(0.16,1,0.3,1);--ease-in:cubic-bezier(0.32,0,0.67,0);--ease-in-out:cubic-bezier(0.65,0,0.35,1);--motion-none:0ms;--z-negative:-1;--z-base:0;--z-header:10;--z-backdrop:80;--z-modal:90;--z-drawer:95;--z-toast:100;--z-tooltip:110;--z-sticky:40;--z-sticky-col:39;--focus-ring-width:2px;--focus-ring-offset:2px}a{--link-underline-thickness:2px}html{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:"kern" 1,"liga" 1,"clig" 1,"calt" 1;box-sizing:border-box;line-height:1.5;line-height:var(--line-height-normal)}*,:after,:before{box-sizing:inherit;min-width:0}*{-webkit-box-decoration-break:clone;box-decoration-break:clone;scrollbar-color:var(--color-border-subtle) transparent;scrollbar-width:thin}body{background:var(--color-bg);color:var(--color-text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,BlinkMacSystemFont;font-family:var(--font-family-sans),sans-serif;font-size:1rem;font-size:var(--text-base);margin:0;min-height:100vh;text-rendering:optimizeLegibility}canvas,img,picture,svg,video{display:block;max-width:100%}img{height:auto}button,input,select,textarea{color:inherit;font:inherit;margin:0}button{background:none;border:none;padding:0}[role=button],button,input[type=button],input[type=submit]{cursor:pointer}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=search]{-webkit-appearance:none;outline-offset:-2px}textarea{resize:vertical}input,select,textarea{line-height:inherit}fieldset{border:0;margin:0}fieldset,legend{padding:0}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,ol,p,ul{margin:0}h1,h2,h3,h4,h5,h6{color:inherit;padding:0}blockquote,figure,ol,p,ul{padding:0}ol,ul{padding-left:1.5rem;padding-left:var(--space-6)}ol ol,ol ul,ul ol,ul ul{margin:0;padding-left:1rem;padding-left:var(--space-4)}b,strong{font-weight:700;font-weight:var(--font-weight-bold)}hr{border:none;border-top:var(--border-width) solid var(--color-border-subtle);margin:1.5rem 0;margin:var(--space-6) 0}a{color:var(--link-text);-webkit-text-decoration:none;text-decoration:none;transition:color .18s ease-out;transition:color var(--transition-normal)}a:hover{-webkit-text-decoration-skip:ink;color:var(--link-text-hover);-webkit-text-decoration:underline;text-decoration:underline;text-decoration-skip-ink:auto;text-decoration-thickness:1px;text-decoration-thickness:var(--link-underline-thickness,1px)}a:active{color:var(--link-text-active)}table{border-collapse:collapse;width:100%}:focus{outline:2px solid var(--focus-ring-color);outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:2px;outline-offset:var(--focus-ring-offset)}:focus:not(:focus-visible){outline:none}:focus-visible{outline:2px solid var(--focus-ring-color);outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:2px;outline-offset:var(--focus-ring-offset)}::-moz-selection{background:var(--color-selection-bg);color:var(--color-selection-text)}::selection{background:var(--color-selection-bg);color:var(--color-selection-text)}@media (prefers-reduced-motion:reduce){:root{--transition-fast:var(--motion-none);--transition-normal:var(--motion-none);--transition-slow:var(--motion-none);--ease-out:linear;--ease-in:linear;--ease-in-out:linear}*{animation-duration:0ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:0ms!important}html{scroll-behavior:auto}}@media (forced-colors:active){*{forced-color-adjust:none}}body,html{width:100%}body{display:flex;flex-direction:column}main{flex:1 0 auto}footer{flex-shrink:0}code,pre{font-family:JetBrains Mono,SF Mono,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace,monospace;font-family:var(--font-family-mono),monospace;font-size:.875em}pre{background:var(--code-bg);border:1px solid var(--code-border);color:var(--color-text);overflow:auto;white-space:pre-wrap;word-break:break-word}code,pre{-moz-tab-size:4;-o-tab-size:4;tab-size:4}kbd,samp{font-family:JetBrains Mono,SF Mono,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace,monospace;font-family:var(--font-family-mono),monospace}#__next,#__nuxt,#app,#root,.app-root,[data-app-root],[data-spa-root],[qwik-root],app-root,astro-root,svelte-root{display:flex;flex-direction:column;min-height:100vh;width:100%}header.page-header{position:relative;width:100%;z-index:10;z-index:var(--z-header)}main.page-content{flex:1 0 auto;width:100%}footer.page-footer{position:relative;width:100%;z-index:0;z-index:var(--z-base)}.content-header{width:100%}.content-body{flex:1 1 auto;min-height:0;width:100%}.content-footer{flex-shrink:0;width:100%}.container{max-width:1200px;max-width:var(--content-width-xl)}.container,.container-wide{margin-left:auto;margin-right:auto;padding-left:1rem;padding-left:var(--space-4);padding-right:1rem;padding-right:var(--space-4);width:100%}.container-wide{max-width:1440px;max-width:var(--content-width-2xl)}.container-narrow{max-width:1024px;max-width:var(--content-width-lg)}.container-narrow,.container-tight{margin-left:auto;margin-right:auto;padding-left:1rem;padding-left:var(--space-4);padding-right:1rem;padding-right:var(--space-4);width:100%}.container-tight{max-width:768px;max-width:var(--content-width-md)}.container-relaxed{margin-left:auto;margin-right:auto;max-width:90ch;padding-left:1rem;padding-left:var(--space-4);padding-right:1rem;padding-right:var(--space-4);width:100%}@media (max-width:768px){.container,.container-narrow,.container-relaxed,.container-tight,.container-wide{padding-left:.75rem;padding-left:var(--space-3);padding-right:.75rem;padding-right:var(--space-3)}}.full-bleed{margin-left:0;margin-right:0;padding-left:0;padding-right:0;width:100%}.section-bleed{margin-left:-1rem;margin-left:calc(var(--space-4)*-1);margin-right:-1rem;margin-right:calc(var(--space-4)*-1)}@media (max-width:768px){.section-bleed{margin-left:-.75rem;margin-left:calc(var(--space-3)*-1);margin-right:-.75rem;margin-right:calc(var(--space-3)*-1)}}.section-none{padding-bottom:0;padding-top:0}.section-xs{padding-bottom:1.5rem;padding-bottom:var(--section-spacing-xs);padding-top:1.5rem;padding-top:var(--section-spacing-xs)}.section-sm{padding-bottom:2rem;padding-bottom:var(--section-spacing-sm);padding-top:2rem;padding-top:var(--section-spacing-sm)}.section{padding-bottom:3rem;padding-bottom:var(--section-spacing-md);padding-top:3rem;padding-top:var(--section-spacing-md)}.section-lg{padding-bottom:4rem;padding-bottom:var(--section-spacing-lg);padding-top:4rem;padding-top:var(--section-spacing-lg)}.section-xl{padding-bottom:5rem;padding-bottom:var(--section-spacing-xl);padding-top:5rem;padding-top:var(--section-spacing-xl)}.layout-grid-auto{grid-gap:2rem;grid-gap:var(--gap-lg);grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));grid-template-columns:repeat(auto-fit,minmax(var(--grid-min),1fr))}.layout-grid-2,.layout-grid-auto{display:grid;gap:2rem;gap:var(--gap-lg)}.layout-grid-2{grid-gap:2rem;grid-gap:var(--gap-lg);grid-template-columns:repeat(2,1fr)}.layout-grid-3{grid-gap:2rem;grid-gap:var(--gap-lg);grid-template-columns:repeat(3,1fr)}.layout-grid-3,.layout-grid-4{display:grid;gap:2rem;gap:var(--gap-lg)}.layout-grid-4{grid-gap:2rem;grid-gap:var(--gap-lg);grid-template-columns:repeat(4,1fr)}@media (max-width:768px){.layout-grid-2,.layout-grid-3,.layout-grid-4{grid-template-columns:1fr}}.sidebar-layout{grid-gap:2rem;grid-gap:var(--gap-lg);grid-template-columns:280px 1fr;grid-template-columns:var(--sidebar-width-md) 1fr}.sidebar-layout,.sidebar-layout-right{display:grid;gap:2rem;gap:var(--gap-lg)}.sidebar-layout-right{grid-gap:2rem;grid-gap:var(--gap-lg);grid-template-columns:1fr 280px;grid-template-columns:1fr var(--sidebar-width-md)}@media (max-width:1024px){.sidebar-layout,.sidebar-layout-right{grid-template-columns:1fr}}.split,.split-reverse{grid-gap:2rem;grid-gap:var(--gap-lg);display:grid;gap:2rem;gap:var(--gap-lg);grid-template-columns:1fr 1fr}.split-reverse>:first-child{order:2}.split-reverse>:last-child{order:1}@media (max-width:768px){.split,.split-reverse{grid-template-columns:1fr}}@media (min-width:769px){.split-reverse>*{order:0}}
+/************************************************************
+ * VLAH DESIGN SYSTEM (VDS) - Primitives Layer
+ *
+ *  Responsibilities:
+ *    - Define the neutral design tokens: typography, spacing,
+ *      radii, borders, shadows, layout widths, icons, motion,
+ *      easing, z-index, and accessibility foundations
+ *    - Provide the root variable system used by all themes,
+ *      components, utilities, and layout layers
+ *    - Establish consistent scales, ratios, and naming patterns
+ *      that remain invariant across themes and contexts
+ *
+ *  System Notes:
+ *    - Pure token layer; declares no rendering rules
+ *    - MUST load before base.css, layout.css, utilities, components, and all themes
+ *    - Breakpoints listed are reference-only and should be used
+ *      by higher layers via min-width media queries
+ ************************************************************/
+
+/* ---------------------------------------------------------
+   1. ROOT TOKEN ARCHITECTURE (Neutral Layer)
+--------------------------------------------------------- */
+
+:root {
+
+    /* -----------------------------------------------------
+       TYPOGRAPHY - Families, Scale, Line Heights, Weights
+    ----------------------------------------------------- */
+    --font-family-sans: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --font-family-mono: "JetBrains Mono", "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+
+    --text-xxxs: 0.65rem;
+    --text-xxs: 0.75rem;
+    --text-xs: 0.8125rem;
+    --text-sm: 0.875rem;
+    --text-base: 1rem;
+    --text-md: 1.0625rem;
+    --text-lg: 1.125rem;
+    --text-xl: 1.25rem;
+    --text-2xl: 1.5rem;
+    --text-3xl: 1.875rem;
+    --text-4xl: 2.25rem;
+    --text-5xl: 3.25rem;
+
+    --line-height-xs-tight: 0.5;
+    --line-height-tight: 1.1;
+    --line-height-xl-tight: 1.2;
+    --line-height-snug: 1.25;
+    --line-height-normal: 1.5;
+    --line-height-relaxed: 1.7;
+
+    --font-weight-regular: 400;
+    --font-weight-medium: 500;
+    --font-weight-semibold: 600;
+    --font-weight-bold: 700;
+
+    --letter-tight: -0.015em;
+    --letter-normal: 0;
+    --letter-loose: 0.015em;
+
+    --footnote-font-size: var(--text-xs);
+
+    /* -----------------------------------------------------
+       SPACING SYSTEM - Space, Gap, Padding, Component Rhythm
+    ----------------------------------------------------- */
+    --space-0: 0;
+    --space-0_5: 0.125rem;
+    --space-1: 0.25rem;
+    --space-1_5: 0.375rem;
+    --space-2: 0.5rem;
+    --space-2_5: 0.625rem;
+    --space-3: 0.75rem;
+    --space-3_5: 0.875rem;
+    --space-4: 1rem;
+    --space-5: 1.25rem;
+    --space-5_5: 1.3125rem;
+    --space-6: 1.5rem;
+    --space-7: 1.75rem;
+    --space-8: 2rem;
+    --space-10: 2.5rem;
+    --space-12: 3rem;
+    --space-14: 3.5rem;
+    --space-16: 4rem;
+    --space-20: 5rem;
+    --space-24: 6rem;
+    --space-28: 7rem;
+    --space-32: 8rem;
+    --space-36: 9rem;
+    --space-40: 10rem;
+    --space-44: 11rem;
+    --space-48: 12rem;
+    --space-64: 16rem;
+
+    --section-spacing-xs: var(--space-6);
+    --section-spacing-sm: var(--space-8);
+    --section-spacing-md: var(--space-12);
+    --section-spacing-lg: var(--space-16);
+    --section-spacing-xl: var(--space-20);
+
+    --gap-xs: var(--space-2);
+    --gap-sm: var(--space-3);
+    --gap-md: var(--space-6);
+    --gap-lg: var(--space-8);
+    --gap-xl: var(--space-12);
+
+    --component-gap-xs: var(--space-2);
+    --component-gap-sm: var(--space-3);
+    --component-gap-md: var(--space-4);
+    --component-gap-lg: var(--space-6);
+    --component-gap-xl: var(--space-10);
+
+    /* -----------------------------------------------------
+       RADII, BORDERS, SHADOWS
+    ----------------------------------------------------- */
+    --radius-none: 0;
+    --radius-xs: 2px;
+    --radius-sm: 4px;
+    --radius-md: 8px;
+    --radius-lg: 12px;
+    --radius-xl: 18px;
+    --radius-full: 999px;
+    --radius-pill: 9999px;
+
+    --border-width: 1px;
+    --border-width-strong: 3px;
+    --tab-indicator-height: 2px;
+
+    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
+    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
+    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
+    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.15);
+    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.2);
+
+    /* -----------------------------------------------------
+       LAYOUT - Widths, Containers, Structure
+    ----------------------------------------------------- */
+    --layout-max-width: 80rem;
+
+    --content-width-sm: 640px;
+    --content-width-md: 768px;
+    --content-width-lg: 1024px;
+    --content-width-xl: 1200px;
+    --content-width-2xl: 1440px;
+
+    --sidebar-width-md: 280px;
+
+    --grid-min: 16rem;
+
+    /* -----------------------------------------------------
+       ICONS & AVATARS
+    ----------------------------------------------------- */
+    --icon-xxs: 1rem;
+    --icon-xs: 1.15rem;
+    --icon-sm: 1.25rem;
+    --icon-md: 1.35rem;
+    --icon-lg: 1.75rem;
+    --icon-xl: 2.25rem;
+
+    --icon-container-sm: 1.75rem;
+    --icon-container-md: 2.25rem;
+    --icon-container-lg: 3rem;
+    --icon-container-xl: 3.75rem;
+
+    --icon-stroke-thin: 1.25;
+    --icon-stroke-regular: 1.75;
+    --icon-stroke-bold: 2.25;
+
+    --avatar-size-sm: var(--space-7);
+    --avatar-size-md: var(--space-10);
+    --avatar-size-lg: var(--space-16);
+    --avatar-status-size: var(--space-2);
+
+    /* -----------------------------------------------------
+       MOTION / TRANSITIONS / EASING
+    ----------------------------------------------------- */
+    --transition-fast: 120ms ease-out;
+    --transition-normal: 180ms ease-out;
+    --transition-slow: 260ms ease-out;
+
+    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+    --ease-in: cubic-bezier(0.32, 0, 0.67, 0);
+    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+
+    --motion-none: 0ms;
+
+    /* -----------------------------------------------------
+       Z-INDEX STACK
+    ----------------------------------------------------- */
+    --z-negative: -1;
+    --z-base: 0;
+    --z-header: 10;
+    --z-backdrop: 80;
+    --z-modal: 90;
+    --z-drawer: 95;
+    --z-toast: 100;
+    --z-tooltip: 110;
+
+    --z-sticky: 40;
+    --z-sticky-col: 39;
+
+    /* -----------------------------------------------------
+       ACCESSIBILITY / FOCUS / SELECTION
+    ----------------------------------------------------- */
+    --focus-ring-width: 2px;
+    --focus-ring-offset: 2px;
+}
+
+/************************************************************
+ * VLAH DESIGN SYSTEM (VDS) - Base Layer
+ *
+ *  Responsibilities:
+ *    - Set global primitives: type scale, spacing, radii, motion,
+ *      layout widths, and z-index hierarchy
+ *    - Apply a modern reset / normalize across all HTML elements
+ *    - Define structural layout primitives (page flex root, body flex)
+ *    - Provide default link, list, table, and code behaviours
+ *      consumed by all other VDS layers
+ *
+ *  System Notes:
+ *    - Pure CSS: no JS assumptions or behavioural dependencies
+ *    - Typography, layout utilities, and component styles live in
+ *      their own modules and layer on top of this
+ *    - Base must load before themes and before any component CSS
+ ************************************************************/
+
+/* ---------------------------------------------------------
+   1. BASE TOKEN DEFINITIONS
+--------------------------------------------------------- */
+
+a {
+    --link-underline-thickness: 2px;
+}
+
+/* ---------------------------------------------------------
+   2. MODERN RESET / NORMALIZE
+--------------------------------------------------------- */
+
+html {
+    box-sizing: border-box;
+    line-height: 1.5;
+    line-height: var(--line-height-normal);
+    -webkit-text-size-adjust: 100%;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-feature-settings: "kern" 1, "liga" 1, "clig" 1, "calt" 1;
+}
+
+*, *::before, *::after {
+    box-sizing: inherit;
+    min-width: 0;
+}
+
+* {
+    scrollbar-width: thin;
+    scrollbar-color: var(--color-border-subtle) transparent;
+    -webkit-box-decoration-break: clone;
+            box-decoration-break: clone;
+}
+
+body {
+    margin: 0;
+    min-height: 100vh;
+    background: var(--color-bg);
+    color: var(--color-text);
+    font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, "Segoe UI", sans-serif, sans-serif;
+    font-family: var(--font-family-sans), sans-serif;
+    font-size: 1rem;
+    font-size: var(--text-base);
+    text-rendering: optimizeLegibility;
+}
+
+img,
+picture,
+video,
+canvas,
+svg {
+    display: block;
+    max-width: 100%;
+}
+
+img {
+    height: auto;
+}
+
+button,
+input,
+textarea,
+select {
+    font: inherit;
+    color: inherit;
+    margin: 0;
+}
+
+button {
+    border: none;
+    background: none;
+    padding: 0;
+}
+
+button,
+[role="button"],
+input[type="submit"],
+input[type="button"] {
+    cursor: pointer;
+}
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+
+input[type="search"] {
+    -webkit-appearance: none;
+    outline-offset: -2px;
+}
+
+textarea {
+    resize: vertical;
+}
+
+input,
+select,
+textarea {
+    line-height: inherit;
+}
+
+fieldset {
+    border: 0;
+    margin: 0;
+    padding: 0;
+}
+
+legend {
+    padding: 0;
+}
+
+h1, h2, h3, h4, h5, h6,
+p,
+ul, ol,
+figure,
+blockquote,
+dl, dd {
+    margin: 0;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    padding: 0;
+    color: inherit;
+}
+
+p,
+ul, ol,
+figure,
+blockquote {
+    padding: 0;
+}
+
+ul, ol {
+    padding-left: 1.5rem;
+    padding-left: var(--space-6);
+}
+
+ul ul,
+ul ol,
+ol ul,
+ol ol {
+    margin: 0;
+    padding-left: 1rem;
+    padding-left: var(--space-4);
+}
+
+b,
+strong {
+    font-weight: 700;
+    font-weight: var(--font-weight-bold);
+}
+
+hr {
+    margin: 1.5rem 0;
+    margin: var(--space-6) 0;
+    border: none;
+    border-top: 1px solid var(--color-border-subtle);
+    border-top: var(--border-width) solid var(--color-border-subtle);
+}
+
+a {
+    color: var(--link-text);
+    -webkit-text-decoration: none;
+    text-decoration: none;
+    transition: color 180ms ease-out;
+    transition: color var(--transition-normal);
+}
+
+a:hover {
+    color: var(--link-text-hover);
+    -webkit-text-decoration: underline;
+    text-decoration: underline;
+    -webkit-text-decoration-skip: ink;
+            text-decoration-skip-ink: auto;
+    text-decoration-thickness: 1px;
+    text-decoration-thickness: var(--link-underline-thickness, 1px);
+}
+
+a:active {
+    color: var(--link-text-active);
+}
+
+table {
+    border-collapse: collapse;
+    width: 100%;
+}
+
+:focus {
+    outline: 2px solid var(--focus-ring-color);
+    outline: var(--focus-ring-width) solid var(--focus-ring-color);
+    outline-offset: 2px;
+    outline-offset: var(--focus-ring-offset);
+}
+
+:focus:not(:focus-visible) {
+    outline: none;
+}
+
+:focus-visible {
+    outline: 2px solid var(--focus-ring-color);
+    outline: var(--focus-ring-width) solid var(--focus-ring-color);
+    outline-offset: 2px;
+    outline-offset: var(--focus-ring-offset);
+}
+
+::-moz-selection {
+    background: var(--color-selection-bg);
+    color: var(--color-selection-text);
+}
+
+::selection {
+    background: var(--color-selection-bg);
+    color: var(--color-selection-text);
+}
+
+@media (prefers-reduced-motion: reduce) {
+    :root {
+        --transition-fast: var(--motion-none);
+        --transition-normal: var(--motion-none);
+        --transition-slow: var(--motion-none);
+
+        --ease-out: linear;
+        --ease-in: linear;
+        --ease-in-out: linear;
+    }
+
+    * {
+        animation-duration: 0ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0ms !important;
+        scroll-behavior: auto !important;
+    }
+
+    html {
+        scroll-behavior: auto;
+    }
+}
+
+@media (forced-colors: active) {
+    * {
+        forced-color-adjust: none;
+    }
+}
+
+/* ---------------------------------------------------------
+   3. GLOBAL STRUCTURE
+--------------------------------------------------------- */
+
+html,
+body {
+    width: 100%;
+}
+
+body {
+    display: flex;
+    flex-direction: column;
+}
+
+main {
+    flex: 1 0 auto;
+}
+
+footer {
+    flex-shrink: 0;
+}
+
+/* ---------------------------------------------------------
+   4. CODE STYLES
+--------------------------------------------------------- */
+
+code {
+    font-family: "JetBrains Mono", "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace, monospace;
+    font-family: var(--font-family-mono), monospace;
+    font-size: 0.875em;
+}
+
+pre {
+    font-family: "JetBrains Mono", "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace, monospace;
+    font-family: var(--font-family-mono), monospace;
+    font-size: 0.875em;
+    background: var(--code-bg);
+    color: var(--color-text);
+    border: 1px solid var(--code-border);
+    overflow: auto;
+    white-space: pre-wrap;
+    word-break: break-word;
+}
+
+pre, code {
+    -moz-tab-size: 4;
+      -o-tab-size: 4;
+         tab-size: 4;
+}
+
+kbd,
+samp {
+    font-family: "JetBrains Mono", "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace, monospace;
+    font-family: var(--font-family-mono), monospace;
+}
+
+#root, /* React, Vite */
+#app, /* Vue, Svelte, Solid */
+#__next, /* Next.js */
+#__nuxt, /* Nuxt */
+app-root, /* Angular */
+svelte-root, /* Some Svelte starter kits */
+astro-root, /* Astro hybrid apps */
+[qwik-root], /* Qwik */
+.app-root, /* Generic container */
+[data-app-root], /* Custom micro-frontend root */
+[data-spa-root] /* Universal custom attribute */
+{
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+    width: 100%;
+}
+
+/************************************************************
+ * VLAH DESIGN SYSTEM (VDS) - Layout Layer
+ *
+ *  Responsibilities:
+ *    - Provide the global page-frame architecture (header, content, footer)
+ *    - Define reusable interior content regions for any block or module
+ *    - Implement the container system (narrow, normal, wide, tight, relaxed)
+ *    - Establish the page section vertical rhythm (XS–XL)
+ *    - Supply structural grid layouts (auto-fit, 2/3/4 column)
+ *    - Define high-level layouts: sidebar, right-sidebar, split, split-reverse
+ *
+ *  System Notes:
+ *    - 100% token-driven: widths, gaps, section spacing, sidebar widths
+ *    - Pure CSS; no JS positioning, no behavioural dependencies
+ *    - Intended to sit above base.css and before content-blocks/components
+ *    - Low-level spacing/flex utilities live in utilities.css, not here
+ ************************************************************/
+
+/* ---------------------------------------------------------
+   1. PAGE FRAME SYSTEM  (single-instance)
+--------------------------------------------------------- */
+
+header.page-header {
+    width: 100%;
+    position: relative;
+    z-index: 10;
+    z-index: var(--z-header);
+}
+
+main.page-content {
+    width: 100%;
+    flex: 1 0 auto;
+}
+
+footer.page-footer {
+    width: 100%;
+    position: relative;
+    z-index: 0;
+    z-index: var(--z-base);
+}
+
+/* ---------------------------------------------------------
+   2. CONTENT REGIONS (multi-instance, reusable)
+--------------------------------------------------------- */
+
+.content-header {
+    width: 100%;
+}
+
+.content-body {
+    width: 100%;
+    flex: 1 1 auto;
+    min-height: 0;
+}
+
+.content-footer {
+    width: 100%;
+    flex-shrink: 0;
+}
+
+/* ---------------------------------------------------------
+   3. CONTAINER SYSTEM
+--------------------------------------------------------- */
+
+.container {
+    width: 100%;
+    max-width: 1200px;
+    max-width: var(--content-width-xl);
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    padding-left: var(--space-4);
+    padding-right: var(--space-4);
+}
+
+.container-wide {
+    width: 100%;
+    max-width: 1440px;
+    max-width: var(--content-width-2xl);
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    padding-left: var(--space-4);
+    padding-right: var(--space-4);
+}
+
+.container-narrow {
+    width: 100%;
+    max-width: 1024px;
+    max-width: var(--content-width-lg);
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    padding-left: var(--space-4);
+    padding-right: var(--space-4);
+}
+
+.container-tight {
+    width: 100%;
+    max-width: 768px;
+    max-width: var(--content-width-md);
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    padding-left: var(--space-4);
+    padding-right: var(--space-4);
+}
+
+.container-relaxed {
+    width: 100%;
+    max-width: 90ch;
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    padding-left: var(--space-4);
+    padding-right: var(--space-4);
+}
+
+@media (max-width: 768px) {
+    .container,
+    .container-wide,
+    .container-narrow,
+    .container-tight,
+    .container-relaxed {
+        padding-left: 0.75rem;
+        padding-right: 0.75rem;
+        padding-left: var(--space-3);
+        padding-right: var(--space-3);
+    }
+}
+
+.full-bleed {
+    width: 100%;
+    margin-left: 0;
+    margin-right: 0;
+    padding-left: 0;
+    padding-right: 0;
+}
+
+.section-bleed {
+    margin-left: calc(-1 * 1rem);
+    margin-right: calc(-1 * 1rem);
+    margin-left: calc(-1 * var(--space-4));
+    margin-right: calc(-1 * var(--space-4));
+}
+
+@media (max-width: 768px) {
+    .section-bleed {
+        margin-left: calc(-1 * 0.75rem);
+        margin-right: calc(-1 * 0.75rem);
+        margin-left: calc(-1 * var(--space-3));
+        margin-right: calc(-1 * var(--space-3));
+    }
+}
+
+/* ---------------------------------------------------------
+   4. SECTION SPACING (vertical rhythm)
+--------------------------------------------------------- */
+
+.section-none {
+    padding-top: 0;
+    padding-bottom: 0;
+}
+
+.section-xs {
+    padding-top: 1.5rem;
+    padding-bottom: 1.5rem;
+    padding-top: var(--section-spacing-xs);
+    padding-bottom: var(--section-spacing-xs);
+}
+
+.section-sm {
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+    padding-top: var(--section-spacing-sm);
+    padding-bottom: var(--section-spacing-sm);
+}
+
+.section {
+    padding-top: 3rem;
+    padding-bottom: 3rem;
+    padding-top: var(--section-spacing-md);
+    padding-bottom: var(--section-spacing-md);
+}
+
+.section-lg {
+    padding-top: 4rem;
+    padding-bottom: 4rem;
+    padding-top: var(--section-spacing-lg);
+    padding-bottom: var(--section-spacing-lg);
+}
+
+.section-xl {
+    padding-top: 5rem;
+    padding-bottom: 5rem;
+    padding-top: var(--section-spacing-xl);
+    padding-bottom: var(--section-spacing-xl);
+}
+
+/* ---------------------------------------------------------
+   5. STRUCTURAL GRID LAYOUTS
+--------------------------------------------------------- */
+
+.layout-grid-auto {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(var(--grid-min), 1fr));
+    grid-gap: 2rem;
+    grid-gap: var(--gap-lg);
+    gap: 2rem;
+    gap: var(--gap-lg);
+}
+
+.layout-grid-2 {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-gap: 2rem;
+    grid-gap: var(--gap-lg);
+    gap: 2rem;
+    gap: var(--gap-lg);
+}
+
+.layout-grid-3 {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: 2rem;
+    grid-gap: var(--gap-lg);
+    gap: 2rem;
+    gap: var(--gap-lg);
+}
+
+.layout-grid-4 {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-gap: 2rem;
+    grid-gap: var(--gap-lg);
+    gap: 2rem;
+    gap: var(--gap-lg);
+}
+
+@media (max-width: 768px) {
+    .layout-grid-2,
+    .layout-grid-3,
+    .layout-grid-4 {
+        grid-template-columns: 1fr;
+    }
+}
+
+/* ---------------------------------------------------------
+   6. HIGH-LEVEL SEMANTIC LAYOUTS
+--------------------------------------------------------- */
+
+.sidebar-layout {
+    display: grid;
+    grid-template-columns: 280px 1fr;
+    grid-template-columns: var(--sidebar-width-md) 1fr;
+    grid-gap: 2rem;
+    grid-gap: var(--gap-lg);
+    gap: 2rem;
+    gap: var(--gap-lg);
+}
+
+.sidebar-layout-right {
+    display: grid;
+    grid-template-columns: 1fr 280px;
+    grid-template-columns: 1fr var(--sidebar-width-md);
+    grid-gap: 2rem;
+    grid-gap: var(--gap-lg);
+    gap: 2rem;
+    gap: var(--gap-lg);
+}
+
+@media (max-width: 1024px) {
+    .sidebar-layout,
+    .sidebar-layout-right {
+        grid-template-columns: 1fr;
+    }
+}
+
+.split {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: 2rem;
+    grid-gap: var(--gap-lg);
+    gap: 2rem;
+    gap: var(--gap-lg);
+}
+
+.split-reverse {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: 2rem;
+    grid-gap: var(--gap-lg);
+    gap: 2rem;
+    gap: var(--gap-lg);
+}
+
+.split-reverse > *:first-child {
+    order: 2;
+}
+
+.split-reverse > *:last-child {
+    order: 1;
+}
+
+@media (max-width: 768px) {
+    .split,
+    .split-reverse {
+        grid-template-columns: 1fr;
+    }
+}
+
+@media (min-width: 769px) {
+    .split-reverse > * {
+        order: initial;
+    }
+}