@letsprogram/ng-oat 0.1.4 → 0.1.5

package/assets/oat/oat.css

@@ -28,6 +28,10 @@
     -webkit-font-smoothing: antialiased;
   }
 
+  main {
+    padding-block-start: var(--space-8);
+  }
+
   img, picture, video, canvas, svg {
     max-width: 100%;
   }
@@ -38,7 +42,9 @@
 
   h1, h2, h3, h4, h5, h6 {
     font-weight: var(--font-semibold);
-    line-height: 1.25;
+    line-height: var(--leading-tight);
+    text-wrap: balance;
+    letter-spacing: var(--tracking-tight);
 
     &:first-child {
       margin-block-start: 0;
@@ -76,6 +82,9 @@
   }
 
   p {
+    font-size: var(--text-regular);
+    line-height: var(--leading-normal);
+    text-wrap: pretty;
     margin-block-end: var(--space-4);
 
     &:last-child {
@@ -179,6 +188,96 @@
     opacity: 0.5;
     cursor: not-allowed;
   }
+
+  /* ── Prose — long-form rich-text content ───────────────────────────── */
+  .prose {
+    --prose-body: var(--foreground);
+    --prose-heading: var(--foreground);
+    --prose-muted: var(--muted-foreground);
+    --prose-link: var(--primary);
+
+    font-size: var(--text-regular);
+    line-height: var(--leading-relaxed);
+    color: var(--prose-body);
+    max-width: 65ch;
+
+    > * + * {
+      margin-block-start: var(--space-5);
+    }
+
+    h1, h2, h3, h4, h5, h6 {
+      color: var(--prose-heading);
+      letter-spacing: var(--tracking-tight);
+    }
+
+    h1 { margin-block-start: 0; }
+    h2 { margin-block-start: var(--space-10); }
+    h3 { margin-block-start: var(--space-8); }
+    h4, h5, h6 { margin-block-start: var(--space-6); }
+
+    a {
+      color: var(--prose-link);
+      text-decoration-color: rgb(from var(--prose-link) r g b / 0.4);
+      text-underline-offset: 3px;
+      transition: text-decoration-color var(--transition-fast);
+
+      &:hover {
+        text-decoration-color: currentColor;
+      }
+    }
+
+    p {
+      text-wrap: pretty;
+    }
+
+    :is(ul, ol) {
+      padding-inline-start: var(--space-6);
+    }
+
+    li {
+      margin-block-end: var(--space-2);
+    }
+
+    blockquote {
+      border-inline-start: 3px solid var(--border);
+      padding-inline-start: var(--space-5);
+      color: var(--prose-muted);
+      font-style: italic;
+    }
+
+    img, video {
+      border-radius: var(--radius-medium);
+    }
+
+    code {
+      font-size: 0.875em;
+    }
+
+    pre {
+      font-size: var(--text-7);
+      line-height: var(--leading-relaxed);
+    }
+
+    hr {
+      margin-block: var(--space-8);
+    }
+
+    table {
+      font-size: var(--text-7);
+    }
+
+    figcaption {
+      text-align: center;
+      font-size: var(--text-7);
+      color: var(--prose-muted);
+      margin-block-start: var(--space-2);
+    }
+  }
+
+  /* Prose width variants */
+  .prose-sm { max-width: 45ch; font-size: var(--text-7); }
+  .prose-lg { max-width: 75ch; }
+  .prose-full { max-width: none; }
 }
 @layer theme {
   :root {
@@ -207,46 +306,70 @@
     --input: light-dark(#d4d4d8, #52525b);
     --ring: light-dark(#574747, #d4d4d8);
 
-    /* ==================== */
+    /* ── Breakpoints ──────────────────────────────────────────────────────── */
+    --breakpoint-sm: 640px;
+    --breakpoint-md: 768px;
+    --breakpoint-lg: 1024px;
+    --breakpoint-xl: 1280px;
+
+    /* ── Spacing (fluid) ─────────────────────────────────────────────────── */
     --space-1: 0.25rem;
     --space-2: 0.5rem;
-    --space-3: 0.75rem;
-    --space-4: 1rem;
-    --space-5: 1.25rem;
-    --space-6: 1.5rem;
-    --space-8: 2rem;
-    --space-10: 2.5rem;
+    --space-3:  clamp(0.5rem,  1.5vw, 0.75rem);
+    --space-4:  clamp(0.5rem,  2vw,   1rem);
+    --space-5:  clamp(0.75rem, 2.5vw, 1.25rem);
+    --space-6:  clamp(0.75rem, 3vw,   1.5rem);
+    --space-8:  clamp(1rem,    4vw,   2rem);
+    --space-10: clamp(1.5rem,  5vw,   2.5rem);
     --space-12: 3rem;
     --space-14: 3.5rem;
     --space-16: 4rem;
     --space-18: 4.5rem;
 
+    /* ── Border radius (fluid) ───────────────────────────────────────────── */
     --radius-small: 0.125rem;
-    --radius-medium: 0.375rem;
-    --radius-large: 0.75rem;
+    --radius-medium: clamp(0.25rem, 0.8vw, 0.375rem);
+    --radius-large:  clamp(0.5rem,  1.5vw, 0.75rem);
     --radius-full: 9999px;
 
     --bar-height: 0.5rem;
 
+    /* ── Fonts ────────────────────────────────────────────────────────────── */
     --font-sans: system-ui, sans-serif;
     --font-mono: ui-monospace, Consolas, monospace;
 
+    /* ── Typography (fluid clamp) ────────────────────────────────────────── */
     --text-1: clamp(1.75rem, 1.5rem + 1.1vw, 2.25rem);
     --text-2: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);
     --text-3: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
     --text-4: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
-    --text-5: 1.125rem;
+    --text-5: clamp(1rem, 1rem + 0.3vw, 1.125rem);
     --text-6: 1rem;
-    --text-7: 0.875rem;
-    --text-8: 0.75rem;
-    --text-regular: var(--text-6);
-
-    --leading-normal: 1.5;
-
+    --text-7: clamp(0.8125rem, 0.8rem + 0.2vw, 0.875rem);
+    --text-8: clamp(0.6875rem, 0.65rem + 0.2vw, 0.75rem);
+    --text-regular: clamp(1rem, 1rem + 0.15vw, 1.125rem);
+
+    /* ── Line-height ─────────────────────────────────────────────────────── */
+    --leading-none: 1;
+    --leading-tight: 1.25;
+    --leading-snug: 1.375;
+    --leading-normal: clamp(1.5, 1.45 + 0.3vw, 1.6);
+    --leading-relaxed: 1.625;
+    --leading-loose: 2;
+
+    /* ── Letter-spacing ──────────────────────────────────────────────────── */
+    --tracking-tighter: -0.05em;
+    --tracking-tight: -0.025em;
+    --tracking-normal: 0em;
+    --tracking-wide: 0.025em;
+    --tracking-wider: 0.05em;
+    --tracking-widest: 0.1em;
+
+    /* ── Font weight ─────────────────────────────────────────────────────── */
     --font-normal: 400;
     --font-medium: 500;
     --font-semibold: 600;
-    --font-bold: 600;
+    --font-bold: 700;
 
     --shadow-small: 0 1px 2px 0 rgb(0 0 0 / 0.05);
     --shadow-medium: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
@@ -318,149 +441,6 @@
     }
   }
 }
-@layer base {
-  :is(button, [type=submit], [type=reset], [type=button], a.button), ::file-selector-button {
-    --_hov: color-mix(in srgb, var(--primary), white 25%);
-
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--space-2);
-    padding: var(--space-2) var(--space-4);
-    font-size: var(--text-7);
-    font-weight: var(--font-medium);
-    line-height: var(--leading-normal);
-    white-space: nowrap;
-    text-decoration: none;
-    background-color: var(--primary);
-    color: var(--primary-foreground);
-    border-radius: var(--radius-medium);
-    border: 1px solid;
-    border-color: rgb(from #fff r g b / 0.15) rgb(from #000 r g b / 0.2) rgb(from #000 r g b / 0.2) rgb(from #fff r g b / 0.15);
-    transition: background-color var(--transition-fast), opacity var(--transition-fast), transform var(--transition-fast);
-
-    &:not(:disabled) {
-      cursor: pointer;
-    }
-
-    &:hover:not(:disabled) {
-      background-color: var(--_hov);
-    }
-
-    &:active:not(:disabled) {
-      transform: translate(1px, 1px);
-    }
-
-    &[data-variant="secondary"] {
-      --_hov: color-mix(in srgb, var(--secondary), black 10%);
-      background-color: var(--secondary);
-      color: var(--secondary-foreground);
-      border-color: rgb(from #fff r g b / 0.5) rgb(from #000 r g b / 0.1) rgb(from #000 r g b / 0.1) rgb(from #fff r g b / 0.5);
-    }
-
-    &[data-variant="danger"] {
-      --_hov: color-mix(in srgb, var(--danger), black 15%);
-      background-color: var(--danger);
-      color: var(--danger-foreground);
-    }
-
-    &:is(.outline, .ghost) {
-      --_hov: var(--accent);
-      background-color: transparent;
-      color: var(--foreground);
-
-      &[data-variant="danger"] {
-        --_hov: color-mix(in srgb, var(--danger), transparent 90%);
-        color: var(--danger);
-      }
-
-      &[data-variant="secondary"] {
-        --_hov: color-mix(in srgb, var(--secondary), transparent 80%);
-        color: var(--secondary-foreground);
-      }
-    }
-
-    &.outline {
-      border-color: var(--border);
-
-      &[data-variant="danger"] {
-        border-color: var(--danger);
-      }
-
-      &[data-variant="secondary"] {
-        border-color: var(--secondary);
-      }
-    }
-
-    &.ghost {
-      /* Same as .outline but no border. */
-      border-color: transparent;
-    }
-
-    &.small {
-      padding: var(--space-1) var(--space-3);
-      font-size: var(--text-8);
-    }
-
-    &.large {
-      height: 3rem;
-      padding: 0 var(--space-6);
-      font-size: var(--text-regular);
-    }
-
-    &.icon {
-      width: 2.5rem;
-      padding: 0;
-
-      &.small {
-        width: 2rem;
-      }
-
-      &.large {
-        width: 3rem;
-      }
-    }
-  }
-
-  ::file-selector-button {
-    background-color: transparent;
-    color: var(--foreground);
-    border: 1px solid var(--border);
-  }
-  ::file-selector-button:hover {
-    /* pseudoelement:hover can't be nested and has to be a separate block. */
-    background-color: var(--accent);
-  }
-}
-
-@layer components {
-  menu.buttons {
-    list-style-type: none;
-    padding-inline-start: 0;
-    display: inline-flex;
-
-    /* In menu.buttons, <li> children are expected to have just one child, which is a button/or a.button */
-    & > li {
-      &:first-child > * {
-        border-start-start-radius: var(--radius-medium);
-        border-end-start-radius: var(--radius-medium);
-      }
-
-      &:last-child > * {
-        border-start-end-radius: var(--radius-medium);
-        border-end-end-radius: var(--radius-medium);
-      }
-
-      & > * {
-        border-radius: 0;
-      }
-
-      &:not(:last-child) > * {
-        border-inline-end: 1px solid rgb(from var(--primary-foreground) r g b / 0.2);
-      }
-    }
-  }
-}
 @layer base {
   label {
     display: block;
@@ -664,7 +644,7 @@
     & > :is(input, textarea, select) {
       flex: 1;
       margin-block-start: 0;
-
+     
       &:not(:focus) {
         border-inline-end-color: transparent;
       }
@@ -675,7 +655,7 @@
       &:first-child {
         border-radius: var(--radius-medium) 0 0 var(--radius-medium);
       }
-
+      
       &:last-child {
         border-radius: 0 var(--radius-medium) var(--radius-medium) 0;
       }
@@ -719,240 +699,145 @@
   }
 }
 @layer base {
-  /* Container to get horizontal scroll on small screens. */
-  .table {
-    min-width: 320px;
-    width: 100%;
-    overflow-x: auto;
-  }
+  :is(button, [type=submit], [type=reset], [type=button], a.button), ::file-selector-button {
+    --_hov: color-mix(in srgb, var(--primary), white 25%);
 
-  table {
-    border-collapse: collapse;
-    width: 100%;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-2);
+    padding: var(--space-2) var(--space-4);
     font-size: var(--text-7);
-  }
-
-  thead {
-    border-bottom: 1px solid var(--border);
-  }
-
-  th, td {
-    overflow-wrap: break-word;
-  }
-
-  th {
-    padding: var(--space-3) var(--space-2);
-    text-align: start;
     font-weight: var(--font-medium);
-    color: var(--muted-foreground);
-  }
-
-  td {
-    padding: var(--space-3) var(--space-2);
-  }
+    line-height: var(--leading-normal);
+    white-space: nowrap;
+    text-decoration: none;
+    background-color: var(--primary);
+    color: var(--primary-foreground);
+    border-radius: var(--radius-medium);
+    border: 1px solid;
+    border-color: rgb(from #fff r g b / 0.15) rgb(from #000 r g b / 0.2) rgb(from #000 r g b / 0.2) rgb(from #fff r g b / 0.15);
+    transition: background-color var(--transition-fast), opacity var(--transition-fast), transform var(--transition-fast);
 
-  tbody tr {
-    border-bottom: 1px solid var(--border);
-    transition: background-color var(--transition-fast);
+    &:not(:disabled) {
+      cursor: pointer;
+    }
 
-    &:last-child {
-      border-bottom: none;
+    &:hover:not(:disabled) {
+      background-color: var(--_hov);
     }
 
-    &:hover {
-      background-color: rgb(from var(--muted) r g b / 0.5);
-    }
-  }
-}
-@layer base {
-  progress {
-    appearance: none;
-    width: 100%;
-    height: var(--bar-height);
-    border: none;
-    border-radius: var(--radius-full);
-    overflow: hidden;
-    background-color: var(--muted);
-
-    &::-webkit-progress-bar {
-      background-color: var(--muted);
-      border-radius: var(--radius-full);
-    }
-
-    &::-webkit-progress-value {
-      background-color: var(--primary);
-      border-radius: var(--radius-full);
-      transition: width var(--transition);
+    &:active:not(:disabled) {
+      transform: translate(1px, 1px);
     }
 
-    &::-moz-progress-bar {
-      background-color: var(--primary);
-      border-radius: var(--radius-full);
+    &[data-variant="secondary"] {
+      --_hov: color-mix(in srgb, var(--secondary), black 10%);
+      background-color: var(--secondary);
+      color: var(--secondary-foreground);
+      border-color: rgb(from #fff r g b / 0.5) rgb(from #000 r g b / 0.1) rgb(from #000 r g b / 0.1) rgb(from #fff r g b / 0.5);
     }
-  }
-
-  meter {
-    appearance: none;
-    width: 100%;
-    height: var(--bar-height);
-    border: none;
-    border-radius: var(--radius-full);
-    overflow: hidden;
-    background: var(--muted);
 
-    &::-webkit-meter-bar {
-      background: var(--muted);
-      border: none;
-      border-radius: var(--radius-full);
-      height: var(--bar-height);
+    &[data-variant="danger"] {
+      --_hov: color-mix(in srgb, var(--danger), black 15%);
+      background-color: var(--danger);
+      color: var(--danger-foreground);
     }
 
-    &::-webkit-meter-optimum-value,
-    &::-webkit-meter-suboptimum-value,
-    &::-webkit-meter-even-less-good-value {
-      border-radius: var(--radius-full);
-    }
+    &:is(.outline, .ghost) {
+      --_hov: var(--accent);
+      background-color: transparent;
+      color: var(--foreground);
 
-    &::-webkit-meter-optimum-value {
-      background: var(--success);
-    }
+      &[data-variant="danger"] {
+        --_hov: color-mix(in srgb, var(--danger), transparent 90%);
+        color: var(--danger);
+      }
 
-    &::-webkit-meter-suboptimum-value {
-      background: var(--warning);
+      &[data-variant="secondary"] {
+        --_hov: color-mix(in srgb, var(--secondary), transparent 80%);
+        color: var(--secondary-foreground);
+      }
     }
 
-    &::-webkit-meter-even-less-good-value {
-      background: var(--danger);
-    }
+    &.outline {
+      border-color: var(--border);
 
-    &::-moz-meter-bar {
-      background: var(--success);
-      border-radius: var(--radius-full);
-    }
+      &[data-variant="danger"] {
+        border-color: var(--danger);
+      }
 
-    &:-moz-meter-sub-optimum::-moz-meter-bar {
-      background: var(--warning);
+      &[data-variant="secondary"] {
+        border-color: var(--secondary);
+      }
     }
 
-    &:-moz-meter-sub-sub-optimum::-moz-meter-bar {
-      background: var(--danger);
-    }
-  }
-}
-@layer components {
-  [aria-busy="true"] {
-    &::before {
-      content: "";
-      display: inline-block;
-      inset: 0;
-      margin: auto;
-      width: 1.5rem;
-      height: 1.5rem;
-      border: 2px solid var(--muted);
-      border-top-color: var(--primary);
-      border-radius: var(--radius-full);
-      animation: spin 1s linear infinite;
-      text-align: center;
+    &.ghost {
+      /* Same as .outline but no border. */
+      border-color: transparent;
     }
 
-    &[data-spinner~="small"]::before {
-      width: 1rem;
-      height: 1rem;
+    &.small {
+      padding: var(--space-1) var(--space-3);
+      font-size: var(--text-8);
     }
 
-    &[data-spinner~="large"]::before {
-      width: 2rem;
-      height: 2rem;
-      border-width: 3px;
+    &.large {
+      height: 3rem;
+      padding: 0 var(--space-6);
+      font-size: var(--text-regular);
     }
 
-    &[data-spinner~="overlay"] {
-      position: relative;
-
-      > * {
-        opacity: 0.3;
+    &.icon {
+      width: 2.5rem;
+      padding: 0;
 
-        /* "disable" all elements in the container while it's busy */
-        pointer-events: none;
+      &.small {
+        width: 2rem;
       }
 
-      &::before {
-        position: absolute;
-        inset: 0;
-        margin: auto;
-        z-index: 1;
+      &.large {
+        width: 3rem;
       }
     }
   }
 
-  @keyframes spin {
-    to {
-      transform: rotate(360deg);
-    }
-  }
-}
-@layer components {
-  :root {
-    --grid-cols: 12;
-    --grid-gap: 1.5rem;
-    --container-max: 1280px;
-    --container-pad: 1rem;
-  }
-
-  .container {
-    width: 100%;
-    max-width: var(--container-max);
-    margin-inline: auto;
-    padding-inline: var(--container-pad);
+  ::file-selector-button {
+    background-color: transparent;
+    color: var(--foreground);
+    border: 1px solid var(--border);
   }
-
-  .row {
-    display: grid;
-    grid-template-columns: repeat(var(--grid-cols), 1fr);
-    gap: var(--grid-gap);
-    width: 100%;
+  ::file-selector-button:hover {
+    /* pseudoelement:hover can't be nested and has to be a separate block. */
+    background-color: var(--accent);
   }
+}
 
-  /* Column spans using CSS custom property */
-  .col, [class*="col-"] { grid-column-end: span var(--span, var(--grid-cols)); }
+@layer components {
+  menu.buttons {
+    list-style-type: none;
+    padding-inline-start: 0;
+    display: inline-flex;
 
-  .col-1  { --span: 1; }
-  .col-2  { --span: 2; }
-  .col-3  { --span: 3; }
-  .col-4  { --span: 4; }
-  .col-5  { --span: 5; }
-  .col-6  { --span: 6; }
-  .col-7  { --span: 7; }
-  .col-8  { --span: 8; }
-  .col-9  { --span: 9; }
-  .col-10 { --span: 10; }
-  .col-11 { --span: 11; }
-  .col-12 { --span: 12; }
+    /* In menu.buttons, <li> children are expected to have just one child, which is a button/or a.button */
+    & > li {
+      &:first-child > * {
+        border-start-start-radius: var(--radius-medium);
+        border-end-start-radius: var(--radius-medium);
+      }
 
-  /* Offsets via grid-column-start */
-  .offset-1  { grid-column-start: 2; }
-  .offset-2  { grid-column-start: 3; }
-  .offset-3  { grid-column-start: 4; }
-  .offset-4  { grid-column-start: 5; }
-  .offset-5  { grid-column-start: 6; }
-  .offset-6  { grid-column-start: 7; }
+      &:last-child > * {
+        border-start-end-radius: var(--radius-medium);
+        border-end-end-radius: var(--radius-medium);
+      }
 
-  .col-end {
-    grid-column-start: span var(--span, 1);
-    grid-column-end: -1;
-  }
+      & > * {
+        border-radius: 0;
+      }
 
-  /* Responsive: stack on mobile */
-  @media (max-width: 768px) {
-    .row {
-      --grid-cols: 4;
-      --grid-gap: 1rem;
-    }
-    .col, [class*="col-"] {
-      --span: 4;
-    }
-    [class*="offset-"] {
-      grid-column-start: auto;
+      &:not(:last-child) > * {
+        border-inline-end: 1px solid rgb(from var(--primary-foreground) r g b / 0.2);
+      }
     }
   }
 }
@@ -966,58 +851,41 @@
     padding: var(--space-6);
     overflow: hidden;
   }
-}
-@layer components {
-  [role="alert"] {
-    position: relative;
+
+  .card-header {
     display: flex;
-    gap: var(--space-3);
-    padding: var(--space-4) var(--space-6);
-    background-color: var(--background);
-    border: 1px solid var(--border);
-    border-radius: var(--radius-medium);
+    flex-direction: column;
+    gap: var(--space-1);
+    margin-block-end: var(--space-4);
+  }
+
+  .card-title {
+    font-size: var(--text-4);
+    font-weight: var(--font-semibold);
+    line-height: var(--leading-tight);
+    letter-spacing: var(--tracking-tight);
+    margin: 0;
+  }
+
+  .card-description {
     font-size: var(--text-7);
+    color: var(--muted-foreground);
+    line-height: var(--leading-normal);
+    margin: 0;
+  }
 
-    &[data-variant] {
-      border: none;
-    }
+  .card-content {
+    font-size: var(--text-regular);
+    line-height: var(--leading-normal);
+  }
 
-    &[data-variant="error"],
-    &[data-variant="danger"] {
-      color: var(--danger);
-      background-color: light-dark(
-        color-mix(in srgb, var(--danger) 8%, transparent),
-        color-mix(in srgb, var(--danger) 20%, transparent)
-      );
-
-      & a {
-        color: var(--danger);
-      }
-    }
-
-    &[data-variant="success"] {
-      color: var(--success);
-      background-color: light-dark(
-        color-mix(in srgb, var(--success) 8%, transparent),
-        color-mix(in srgb, var(--success) 20%, transparent)
-      );
-
-      & a {
-        color: var(--success);
-      }
-    }
-
-    &[data-variant="warning"] {
-      color: var(--warning);
-      background-color: light-dark(
-        color-mix(in srgb, var(--warning) 8%, transparent),
-        color-mix(in srgb, var(--warning) 20%, transparent)
-      );
-
-      & a {
-        color: var(--warning);
-      }
-    }
+  .card-footer {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    margin-block-start: var(--space-4);
+    padding-block-start: var(--space-4);
+    border-top: 1px solid var(--border);
   }
 }
 @layer components {
@@ -1128,49 +996,59 @@
   }
 
   details > *:not(summary) {
-    margin: var(--space-4);
+    margin: clamp(var(--space-2), 3vw, var(--space-4));
   }
 }
 @layer components {
-  [role="tablist"] {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--space-1);
-    padding: var(--space-1);
-    background-color: var(--muted);
+  [role="alert"] {
+    position: relative;
+    display: flex;
+    gap: var(--space-3);
+    padding: var(--space-4) clamp(var(--space-3), 3vw, var(--space-6));
+    background-color: var(--background);
+    border: 1px solid var(--border);
     border-radius: var(--radius-medium);
-  }
-
-  [role="tab"] {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: var(--space-2) var(--space-3);
     font-size: var(--text-7);
-    font-weight: var(--font-medium);
-    white-space: nowrap;
-    background-color: transparent;
-    color: var(--foreground);
-    border: none;
-    border-radius: calc(var(--radius-medium) - 2px);
-    cursor: pointer;
-    transition: background-color var(--transition-fast), color var(--transition-fast);
 
-    &:hover {
-      color: var(--muted-foreground);
+    &[data-variant] {
+      border: none;
     }
 
-    &[aria-selected="true"] {
-      background-color: var(--background);
-      box-shadow: var(--shadow-small);
+    &[data-variant="error"],
+    &[data-variant="danger"] {
+      color: var(--danger);
+      background-color: light-dark(
+        color-mix(in srgb, var(--danger) 8%, transparent),
+        color-mix(in srgb, var(--danger) 20%, transparent)
+      );
+
+      & a {
+        color: var(--danger);
+      }
     }
-  }
 
-  [role="tabpanel"] {
-    padding: var(--space-4) 0;
+    &[data-variant="success"] {
+      color: var(--success);
+      background-color: light-dark(
+        color-mix(in srgb, var(--success) 8%, transparent),
+        color-mix(in srgb, var(--success) 20%, transparent)
+      );
 
-    &:focus-visible {
-      outline: none;
+      & a {
+        color: var(--success);
+      }
+    }
+
+    &[data-variant="warning"] {
+      color: var(--warning);
+      background-color: light-dark(
+        color-mix(in srgb, var(--warning) 8%, transparent),
+        color-mix(in srgb, var(--warning) 20%, transparent)
+      );
+
+      & a {
+        color: var(--warning);
+      }
     }
   }
 }
@@ -1269,6 +1147,7 @@
       margin: 0;
       /* padding: var(--space-1); */
       min-width: 12rem;
+      max-width: min(20rem, calc(100vw - var(--space-8)));
       background-color: var(--background);
       border: 1px solid var(--border);
       border-radius: var(--radius-medium);
@@ -1317,125 +1196,266 @@
   }
 }
 @layer components {
-  .toast-container {
-    position: fixed;
-    display: flex;
-    flex-direction: column;
-    pointer-events: none;
-    margin: 0;
-    padding: 0;
-    border: none;
-    background: transparent;
+  :root {
+    --grid-cols: 12;
+    --grid-gap: 1.5rem;
+    --container-max: 1280px;
+    --container-pad: clamp(0.75rem, 4vw, 2rem);
+  }
 
-    overflow: visible;
+  .container {
+    width: 100%;
+    max-width: var(--container-max);
+    margin-inline: auto;
+    padding-inline: var(--container-pad);
+  }
 
-    &::backdrop {
-      display: none;
-    }
+  /* ── Classic .row grid (12-column) ─────────────────────────────────────── */
+  .row {
+    display: grid;
+    grid-template-columns: repeat(var(--grid-cols), 1fr);
+    gap: var(--grid-gap);
+    width: 100%;
+  }
 
-    &[data-placement="top-left"] {
-      inset: var(--space-4) auto auto var(--space-4);
-    }
+  /* Column spans using CSS custom property */
+  .col, [class*="col-"] { grid-column-end: span var(--span, var(--grid-cols)); }
+  
+  .col-1  { --span: 1; }
+  .col-2  { --span: 2; }
+  .col-3  { --span: 3; }
+  .col-4  { --span: 4; }
+  .col-5  { --span: 5; }
+  .col-6  { --span: 6; }
+  .col-7  { --span: 7; }
+  .col-8  { --span: 8; }
+  .col-9  { --span: 9; }
+  .col-10 { --span: 10; }
+  .col-11 { --span: 11; }
+  .col-12 { --span: 12; }
 
-    &[data-placement="top-center"] {
-      inset: var(--space-4) auto auto 50%;
-      transform: translateX(-50%);
-    }
+  /* Offsets via grid-column-start */
+  .offset-1  { grid-column-start: 2; }
+  .offset-2  { grid-column-start: 3; }
+  .offset-3  { grid-column-start: 4; }
+  .offset-4  { grid-column-start: 5; }
+  .offset-5  { grid-column-start: 6; }
+  .offset-6  { grid-column-start: 7; }
 
-    &[data-placement="top-right"] {
-      inset: var(--space-4) var(--space-4) auto auto;
-    }
+  .col-end {
+    grid-column-start: span var(--span, 1);
+    grid-column-end: -1;
+  }
 
-    &[data-placement="bottom-left"] {
-      inset: auto auto var(--space-4) var(--space-4);
-      flex-direction: column-reverse;
-    }
+  /* ── .grid — container-query auto-responsive grid ──────────────────────── */
+  .grid {
+    container-type: inline-size;
+    display: grid;
+    gap: var(--grid-gap);
+    width: 100%;
+    grid-template-columns: 1fr;
+  }
 
-    &[data-placement="bottom-center"] {
-      inset: auto auto var(--space-4) 50%;
-      transform: translateX(-50%);
-      flex-direction: column-reverse;
-    }
+  /* Fluid auto-fit variant: equal-width columns that wrap automatically */
+  .grid-auto {
+    container-type: inline-size;
+    display: grid;
+    gap: var(--grid-gap);
+    width: 100%;
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
+  }
 
-    &[data-placement="bottom-right"] {
-      inset: auto var(--space-4) var(--space-4) auto;
-      flex-direction: column-reverse;
-    }
+  /* Container-query breakpoints for .grid children */
+  @container (min-width: 640px) {
+    .grid { grid-template-columns: repeat(2, 1fr); }
+  }
+  @container (min-width: 1024px) {
+    .grid { grid-template-columns: repeat(var(--grid-cols, 12), 1fr); }
+    .grid > * { grid-column: span var(--span, 1); }
   }
 
-  .toast {
-    --transition: 300ms;
-    --transition-in: calc(var(--transition) - 50ms);
+  /* Allow explicit column count override on .grid: .grid.cols-2, .grid.cols-3, etc. */
+  .grid.cols-2 { --grid-cols: 2; }
+  .grid.cols-3 { --grid-cols: 3; }
+  .grid.cols-4 { --grid-cols: 4; }
 
-    padding: var(--space-5) var(--space-4);
-    max-width: 28rem;
-    min-width: 20rem;
-    pointer-events: auto;
-    background-color: var(--card);
-    border: 1px solid var(--border);
-    border-inline-start-width: var(--space-1);
-    border-inline-start-style: solid;
-    border-radius: var(--radius-medium);
-    box-shadow: var(--shadow-small);
-    transition: opacity var(--transition-in), transform var(--transition-in), margin var(--transition-in);
-    line-height: 1;
+  @container (min-width: 640px) {
+    .grid.cols-2, .grid.cols-3, .grid.cols-4 {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+  @container (min-width: 1024px) {
+    .grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
+    .grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
+    .grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
+  }
 
-    .toast-title {
-      font-weight: 600;
-      margin: 0 0 var(--space-3) 0;
+  /* ── Responsive .row breakpoints (media queries) ───────────────────────── */
+  /* Mobile: stack to single column */
+  @media (max-width: 639px) {
+    .row {
+      --grid-cols: 1;
+      --grid-gap: 1rem;
     }
-    .toast-message {
-      color: var(--muted-foreground);
+    .col, [class*="col-"] {
+      --span: 1;
     }
-
-    &[data-variant="success"] {
-      border-inline-start-color: var(--success);
-      .toast-title {
-        color: var(--success);
-      }
+    [class*="offset-"] {
+      grid-column-start: auto;
     }
+  }
 
-    &[data-variant="danger"] {
-      border-inline-start-color: var(--danger);
-      .toast-title {
-        color: var(--danger);
-      }
+  /* Small: 2-column grid */
+  @media (min-width: 640px) and (max-width: 767px) {
+    .row {
+      --grid-cols: 4;
+      --grid-gap: 1rem;
     }
-
-    &[data-variant="warning"] {
-      border-inline-start-color: var(--warning);
-      .toast-title {
-        color: var(--warning);
-      }
+    .col, [class*="col-"] {
+      --span: 4;
+    }
+    [class*="offset-"] {
+      grid-column-start: auto;
     }
+  }
 
-    & > [data-close] {
-      margin-inline-start: auto;
-      background: none;
-      border: none;
-      padding: 0;
-      cursor: pointer;
-      opacity: 0.5;
+  /* ── Responsive column classes (media queries for power users) ─────────── */
+  /* sm: 640px+ */
+  @media (min-width: 640px) {
+    .sm\:col-1  { --span: 1; }
+    .sm\:col-2  { --span: 2; }
+    .sm\:col-3  { --span: 3; }
+    .sm\:col-4  { --span: 4; }
+    .sm\:col-5  { --span: 5; }
+    .sm\:col-6  { --span: 6; }
+    .sm\:col-7  { --span: 7; }
+    .sm\:col-8  { --span: 8; }
+    .sm\:col-9  { --span: 9; }
+    .sm\:col-10 { --span: 10; }
+    .sm\:col-11 { --span: 11; }
+    .sm\:col-12 { --span: 12; }
+  }
+
+  /* md: 768px+ */
+  @media (min-width: 768px) {
+    .md\:col-1  { --span: 1; }
+    .md\:col-2  { --span: 2; }
+    .md\:col-3  { --span: 3; }
+    .md\:col-4  { --span: 4; }
+    .md\:col-5  { --span: 5; }
+    .md\:col-6  { --span: 6; }
+    .md\:col-7  { --span: 7; }
+    .md\:col-8  { --span: 8; }
+    .md\:col-9  { --span: 9; }
+    .md\:col-10 { --span: 10; }
+    .md\:col-11 { --span: 11; }
+    .md\:col-12 { --span: 12; }
+  }
+
+  /* lg: 1024px+ */
+  @media (min-width: 1024px) {
+    .lg\:col-1  { --span: 1; }
+    .lg\:col-2  { --span: 2; }
+    .lg\:col-3  { --span: 3; }
+    .lg\:col-4  { --span: 4; }
+    .lg\:col-5  { --span: 5; }
+    .lg\:col-6  { --span: 6; }
+    .lg\:col-7  { --span: 7; }
+    .lg\:col-8  { --span: 8; }
+    .lg\:col-9  { --span: 9; }
+    .lg\:col-10 { --span: 10; }
+    .lg\:col-11 { --span: 11; }
+    .lg\:col-12 { --span: 12; }
+  }
+
+  /* xl: 1280px+ */
+  @media (min-width: 1280px) {
+    .xl\:col-1  { --span: 1; }
+    .xl\:col-2  { --span: 2; }
+    .xl\:col-3  { --span: 3; }
+    .xl\:col-4  { --span: 4; }
+    .xl\:col-5  { --span: 5; }
+    .xl\:col-6  { --span: 6; }
+    .xl\:col-7  { --span: 7; }
+    .xl\:col-8  { --span: 8; }
+    .xl\:col-9  { --span: 9; }
+    .xl\:col-10 { --span: 10; }
+    .xl\:col-11 { --span: 11; }
+    .xl\:col-12 { --span: 12; }
+  }
+}
+@layer base {
+  progress {
+    appearance: none;
+    width: 100%;
+    height: var(--bar-height);
+    border: none;
+    border-radius: var(--radius-full);
+    overflow: hidden;
+    background-color: var(--muted);
 
-      &:hover {
-        opacity: 1;
-      }
+    &::-webkit-progress-bar {
+      background-color: var(--muted);
+      border-radius: var(--radius-full);
     }
 
-    margin: var(--space-2) 0;
+    &::-webkit-progress-value {
+      background-color: var(--primary);
+      border-radius: var(--radius-full);
+      transition: width var(--transition);
+    }
 
-    &[data-entering] {
-      opacity: 0;
-      transform: translateY(-1rem);
+    &::-moz-progress-bar {
+      background-color: var(--primary);
+      border-radius: var(--radius-full);
     }
+  }
 
-    &[data-exiting] {
-      opacity: 0;
-      margin: 0;
-      padding-block: 0;
-      max-height: 0;
-      overflow: hidden;
-      transition: opacity var(--transition), margin var(--transition), padding var(--transition), max-height var(--transition);
+  meter {
+    appearance: none;
+    width: 100%;
+    height: var(--bar-height);
+    border: none;
+    border-radius: var(--radius-full);
+    overflow: hidden;
+    background: var(--muted);
+
+    &::-webkit-meter-bar {
+      background: var(--muted);
+      border: none;
+      border-radius: var(--radius-full);
+      height: var(--bar-height);
+    }
+
+    &::-webkit-meter-optimum-value,
+    &::-webkit-meter-suboptimum-value,
+    &::-webkit-meter-even-less-good-value {
+      border-radius: var(--radius-full);
+    }
+
+    &::-webkit-meter-optimum-value {
+      background: var(--success);
+    }
+
+    &::-webkit-meter-suboptimum-value {
+      background: var(--warning);
+    }
+
+    &::-webkit-meter-even-less-good-value {
+      background: var(--danger);
+    }
+
+    &::-moz-meter-bar {
+      background: var(--success);
+      border-radius: var(--radius-full);
+    }
+
+    &:-moz-meter-sub-optimum::-moz-meter-bar {
+      background: var(--warning);
+    }
+
+    &:-moz-meter-sub-sub-optimum::-moz-meter-bar {
+      background: var(--danger);
     }
   }
 }
@@ -1448,6 +1468,10 @@
     min-height: 100dvh;
     gap: var(--space-4);
 
+    > main {
+      min-width: 0;
+    }
+
     &:has(nav[data-topnav]) {
       --topnav-offset: var(--space-12);
 
@@ -1456,12 +1480,6 @@
       }
     }
 
-    > main {
-      min-width: 0;
-      margin-block-start: var(--topnav-offset);
-      padding-block-start: var(--space-8);
-    }
-
     > aside[data-sidebar] {
       position: sticky;
       top: var(--topnav-offset);
@@ -1526,150 +1544,437 @@
           > ul { margin-inline-start: var(--space-4); padding: var(--space-1) 0; }
         }
 
-        summary {
-          justify-content: flex-start;
-          padding: var(--space-2) var(--space-3);
-          border-radius: var(--radius-small);
+        summary {
+          justify-content: flex-start;
+          padding: var(--space-2) var(--space-3);
+          border-radius: var(--radius-small);
+
+          &::after {
+            width: 0.75rem;
+            height: 0.75rem;
+            margin-inline-start: auto;
+          }
+        }
+      }
+    }
+  }
+
+  nav[data-topnav] {
+    position: fixed;
+    inset: 0 0 auto;
+    z-index: 5;
+    min-height: var(--space-12);
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    padding: var(--space-2) var(--space-4);
+    background-color: var(--background);
+    border-bottom: 1px solid var(--border);
+    box-shadow: var(--shadow-small);
+    
+    a {
+      text-decoration: none;
+    }
+  }
+
+  nav[data-topnav] ~ main {
+    margin-block-start: var(--space-12);
+  }
+
+  :is([data-sidebar-toggle], [data-sidebar-header]) {
+    display: none;
+  }
+
+  [data-sidebar-toggle] {
+    padding: 0 var(--space-1);
+    background: none;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-small);
+  }
+
+  @media (min-width: 769px) {
+    [data-sidebar-layout="always"] {
+      transition: grid-template-columns var(--transition);
+
+      [data-sidebar-toggle] {
+        display: inline-block;
+      }
+
+      > aside[data-sidebar] {
+        transform: translateX(0);
+        opacity: 1;
+        transition: transform var(--transition), opacity var(--transition), visibility var(--transition);
+      }
+
+      &[data-sidebar-open] {
+        grid-template-columns: 0px 1fr;
+        gap: 0;
+
+        > aside[data-sidebar] {
+          overflow: hidden;
+          min-width: 0;
+          transform: translateX(-100%);
+          opacity: 0;
+          visibility: hidden;
+          border-inline-end: none;
+        }
+      }
+    }
+  }
+
+  @media (max-width: 768px) {
+    [data-sidebar-layout] {
+      grid-template-columns: 1fr;
+
+      > aside[data-sidebar] {
+        position: fixed;
+        left: 0;
+        width: min(16rem, 80vw);
+        transform: translateX(-100%);
+        transition: transform var(--transition);
+        box-shadow: var(--shadow-large);
+      }
+
+      &[data-sidebar-open] > aside[data-sidebar] {
+        transform: translateX(0);
+      }
+    }
+    [data-sidebar-toggle] { display: inline-block; }
+
+    [data-sidebar-header] {
+      display: flex;
+      align-items: center;
+      gap: var(--space-3);
+      padding: var(--space-3) var(--space-4);
+      border-bottom: 1px solid var(--border);
+    }
+  }
+}
+@layer components {
+  [role="status"].skeleton {
+    --_c: light-dark(
+      color-mix(in srgb, var(--muted) 30%, white),
+      color-mix(in srgb, var(--muted) 90%, var(--foreground))
+    );
+
+    margin-block-end: var(--space-3);
+    background: var(--muted);
+    border-radius: var(--radius-medium);
+    animation: anim 2s infinite;
+    background-size: 200% 100%;
+    background-image: linear-gradient(
+      90deg,
+      var(--muted) 0%,
+      var(--_c) 50%,
+      var(--muted) 100%
+    );
+
+    &.box {
+      width: 4rem;
+      height: 4rem;
+    }
+
+    &.line {
+      height: 1rem;
+      width: 100%;
+    }
+  }
+
+  [role="status"].skeleton:last-child {
+    margin-block-end: 0;
+  }
+
+  @keyframes anim {
+    from { background-position: 200% 0; }
+    to { background-position: -200% 0; }
+  }
+}
+@layer components {
+  [aria-busy="true"] {
+    &::before {
+      content: "";
+      display: inline-block;
+      inset: 0;
+      margin: auto;
+      width: 1.5rem;
+      height: 1.5rem;
+      border: 2px solid var(--muted);
+      border-top-color: var(--primary);
+      border-radius: var(--radius-full);
+      animation: spin 1s linear infinite;
+      text-align: center;
+    }
+
+    &[data-spinner~="small"]::before {
+      width: 1rem;
+      height: 1rem;
+    }
+
+    &[data-spinner~="large"]::before {
+      width: 2rem;
+      height: 2rem;
+      border-width: 3px;
+    }
+
+    &[data-spinner~="overlay"] {
+      position: relative;
+
+      > * {
+        opacity: 0.3;
+
+        /* "disable" all elements in the container while it's busy */
+        pointer-events: none;
+      }
+
+      &::before {
+        position: absolute;
+        inset: 0;
+        margin: auto;
+        z-index: 1;
+      }
+    }
+  }
+
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+}
+@layer base {
+  /* Container to get horizontal scroll on small screens. */
+  .table {
+    min-width: 320px;
+    width: 100%;
+    overflow-x: auto;
+  }
+
+  table {
+    border-collapse: collapse;
+    width: 100%;
+    font-size: var(--text-7);
+  }
+
+  thead {
+    border-bottom: 1px solid var(--border);
+  }
+
+  th, td {
+    overflow-wrap: break-word;
+  }
+
+  th {
+    padding: var(--space-3) var(--space-2);
+    text-align: start;
+    font-weight: var(--font-medium);
+    color: var(--muted-foreground);
+  }
+
+  td {
+    padding: var(--space-3) var(--space-2);
+  }
+
+  tbody tr {
+    border-bottom: 1px solid var(--border);
+    transition: background-color var(--transition-fast);
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    &:hover {
+      background-color: rgb(from var(--muted) r g b / 0.5);
+    }
+  }
+}
+@layer components {
+  [role="tablist"] {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1);
+    padding: var(--space-1);
+    background-color: var(--muted);
+    border-radius: var(--radius-medium);
+    max-width: 100%;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  [role="tab"] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--space-2) var(--space-3);
+    font-size: var(--text-7);
+    font-weight: var(--font-medium);
+    white-space: nowrap;
+    background-color: transparent;
+    color: var(--foreground);
+    border: none;
+    border-radius: calc(var(--radius-medium) - 2px);
+    cursor: pointer;
+    transition: background-color var(--transition-fast), color var(--transition-fast);
+
+    &:hover {
+      color: var(--muted-foreground);
+    }
 
-          &::after {
-            width: 0.75rem;
-            height: 0.75rem;
-            margin-inline-start: auto;
-          }
-        }
-      }
+    &[aria-selected="true"] {
+      background-color: var(--background);
+      box-shadow: var(--shadow-small);
     }
   }
 
-  nav[data-topnav] {
+  [role="tabpanel"] {
+    padding: var(--space-4) 0;
+
+    &:focus-visible {
+      outline: none;
+    }
+  }
+}
+@layer components {
+  .toast-container {
     position: fixed;
-    inset: 0 0 auto;
-    z-index: 5;
-    min-height: var(--space-12);
     display: flex;
-    align-items: center;
-    gap: var(--space-3);
-    padding: var(--space-2) var(--space-4);
-    background-color: var(--background);
-    border-bottom: 1px solid var(--border);
-    box-shadow: var(--shadow-small);
+    flex-direction: column;
+    pointer-events: none;
+    margin: 0;
+    padding: 0;
+    border: none;
+    background: transparent;
 
-    a {
-      text-decoration: none;
+    overflow: visible;
+
+    &::backdrop {
+      display: none;
     }
-  }
 
-  :is([data-sidebar-toggle], [data-sidebar-header]) {
-    display: none;
-  }
+    &[data-placement="top-left"] {
+      inset: var(--space-4) auto auto var(--space-4);
+    }
 
-  [data-sidebar-toggle] {
-    padding: 0 var(--space-1);
-    background: none;
-    border: 1px solid var(--border);
-    border-radius: var(--radius-small);
-  }
+    &[data-placement="top-center"] {
+      inset: var(--space-4) auto auto 50%;
+      transform: translateX(-50%);
+    }
 
-  @media (min-width: 769px) {
-    [data-sidebar-layout="always"] {
-      transition: grid-template-columns var(--transition);
+    &[data-placement="top-right"] {
+      inset: var(--space-4) var(--space-4) auto auto;
+    }
 
-      [data-sidebar-toggle] {
-        display: inline-block;
+    /* Stack full-width on narrow screens */
+    @media (max-width: 639px) {
+      &[data-placement="top-left"],
+      &[data-placement="top-right"] {
+        inset: var(--space-4) var(--space-2) auto var(--space-2);
       }
-
-      > aside[data-sidebar] {
-        transform: translateX(0);
-        opacity: 1;
-        transition: transform var(--transition), opacity var(--transition), visibility var(--transition);
+      &[data-placement="bottom-left"],
+      &[data-placement="bottom-right"] {
+        inset: auto var(--space-2) var(--space-4) var(--space-2);
       }
+    }
 
-      &[data-sidebar-open] {
-        grid-template-columns: 0px 1fr;
-        gap: 0;
+    &[data-placement="bottom-left"] {
+      inset: auto auto var(--space-4) var(--space-4);
+      flex-direction: column-reverse;
+    }
 
-        > aside[data-sidebar] {
-          overflow: hidden;
-          min-width: 0;
-          transform: translateX(-100%);
-          opacity: 0;
-          visibility: hidden;
-          border-inline-end: none;
-        }
-      }
+    &[data-placement="bottom-center"] {
+      inset: auto auto var(--space-4) 50%;
+      transform: translateX(-50%);
+      flex-direction: column-reverse;
+    }
+
+    &[data-placement="bottom-right"] {
+      inset: auto var(--space-4) var(--space-4) auto;
+      flex-direction: column-reverse;
     }
   }
 
-  @media (max-width: 768px) {
-    [data-sidebar-layout] {
-      grid-template-columns: 1fr;
+  .toast {
+    --transition: 300ms;
+    --transition-in: calc(var(--transition) - 50ms);
 
-      > aside[data-sidebar] {
-        position: fixed;
-        left: 0;
-        width: 16rem;
-        transform: translateX(-100%);
-        transition: transform var(--transition);
-        box-shadow: var(--shadow-large);
+    padding: var(--space-5) var(--space-4);
+    max-width: min(28rem, calc(100vw - var(--space-8)));
+    min-width: min(20rem, calc(100vw - var(--space-8)));
+    pointer-events: auto;
+    background-color: var(--card);
+    border: 1px solid var(--border);
+    border-inline-start-width: var(--space-1);
+    border-inline-start-style: solid;
+    border-radius: var(--radius-medium);
+    box-shadow: var(--shadow-small);
+    transition: opacity var(--transition-in), transform var(--transition-in), margin var(--transition-in);
+    line-height: 1;
+
+    .toast-title {
+      font-weight: var(--font-semibold);
+      font-size: var(--text-7);
+      line-height: var(--leading-tight);
+      margin: 0 0 var(--space-2) 0;
+    }
+    .toast-message {
+      color: var(--muted-foreground);
+      font-size: var(--text-7);
+      line-height: var(--leading-normal);
+    }
+
+    &[data-variant="success"] {
+      border-inline-start-color: var(--success);
+      .toast-title {
+        color: var(--success);
       }
+    }
 
-      &[data-sidebar-open] > aside[data-sidebar] {
-        transform: translateX(0);
+    &[data-variant="danger"] {
+      border-inline-start-color: var(--danger);
+      .toast-title {
+        color: var(--danger);
       }
     }
-    [data-sidebar-toggle] { display: inline-block; }
 
-    [data-sidebar-header] {
-      display: flex;
-      align-items: center;
-      gap: var(--space-3);
-      padding: var(--space-3) var(--space-4);
-      border-bottom: 1px solid var(--border);
+    &[data-variant="warning"] {
+      border-inline-start-color: var(--warning);
+      .toast-title {
+        color: var(--warning);
+      }
     }
-  }
-}
-@layer components {
-  [role="status"].skeleton {
-    --_c: light-dark(
-      color-mix(in srgb, var(--muted) 30%, white),
-      color-mix(in srgb, var(--muted) 90%, var(--foreground))
-    );
 
-    margin-block-end: var(--space-3);
-    background: var(--muted);
-    border-radius: var(--radius-medium);
-    animation: anim 2s infinite;
-    background-size: 200% 100%;
-    background-image: linear-gradient(
-      90deg,
-      var(--muted) 0%,
-      var(--_c) 50%,
-      var(--muted) 100%
-    );
+    & > [data-close] {
+      margin-inline-start: auto;
+      background: none;
+      border: none;
+      padding: 0;
+      cursor: pointer;
+      opacity: 0.5;
 
-    &.box {
-      width: 4rem;
-      height: 4rem;
+      &:hover {
+        opacity: 1;
+      }
     }
 
-    &.line {
-      height: 1rem;
-      width: 100%;
-    }
-    &.circle {
-      width: 3rem;
-      height: 3rem;
-      border-radius: var(--radius-full);
-    }
-  }
+    margin: var(--space-2) 0;
 
-  [role="status"].skeleton:last-child {
-    margin-block-end: 0;
-  }
+    &[data-entering] {
+      opacity: 0;
+      transform: translateY(-1rem);
+    }
 
-  @keyframes anim {
-    from { background-position: 200% 0; }
-    to { background-position: -200% 0; }
+    &[data-exiting] {
+      opacity: 0;
+      margin: 0;
+      padding-block: 0;
+      max-height: 0;
+      overflow: hidden;
+      transition: opacity var(--transition), margin var(--transition), padding var(--transition), max-height var(--transition);
+    }
   }
 }
 @layer components {
@@ -1719,8 +2024,6 @@
     transform: translateX(-50%) translateY(0);
   }
 }
-
-/* ── Avatar ───────────────────────────────────────────────────────── */
 @layer components {
   .avatar {
     --avatar-size: 40px;
@@ -1763,8 +2066,6 @@
     margin-inline-start: calc(var(--avatar-size) * -0.3);
   }
 }
-
-/* ── File Upload ──────────────────────────────────────────────────── */
 @layer components {
   .file-upload {
     display: flex;
@@ -1802,7 +2103,9 @@
   }
 
   .file-upload-text {
+    font-size: var(--text-regular);
     font-weight: var(--font-medium);
+    line-height: var(--leading-normal);
   }
 
   .file-upload-hint {
@@ -1866,8 +2169,6 @@
     height: 1rem;
   }
 }
-
-/* ── Input OTP ────────────────────────────────────────────────────── */
 @layer components {
   .otp-group {
     display: inline-flex;
@@ -1912,8 +2213,6 @@
     font-weight: var(--font-semibold);
   }
 }
-
-/* ── Search Input ─────────────────────────────────────────────────── */
 @layer components {
   .search-input {
     position: relative;
@@ -1928,7 +2227,7 @@
     pointer-events: none;
     display: inline-flex;
     align-items: center;
-    z-index: 2;
+    z-index: 1;
   }
 
   .search-input-icon svg {
@@ -1994,12 +2293,11 @@
     line-height: 1;
   }
 
+  /* Hide shortcut when clear button is visible */
   .search-input.has-value .search-input-shortcut {
     display: none;
   }
 }
-
-/* ── Separator ────────────────────────────────────────────────────── */
 @layer components {
   .separator-vertical {
     border-top: none;
@@ -2025,8 +2323,6 @@
     border-top: 1px solid var(--border);
   }
 }
-
-/* ── Toggle / Toggle Group ────────────────────────────────────────── */
 @layer components {
   .toggle {
     display: inline-flex;
@@ -2077,6 +2373,7 @@
     font-size: var(--text-5);
   }
 
+  /* Toggle group */
   .toggle-group {
     display: inline-flex;
   }
@@ -2097,8 +2394,6 @@
     border-end-end-radius: var(--radius-medium);
   }
 }
-
-/* ── Chips ─────────────────────────────────────────────────────────── */
 @layer components {
   .chip {
     display: inline-flex;
@@ -2117,6 +2412,7 @@
     transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
   }
 
+  /* Interactive / selectable chip */
   .chip.interactive {
     cursor: pointer;
   }
@@ -2142,6 +2438,7 @@
     background: color-mix(in srgb, var(--primary) 90%, transparent);
   }
 
+  /* Variants */
   .chip.secondary {
     background: var(--secondary);
     color: var(--secondary-foreground);
@@ -2185,9 +2482,11 @@
     border-color: transparent;
   }
 
+  /* Sizes */
   .chip-sm {
     padding: 0 var(--space-2);
-    font-size: calc(var(--text-8) - 1px);
+    font-size: var(--text-8);
+    line-height: var(--leading-tight);
   }
 
   .chip-lg {
@@ -2195,6 +2494,7 @@
     font-size: var(--text-7);
   }
 
+  /* Disabled */
   .chip:disabled,
   .chip[aria-disabled="true"] {
     opacity: 0.5;
@@ -2202,6 +2502,7 @@
     cursor: not-allowed;
   }
 
+  /* Remove / dismiss button inside a chip */
   .chip-dismiss {
     display: inline-flex;
     align-items: center;
@@ -2227,6 +2528,7 @@
     height: 0.75rem;
   }
 
+  /* Chip avatar/icon slot */
   .chip-icon {
     display: inline-flex;
     align-items: center;
@@ -2240,6 +2542,7 @@
     border-radius: var(--radius-full);
   }
 
+  /* Chip group / input wrapper */
   .chip-group {
     display: flex;
     flex-wrap: wrap;
@@ -2277,8 +2580,6 @@
     padding: 0;
   }
 }
-
-/* ── Carousel ──────────────────────────────────────────────────────── */
 @layer components {
   .carousel {
     position: relative;
@@ -2311,6 +2612,7 @@
     position: relative;
   }
 
+  /* Slide-in animation for active slides */
   .carousel-slide img {
     width: 100%;
     height: 100%;
@@ -2329,6 +2631,7 @@
     opacity: 1;
   }
 
+  /* Caption slide-up animation */
   .carousel-caption {
     position: absolute;
     bottom: 0;
@@ -2359,6 +2662,7 @@
     opacity: 0.9;
   }
 
+  /* Navigation arrows */
   .carousel-prev,
   .carousel-next {
     position: absolute;
@@ -2423,6 +2727,7 @@
     height: 1.25rem;
   }
 
+  /* Dot indicators */
   .carousel-dots {
     display: flex;
     justify-content: center;
@@ -2460,12 +2765,12 @@
     outline-offset: 2px;
   }
 
+  /* Overlay dots */
   .carousel-dots.overlay {
     position: absolute;
     bottom: var(--space-3);
     left: 0;
     right: 0;
-    opacity: 0.6;
   }
 
   .carousel-dots.overlay .carousel-dot {
@@ -2476,6 +2781,7 @@
     background: var(--primary-foreground);
   }
 
+  /* Aspect ratios */
   .carousel.ratio-16-9 .carousel-slide { aspect-ratio: 16 / 9; }
   .carousel.ratio-4-3 .carousel-slide { aspect-ratio: 4 / 3; }
   .carousel.ratio-1-1 .carousel-slide { aspect-ratio: 1 / 1; }
@@ -2577,6 +2883,7 @@
     display: none;
   }
 
+  /* Product card inside carousel */
   .product-card {
     flex: 0 0 auto;
     scroll-snap-align: start;
@@ -2685,6 +2992,7 @@
     stroke: #f59e0b;
   }
 
+  /* Responsive: narrower cards on mobile */
   @media (max-width: 768px) {
     .product-card {
       width: 200px;
@@ -2695,20 +3003,114 @@
     }
   }
 }
-
 @layer utilities {
+  /* ── Text alignment ──────────────────────────────────────────────────── */
   .align-left { text-align: start; }
   .align-center { text-align: center; }
   .align-right { text-align: end; }
+
+  .text-left { text-align: start; }
+  .text-center { text-align: center; }
+  .text-right { text-align: end; }
+
+  /* ── Text colors ─────────────────────────────────────────────────────── */
   .text-light { color: var(--muted-foreground); }
   .text-lighter { color: var(--faint-foreground); }
-
+  .text-danger { color: var(--danger); }
+  .text-success { color: var(--success); }
+  .text-warning { color: var(--warning); }
+  .text-primary { color: var(--primary); }
+  .text-muted { color: var(--muted-foreground); }
+
+  /* ── Text sizes (maps to theme tokens) ───────────────────────────────── */
+  .text-1 { font-size: var(--text-1); }
+  .text-2 { font-size: var(--text-2); }
+  .text-3 { font-size: var(--text-3); }
+  .text-4 { font-size: var(--text-4); }
+  .text-5 { font-size: var(--text-5); }
+  .text-6 { font-size: var(--text-6); }
+  .text-7 { font-size: var(--text-7); }
+  .text-8 { font-size: var(--text-8); }
+
+  .text-small { font-size: var(--text-7); }
+  .text-xs { font-size: var(--text-8); }
+  .text-regular { font-size: var(--text-regular); }
+
+  /* ── Font weight ─────────────────────────────────────────────────────── */
+  .font-normal { font-weight: var(--font-normal); }
+  .font-medium { font-weight: var(--font-medium); }
+  .font-semibold { font-weight: var(--font-semibold); }
+  .font-bold { font-weight: var(--font-bold); }
+
+  /* ── Font family ─────────────────────────────────────────────────────── */
+  .font-sans { font-family: var(--font-sans); }
+  .font-mono { font-family: var(--font-mono); }
+
+  /* ── Line-height ─────────────────────────────────────────────────────── */
+  .leading-none { line-height: var(--leading-none); }
+  .leading-tight { line-height: var(--leading-tight); }
+  .leading-snug { line-height: var(--leading-snug); }
+  .leading-normal { line-height: var(--leading-normal); }
+  .leading-relaxed { line-height: var(--leading-relaxed); }
+  .leading-loose { line-height: var(--leading-loose); }
+
+  /* ── Letter-spacing ──────────────────────────────────────────────────── */
+  .tracking-tighter { letter-spacing: var(--tracking-tighter); }
+  .tracking-tight { letter-spacing: var(--tracking-tight); }
+  .tracking-normal { letter-spacing: var(--tracking-normal); }
+  .tracking-wide { letter-spacing: var(--tracking-wide); }
+  .tracking-wider { letter-spacing: var(--tracking-wider); }
+  .tracking-widest { letter-spacing: var(--tracking-widest); }
+
+  /* ── Text transform ──────────────────────────────────────────────────── */
+  .uppercase { text-transform: uppercase; }
+  .lowercase { text-transform: lowercase; }
+  .capitalize { text-transform: capitalize; }
+  .normal-case { text-transform: none; }
+
+  /* ── Text decoration ─────────────────────────────────────────────────── */
+  .underline { text-decoration-line: underline; }
+  .overline { text-decoration-line: overline; }
+  .line-through { text-decoration-line: line-through; }
+  .no-underline { text-decoration-line: none; }
+
+  /* ── Text wrapping ───────────────────────────────────────────────────── */
+  .text-balance { text-wrap: balance; }
+  .text-pretty { text-wrap: pretty; }
+  .text-nowrap { text-wrap: nowrap; }
+
+  /* ── White-space ─────────────────────────────────────────────────────── */
+  .whitespace-normal { white-space: normal; }
+  .whitespace-nowrap { white-space: nowrap; }
+  .whitespace-pre { white-space: pre; }
+  .whitespace-pre-line { white-space: pre-line; }
+  .whitespace-pre-wrap { white-space: pre-wrap; }
+
+  /* ── Line clamp (multi-line truncation) ──────────────────────────────── */
+  .line-clamp-1 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; }
+  .line-clamp-2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
+  .line-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
+  .line-clamp-4 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
+  .line-clamp-none { display: block; -webkit-box-orient: initial; -webkit-line-clamp: none; overflow: visible; }
+
+  /* ── Word break ──────────────────────────────────────────────────────── */
+  .break-normal { overflow-wrap: normal; word-break: normal; }
+  .break-words { overflow-wrap: break-word; }
+  .break-all { word-break: break-all; }
+
+  /* ── Flexbox ─────────────────────────────────────────────────────────── */
   .flex { display: flex; }
   .flex-col { flex-direction: column; }
+  .flex-row { flex-direction: row; }
+  .flex-wrap { flex-wrap: wrap; }
+  .flex-1 { flex: 1; }
   .items-center { align-items: center; }
+  .items-start { align-items: flex-start; }
+  .items-end { align-items: flex-end; }
   .justify-center { justify-content: center; }
   .justify-between { justify-content: space-between; }
   .justify-end { justify-content: flex-end; }
+  .justify-start { justify-content: flex-start; }
 
   /* Bootstrap inspired. */
   .hstack {
@@ -2729,24 +3131,199 @@
     gap: var(--space-3);
   }
 
+  /* ── Gap ──────────────────────────────────────────────────────────────── */
   .gap-1 { gap: var(--space-1); }
   .gap-2 { gap: var(--space-2); }
+  .gap-3 { gap: var(--space-3); }
   .gap-4 { gap: var(--space-4); }
+  .gap-6 { gap: var(--space-6); }
+  .gap-8 { gap: var(--space-8); }
 
+  /* ── Margin ──────────────────────────────────────────────────────────── */
+  .mt-0 { margin-block-start: 0; }
   .mt-2 { margin-block-start: var(--space-2); }
   .mt-4 { margin-block-start: var(--space-4); }
   .mt-6 { margin-block-start: var(--space-6); }
+  .mt-8 { margin-block-start: var(--space-8); }
 
+  .mb-0 { margin-block-end: 0; }
   .mb-2 { margin-block-end: var(--space-2); }
   .mb-4 { margin-block-end: var(--space-4); }
   .mb-6 { margin-block-end: var(--space-6); }
+  .mb-8 { margin-block-end: var(--space-8); }
+
+  /* ── Padding ─────────────────────────────────────────────────────────── */
+  .p-0 { padding: 0; }
+  .p-2 { padding: var(--space-2); }
   .p-4 { padding: var(--space-4); }
+  .p-6 { padding: var(--space-6); }
+  .p-8 { padding: var(--space-8); }
+
+  .px-2 { padding-inline: var(--space-2); }
+  .px-4 { padding-inline: var(--space-4); }
+  .py-2 { padding-block: var(--space-2); }
+  .py-4 { padding-block: var(--space-4); }
 
+  /* ── Width ───────────────────────────────────────────────────────────── */
   .w-100 { width: 100%; }
+  .w-auto { width: auto; }
+  .max-w-sm { max-width: 24rem; }
+  .max-w-md { max-width: 28rem; }
+  .max-w-lg { max-width: 32rem; }
+  .max-w-xl { max-width: 36rem; }
+
+  /* ── Display ─────────────────────────────────────────────────────────── */
+  .d-none { display: none; }
+  .d-block { display: block; }
+  .d-flex { display: flex; }
+  .d-grid { display: grid; }
+  .d-inline { display: inline; }
+  .d-inline-block { display: inline-block; }
+  .d-inline-flex { display: inline-flex; }
+
+  /* ── Overflow ─────────────────────────────────────────────────────────── */
+  .overflow-auto { overflow: auto; }
+  .overflow-hidden { overflow: hidden; }
+  .overflow-x-auto { overflow-x: auto; }
+
+  /* ── Misc ─────────────────────────────────────────────────────────────── */
+  .truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
 
   :is(ul, ol, a).unstyled {
     list-style: none;
     text-decoration: none;
     padding: 0;
   }
+
+  /* ── Responsive display utilities (media queries) ────────────────────── */
+  @media (max-width: 639px) {
+    .sm\:d-none { display: none; }
+    .hide-mobile { display: none; }
+  }
+  @media (min-width: 640px) {
+    .sm\:d-block { display: block; }
+    .sm\:d-flex { display: flex; }
+    .sm\:d-grid { display: grid; }
+    .sm\:d-none { display: none; }
+    .sm\:flex-row { flex-direction: row; }
+    .sm\:flex-col { flex-direction: column; }
+    .show-mobile { display: none; }
+  }
+  @media (min-width: 768px) {
+    .md\:d-block { display: block; }
+    .md\:d-flex { display: flex; }
+    .md\:d-grid { display: grid; }
+    .md\:d-none { display: none; }
+    .md\:flex-row { flex-direction: row; }
+    .md\:flex-col { flex-direction: column; }
+  }
+  @media (min-width: 1024px) {
+    .lg\:d-block { display: block; }
+    .lg\:d-flex { display: flex; }
+    .lg\:d-grid { display: grid; }
+    .lg\:d-none { display: none; }
+    .lg\:flex-row { flex-direction: row; }
+    .lg\:flex-col { flex-direction: column; }
+  }
+  @media (min-width: 1280px) {
+    .xl\:d-block { display: block; }
+    .xl\:d-flex { display: flex; }
+    .xl\:d-grid { display: grid; }
+    .xl\:d-none { display: none; }
+  }
+
+  /* ── Responsive text alignment ───────────────────────────────────────── */
+  @media (min-width: 640px) {
+    .sm\:text-left { text-align: start; }
+    .sm\:text-center { text-align: center; }
+    .sm\:text-right { text-align: end; }
+  }
+  @media (min-width: 768px) {
+    .md\:text-left { text-align: start; }
+    .md\:text-center { text-align: center; }
+    .md\:text-right { text-align: end; }
+  }
+  @media (min-width: 1024px) {
+    .lg\:text-left { text-align: start; }
+    .lg\:text-center { text-align: center; }
+    .lg\:text-right { text-align: end; }
+  }
+
+  /* ── Responsive text sizes ─────────────────────────────────────────── */
+  @media (min-width: 640px) {
+    .sm\:text-1 { font-size: var(--text-1); }
+    .sm\:text-2 { font-size: var(--text-2); }
+    .sm\:text-3 { font-size: var(--text-3); }
+    .sm\:text-4 { font-size: var(--text-4); }
+    .sm\:text-5 { font-size: var(--text-5); }
+    .sm\:text-6 { font-size: var(--text-6); }
+    .sm\:text-7 { font-size: var(--text-7); }
+    .sm\:text-8 { font-size: var(--text-8); }
+  }
+  @media (min-width: 768px) {
+    .md\:text-1 { font-size: var(--text-1); }
+    .md\:text-2 { font-size: var(--text-2); }
+    .md\:text-3 { font-size: var(--text-3); }
+    .md\:text-4 { font-size: var(--text-4); }
+    .md\:text-5 { font-size: var(--text-5); }
+    .md\:text-6 { font-size: var(--text-6); }
+    .md\:text-7 { font-size: var(--text-7); }
+    .md\:text-8 { font-size: var(--text-8); }
+  }
+  @media (min-width: 1024px) {
+    .lg\:text-1 { font-size: var(--text-1); }
+    .lg\:text-2 { font-size: var(--text-2); }
+    .lg\:text-3 { font-size: var(--text-3); }
+    .lg\:text-4 { font-size: var(--text-4); }
+    .lg\:text-5 { font-size: var(--text-5); }
+    .lg\:text-6 { font-size: var(--text-6); }
+    .lg\:text-7 { font-size: var(--text-7); }
+    .lg\:text-8 { font-size: var(--text-8); }
+  }
+
+  /* ── Responsive gap ──────────────────────────────────────────────────── */
+  @media (min-width: 640px) {
+    .sm\:gap-2 { gap: var(--space-2); }
+    .sm\:gap-4 { gap: var(--space-4); }
+    .sm\:gap-6 { gap: var(--space-6); }
+    .sm\:gap-8 { gap: var(--space-8); }
+  }
+  @media (min-width: 768px) {
+    .md\:gap-2 { gap: var(--space-2); }
+    .md\:gap-4 { gap: var(--space-4); }
+    .md\:gap-6 { gap: var(--space-6); }
+    .md\:gap-8 { gap: var(--space-8); }
+  }
+
+  /* ── Responsive padding ──────────────────────────────────────────────── */
+  @media (min-width: 640px) {
+    .sm\:p-4 { padding: var(--space-4); }
+    .sm\:p-6 { padding: var(--space-6); }
+    .sm\:p-8 { padding: var(--space-8); }
+    .sm\:px-4 { padding-inline: var(--space-4); }
+    .sm\:px-6 { padding-inline: var(--space-6); }
+  }
+  @media (min-width: 768px) {
+    .md\:p-4 { padding: var(--space-4); }
+    .md\:p-6 { padding: var(--space-6); }
+    .md\:p-8 { padding: var(--space-8); }
+    .md\:px-4 { padding-inline: var(--space-4); }
+    .md\:px-6 { padding-inline: var(--space-6); }
+  }
 }