@pinfold/css 0.1.0 → 0.2.0

package/dist/all.css

@@ -1,15 +1,11 @@
-/* Pinfold — scoped reset. Applies only inside `.pinfold`, never to the host app.
-   A library that resets the page is a library that fights its host. */
 
 @layer pinfold.reset {
-
   .pinfold,
   .pinfold *,
   .pinfold *::before,
   .pinfold *::after {
     box-sizing: border-box;
   }
-
   .pinfold {
     font-family: var(--pinfold-font-sans);
     font-size: var(--pinfold-text-md);
@@ -18,55 +14,42 @@
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     text-rendering: optimizeLegibility;
-    /* Proportional digits jump as numbers change; tabular ones do not. */
     font-variant-numeric: tabular-nums;
   }
-
   .pinfold :where(button, input, select, textarea) {
     font: inherit;
     color: inherit;
     letter-spacing: inherit;
     margin: 0;
   }
-
   .pinfold :where(button) {
     background: none;
     border: 0;
     cursor: pointer;
-    /* Kills the 300ms tap delay and the grey flash on touch devices. */
     touch-action: manipulation;
     -webkit-tap-highlight-color: transparent;
   }
-
   .pinfold :where(h1, h2, h3, h4, h5, h6, p, figure, dl, dd) {
     margin: 0;
     font-size: inherit;
     font-weight: inherit;
   }
-
   .pinfold :where(img, svg, video, canvas) {
     display: block;
     max-width: 100%;
   }
-
   .pinfold :where(svg) {
     flex: none;
   }
-
   .pinfold ::selection {
     background: var(--pinfold-color-selection);
   }
-
-  /* Two-tone focus ring, visible on any surface. `outline` stays as the
-     forced-colors fallback since box-shadow is dropped in that mode. */
   .pinfold :where(:focus-visible) {
     outline: var(--pinfold-focus-width) solid transparent;
     outline-offset: var(--pinfold-focus-offset);
     box-shadow: var(--pinfold-focus-ring);
     border-radius: var(--pinfold-radius-xs);
   }
-
-  /* Scrollbars inside Pinfold surfaces follow the palette instead of the OS. */
   .pinfold :where(*) {
     scrollbar-width: thin;
     scrollbar-color: var(--pinfold-color-border-strong) transparent;
@@ -84,7 +67,6 @@
   .pinfold :where(*)::-webkit-scrollbar-track {
     background: transparent;
   }
-
   @media (prefers-reduced-motion: reduce) {
     .pinfold,
     .pinfold * {
@@ -94,9 +76,6 @@
       scroll-behavior: auto !important;
     }
   }
-
-  /* Forced colors (Windows High Contrast): the OS owns colour, so drop our
-     decoration and let system colours through. */
   @media (forced-colors: active) {
     .pinfold :where(:focus-visible) {
       outline-color: Highlight;
@@ -106,28 +85,12 @@
       forced-color-adjust: none;
     }
   }
-
 }
 
-/* Pinfold — design tokens.
-   Single source of truth. Components style themselves only through these vars,
-   so a palette swap, a dark-mode flip and a consumer override all work through
-   the same mechanism instead of three competing ones.
-
-   Colour is authored in OKLCH for perceptual evenness. `npx pinfold theme`
-   regenerates the ramps and also writes sRGB hex fallbacks for browsers
-   without OKLCH support. */
 
-/* Everything ships inside the `pinfold` cascade layer. Unlayered CSS — including
-   every Tailwind utility — beats a layered rule regardless of source order or
-   specificity, so `className="px-6"` just works with no `!important` and no
-   plugin. */
 @layer pinfold.tokens {
-
   :root {
     color-scheme: light dark;
-
-    /* ---------------------------------------------------------------- ramps */
     --pinfold-primary-50: oklch(0.977 0.014 274);
     --pinfold-primary-100: oklch(0.946 0.033 274);
     --pinfold-primary-200: oklch(0.902 0.063 274);
@@ -139,14 +102,11 @@
     --pinfold-primary-800: oklch(0.432 0.181 274);
     --pinfold-primary-900: oklch(0.380 0.146 274);
     --pinfold-primary-950: oklch(0.283 0.101 274);
-
-    /* `accent` defaults to the brand ramp; the CLI can give it its own hue. */
     --pinfold-accent-300: var(--pinfold-primary-300);
     --pinfold-accent-400: var(--pinfold-primary-400);
     --pinfold-accent-500: var(--pinfold-primary-500);
     --pinfold-accent-600: var(--pinfold-primary-600);
     --pinfold-accent-700: var(--pinfold-primary-700);
-
     --pinfold-neutral-50: oklch(0.985 0.002 274);
     --pinfold-neutral-100: oklch(0.967 0.003 274);
     --pinfold-neutral-200: oklch(0.928 0.006 274);
@@ -158,66 +118,48 @@
     --pinfold-neutral-800: oklch(0.279 0.023 274);
     --pinfold-neutral-900: oklch(0.210 0.021 274);
     --pinfold-neutral-950: oklch(0.145 0.017 274);
-
     --pinfold-success-100: oklch(0.946 0.033 158);
     --pinfold-success-300: oklch(0.828 0.111 158);
     --pinfold-success-500: oklch(0.606 0.201 158);
     --pinfold-success-700: oklch(0.491 0.216 158);
     --pinfold-success-900: oklch(0.380 0.146 158);
-
     --pinfold-warning-100: oklch(0.946 0.033 78);
     --pinfold-warning-300: oklch(0.828 0.111 78);
     --pinfold-warning-500: oklch(0.606 0.201 78);
     --pinfold-warning-700: oklch(0.491 0.216 78);
     --pinfold-warning-900: oklch(0.380 0.146 78);
-
     --pinfold-danger-100: oklch(0.946 0.033 27);
     --pinfold-danger-300: oklch(0.828 0.111 27);
     --pinfold-danger-500: oklch(0.606 0.201 27);
     --pinfold-danger-700: oklch(0.491 0.216 27);
     --pinfold-danger-900: oklch(0.380 0.146 27);
-
     --pinfold-info-100: oklch(0.946 0.033 245);
     --pinfold-info-300: oklch(0.828 0.111 245);
     --pinfold-info-500: oklch(0.606 0.201 245);
     --pinfold-info-700: oklch(0.491 0.216 245);
     --pinfold-info-900: oklch(0.380 0.146 245);
-
-    /* ------------------------------------------------------------ semantics */
     --pinfold-color-bg: var(--pinfold-neutral-50);
     --pinfold-color-bg-subtle: var(--pinfold-neutral-100);
     --pinfold-color-surface: oklch(1 0 0);
     --pinfold-color-surface-raised: oklch(1 0 0);
     --pinfold-color-surface-sunken: var(--pinfold-neutral-100);
-
-    /* Interaction surfaces carry a trace of the brand, so hover reads as
-       "this control is alive" rather than "this control turned grey". */
     --pinfold-color-surface-hover: color-mix(in oklch, var(--pinfold-color-accent) 6%, var(--pinfold-color-surface));
     --pinfold-color-surface-active: color-mix(in oklch, var(--pinfold-color-accent) 11%, var(--pinfold-color-surface));
     --pinfold-color-surface-selected: color-mix(in oklch, var(--pinfold-color-accent) 14%, var(--pinfold-color-surface));
-
     --pinfold-color-border: var(--pinfold-neutral-200);
     --pinfold-color-border-strong: var(--pinfold-neutral-300);
     --pinfold-color-border-accent: color-mix(in oklch, var(--pinfold-color-accent) 45%, var(--pinfold-color-border));
-
     --pinfold-color-text: var(--pinfold-neutral-900);
     --pinfold-color-text-muted: var(--pinfold-neutral-600);
     --pinfold-color-text-subtle: var(--pinfold-neutral-500);
     --pinfold-color-text-disabled: var(--pinfold-neutral-400);
-
-    --pinfold-color-accent: var(--pinfold-accent-600);
-    --pinfold-color-accent-hover: var(--pinfold-accent-700);
+    --pinfold-color-accent: var(--pinfold-primary-600);
+    --pinfold-color-accent-hover: var(--pinfold-primary-700);
     --pinfold-color-accent-subtle: color-mix(in oklch, var(--pinfold-color-accent) 10%, transparent);
     --pinfold-color-accent-contrast: oklch(1 0 0);
-
-    --pinfold-color-ring: var(--pinfold-accent-500);
+    --pinfold-color-ring: var(--pinfold-primary-500);
     --pinfold-color-overlay: color-mix(in oklch, var(--pinfold-neutral-950) 45%, transparent);
     --pinfold-color-selection: color-mix(in oklch, var(--pinfold-color-accent) 22%, transparent);
-
-    /* --------------------------------------------------------------- depth */
-    /* Shadows are tinted with the neutral ramp, never neutral black — untinted
-       black over a tinted surface reads as dirt. Two layers: a tight contact
-       shadow plus a wide ambient one. */
     --pinfold-shadow-color: var(--pinfold-neutral-900);
     --pinfold-shadow-xs: 0 1px 1px color-mix(in oklch, var(--pinfold-shadow-color) 5%, transparent);
     --pinfold-shadow-sm:
@@ -232,30 +174,17 @@
     --pinfold-shadow-xl:
       0 8px 16px -4px color-mix(in oklch, var(--pinfold-shadow-color) 10%, transparent),
       0 32px 72px -20px color-mix(in oklch, var(--pinfold-shadow-color) 18%, transparent);
-
-    /* Hairline highlight along the top edge of a raised surface. The detail that
-       separates "a box" from "a surface". */
     --pinfold-highlight: inset 0 1px 0 color-mix(in oklch, oklch(1 0 0) 60%, transparent);
-
-    /* Hooks for style packs (packs.css). Defaults are neutral: no blur, no texture. */
     --pinfold-border-width: 1px;
     --pinfold-backdrop: none;
     --pinfold-texture: none;
-
-    /* ---------------------------------------------------------------- focus */
     --pinfold-focus-width: 2px;
     --pinfold-focus-offset: 2px;
-    /* Two-tone ring: a gap in the page colour, then the ring. Stays visible on
-       any surface, including one that matches the ring hue. */
     --pinfold-focus-ring:
       0 0 0 var(--pinfold-focus-offset) var(--pinfold-color-bg),
       0 0 0 calc(var(--pinfold-focus-offset) + var(--pinfold-focus-width)) var(--pinfold-color-ring);
-
-    /* ---------------------------------------------------------------- shape */
     --pinfold-radius-scale: 1;
     --pinfold-radius-full: 9999px;
-
-    /* -------------------------------------------------------------- spacing */
     --pinfold-space-1: 0.25rem;
     --pinfold-space-2: 0.5rem;
     --pinfold-space-3: 0.75rem;
@@ -264,12 +193,9 @@
     --pinfold-space-6: 1.5rem;
     --pinfold-space-8: 2rem;
     --pinfold-space-10: 2.5rem;
-
-    /* ----------------------------------------------------------- typography */
     --pinfold-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
       "Helvetica Neue", Arial, sans-serif;
     --pinfold-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
-    /* Fluid type: grows gently with the viewport, never below the floor or past the cap. */
     --pinfold-text-xs: 0.75rem;
     --pinfold-text-sm: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
     --pinfold-text-md: clamp(0.9375rem, 0.91rem + 0.12vw, 1rem);
@@ -280,23 +206,16 @@
     --pinfold-weight-normal: 400;
     --pinfold-weight-medium: 500;
     --pinfold-weight-semibold: 600;
-    /* Larger text needs tighter tracking to look optically even. */
     --pinfold-tracking-tight: -0.011em;
     --pinfold-tracking-normal: 0em;
     --pinfold-tracking-wide: 0.02em;
-
-    /* --------------------------------------------------------------- motion */
     --pinfold-duration-fast: 120ms;
     --pinfold-duration-md: 200ms;
     --pinfold-duration-slow: 320ms;
-    /* Decelerating curve — fast start, soft landing. Reads as responsive. */
     --pinfold-ease: cubic-bezier(0.32, 0.72, 0, 1);
     --pinfold-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
     --pinfold-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
-    /* One gentle overshoot, for things that appear rather than move. */
     --pinfold-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
-
-    /* ---------------------------------------------------------------- layer */
     --pinfold-z-dropdown: 1000;
     --pinfold-z-sticky: 1100;
     --pinfold-z-overlay: 1200;
@@ -304,9 +223,6 @@
     --pinfold-z-toast: 1400;
     --pinfold-z-tooltip: 1500;
   }
-
-  /* Dark palette. Only the semantic layer flips — the ramps stay identical, so a
-     consumer who overrode `--pinfold-primary-500` keeps their brand in both themes. */
   @media (prefers-color-scheme: dark) {
     :root:not([data-pinfold-theme="light"]) {
       --pinfold-color-bg: var(--pinfold-neutral-950);
@@ -320,12 +236,10 @@
       --pinfold-color-text-muted: var(--pinfold-neutral-400);
       --pinfold-color-text-subtle: var(--pinfold-neutral-500);
       --pinfold-color-text-disabled: var(--pinfold-neutral-600);
-      /* Dark surfaces need a lighter, slightly less saturated accent to hold
-         contrast without glowing. */
-      --pinfold-color-accent: var(--pinfold-accent-400);
-      --pinfold-color-accent-hover: var(--pinfold-accent-300);
+      --pinfold-color-accent: var(--pinfold-primary-400);
+      --pinfold-color-accent-hover: var(--pinfold-primary-300);
       --pinfold-color-accent-contrast: var(--pinfold-neutral-950);
-      --pinfold-color-ring: var(--pinfold-accent-400);
+      --pinfold-color-ring: var(--pinfold-primary-400);
       --pinfold-shadow-color: oklch(0 0 0);
       --pinfold-shadow-xs: 0 1px 1px color-mix(in oklch, var(--pinfold-shadow-color) 30%, transparent);
       --pinfold-shadow-sm:
@@ -343,7 +257,6 @@
       --pinfold-highlight: inset 0 1px 0 color-mix(in oklch, oklch(1 0 0) 8%, transparent);
     }
   }
-
   [data-pinfold-theme="dark"] {
     color-scheme: dark;
     --pinfold-color-bg: var(--pinfold-neutral-950);
@@ -357,10 +270,10 @@
     --pinfold-color-text-muted: var(--pinfold-neutral-400);
     --pinfold-color-text-subtle: var(--pinfold-neutral-500);
     --pinfold-color-text-disabled: var(--pinfold-neutral-600);
-    --pinfold-color-accent: var(--pinfold-accent-400);
-    --pinfold-color-accent-hover: var(--pinfold-accent-300);
+    --pinfold-color-accent: var(--pinfold-primary-400);
+    --pinfold-color-accent-hover: var(--pinfold-primary-300);
     --pinfold-color-accent-contrast: var(--pinfold-neutral-950);
-    --pinfold-color-ring: var(--pinfold-accent-400);
+    --pinfold-color-ring: var(--pinfold-primary-400);
     --pinfold-shadow-color: oklch(0 0 0);
     --pinfold-shadow-xs: 0 1px 1px color-mix(in oklch, var(--pinfold-shadow-color) 30%, transparent);
     --pinfold-shadow-sm:
@@ -376,7 +289,6 @@
       0 8px 16px -4px color-mix(in oklch, var(--pinfold-shadow-color) 55%, transparent),
       0 32px 72px -20px color-mix(in oklch, var(--pinfold-shadow-color) 60%, transparent);
     --pinfold-highlight: inset 0 1px 0 color-mix(in oklch, oklch(1 0 0) 8%, transparent);
-    /* Derived tokens, recomputed here so nested sections get their own. */
     --pinfold-color-surface-hover: color-mix(in oklch, var(--pinfold-color-accent) 6%, var(--pinfold-color-surface));
     --pinfold-color-surface-active: color-mix(in oklch, var(--pinfold-color-accent) 11%, var(--pinfold-color-surface));
     --pinfold-color-surface-selected: color-mix(in oklch, var(--pinfold-color-accent) 14%, var(--pinfold-color-surface));
@@ -387,10 +299,6 @@
     --pinfold-focus-ring: 0 0 0 var(--pinfold-focus-offset) var(--pinfold-color-bg),
       0 0 0 calc(var(--pinfold-focus-offset) + var(--pinfold-focus-width)) var(--pinfold-color-ring);
   }
-
-  /* An explicit light section, e.g. inside a dark page. Mirrors every property the dark
-     palette flips, with the :root values; ramps are never redeclared, so a custom
-     palette still reaches it. */
   [data-pinfold-theme="light"] {
     color-scheme: light;
     --pinfold-color-bg: var(--pinfold-neutral-50);
@@ -404,10 +312,10 @@
     --pinfold-color-text-muted: var(--pinfold-neutral-600);
     --pinfold-color-text-subtle: var(--pinfold-neutral-500);
     --pinfold-color-text-disabled: var(--pinfold-neutral-400);
-    --pinfold-color-accent: var(--pinfold-accent-600);
-    --pinfold-color-accent-hover: var(--pinfold-accent-700);
+    --pinfold-color-accent: var(--pinfold-primary-600);
+    --pinfold-color-accent-hover: var(--pinfold-primary-700);
     --pinfold-color-accent-contrast: oklch(1 0 0);
-    --pinfold-color-ring: var(--pinfold-accent-500);
+    --pinfold-color-ring: var(--pinfold-primary-500);
     --pinfold-shadow-color: var(--pinfold-neutral-900);
     --pinfold-shadow-xs: 0 1px 1px color-mix(in oklch, var(--pinfold-shadow-color) 5%, transparent);
     --pinfold-shadow-sm: 0 1px 2px color-mix(in oklch, var(--pinfold-shadow-color) 6%, transparent),
@@ -419,7 +327,6 @@
     --pinfold-shadow-xl: 0 8px 16px -4px color-mix(in oklch, var(--pinfold-shadow-color) 10%, transparent),
       0 32px 72px -20px color-mix(in oklch, var(--pinfold-shadow-color) 18%, transparent);
     --pinfold-highlight: inset 0 1px 0 color-mix(in oklch, oklch(1 0 0) 60%, transparent);
-    /* Derived tokens, recomputed here so nested sections get their own. */
     --pinfold-color-surface-hover: color-mix(in oklch, var(--pinfold-color-accent) 6%, var(--pinfold-color-surface));
     --pinfold-color-surface-active: color-mix(in oklch, var(--pinfold-color-accent) 11%, var(--pinfold-color-surface));
     --pinfold-color-surface-selected: color-mix(in oklch, var(--pinfold-color-accent) 14%, var(--pinfold-color-surface));
@@ -430,10 +337,6 @@
     --pinfold-focus-ring: 0 0 0 var(--pinfold-focus-offset) var(--pinfold-color-bg),
       0 0 0 calc(var(--pinfold-focus-offset) + var(--pinfold-focus-width)) var(--pinfold-color-ring);
   }
-
-  /* The radius scale is a multiplier, so the radii are recomputed wherever it can change:
-     on :root, on a radius preset and on a style pack. (A custom property inherits its
-     computed value; redeclaring only the scale further down would change nothing.) */
   :root,
   [data-pinfold-radius],
   [data-pinfold-style] {
@@ -444,20 +347,14 @@
     --pinfold-radius-xl: calc(1rem * var(--pinfold-radius-scale));
     --pinfold-radius-2xl: calc(1.5rem * var(--pinfold-radius-scale));
   }
-
-  /* Radius presets, set by the CLI or by <PinfoldProvider radius>. */
   [data-pinfold-radius="none"] { --pinfold-radius-scale: 0; }
   [data-pinfold-radius="sm"] { --pinfold-radius-scale: 0.6; }
   [data-pinfold-radius="md"] { --pinfold-radius-scale: 1; }
   [data-pinfold-radius="lg"] { --pinfold-radius-scale: 1.5; }
   [data-pinfold-radius="full"] { --pinfold-radius-scale: 2.4; }
-
-  /* Density presets scale spacing without touching type size. */
   [data-pinfold-density="compact"] { --pinfold-density: 0.8; }
   [data-pinfold-density="comfortable"] { --pinfold-density: 1; }
   [data-pinfold-density="spacious"] { --pinfold-density: 1.25; }
-
-  /* Browsers without color-mix get flat approximations rather than nothing. */
   @supports not (color: color-mix(in oklch, red, blue)) {
     :root {
       --pinfold-color-surface-hover: var(--pinfold-neutral-100);
@@ -473,31 +370,17 @@
       --pinfold-highlight: none;
     }
   }
-
 }
 
-/* Pinfold — accordion.
-
-   Two-layer variables: the `size` preset writes the `*-base` vars, and the
-   `dimensions` config writes `--pinfold-accordion-*` which wins through the
-   var() fallback. Overriding one measurement keeps the preset for the rest.
-
-   Nothing clips. Rounded rows give their trigger the matching radius instead
-   of relying on `overflow: hidden`, because a clipping ancestor would also cut
-   off the focus ring. Collapse is pure CSS (`grid-template-rows`) — no height
-   measurement, no ResizeObserver, no layout thrash. */
 
 @layer pinfold.components {
-
   .pinfold-accordion {
-    /* preset layer (set by [data-size]) */
     --pinfold-acc-pad-x-base: var(--pinfold-space-4);
-    --pinfold-acc-pad-y-base: var(--pinfold-space-3);
+    --pinfold-acc-pad-y-base: var(--pinfold-space-4);
     --pinfold-acc-font-base: var(--pinfold-text-md);
-    --pinfold-acc-radius-base: var(--pinfold-radius-lg);
+    --pinfold-acc-radius-unit: 0.75rem;
+    --pinfold-acc-radius-base: calc(var(--pinfold-acc-radius-unit) * var(--pinfold-radius-scale, 1));
     --pinfold-acc-gap-base: 0px;
-
-    /* config layer (set by `dimensions`) */
     --pinfold-acc-pad-x: var(--pinfold-accordion-padding-x, var(--pinfold-acc-pad-x-base));
     --pinfold-acc-pad-y: var(--pinfold-accordion-padding-y, var(--pinfold-acc-pad-y-base));
     --pinfold-acc-panel-pad-x: var(--pinfold-accordion-panel-padding-x, var(--pinfold-acc-pad-x));
@@ -511,53 +394,43 @@
     --pinfold-acc-gap: var(--pinfold-accordion-gap, var(--pinfold-acc-gap-base));
     --pinfold-acc-border: var(--pinfold-accordion-border-width, var(--pinfold-border-width));
     --pinfold-acc-duration: var(--pinfold-accordion-duration, var(--pinfold-duration-md));
-
     --pinfold-acc-accent: var(--pinfold-color-accent);
-    --pinfold-acc-item-radius: 0px;
-
+    --pinfold-acc-item-radius: var(--pinfold-accordion-item-radius, 0px);
     display: flex;
     flex-direction: column;
     gap: var(--pinfold-acc-gap);
-    /* Responds to its own width, not the viewport (see "responsive" below). */
     container: pinfold-accordion / inline-size;
     width: var(--pinfold-accordion-width, 100%);
     min-width: var(--pinfold-accordion-min-width, 0);
     max-width: var(--pinfold-accordion-max-width, none);
     height: var(--pinfold-accordion-height, auto);
     max-height: var(--pinfold-accordion-max-height, none);
+    border-radius: var(--pinfold-acc-radius);
     font-size: var(--pinfold-acc-font);
     letter-spacing: var(--pinfold-tracking-tight);
     color: var(--pinfold-color-text);
   }
-
-  /* `dimensions.maxHeight` caps the root and scrolls the rows. */
   .pinfold-accordion[data-clamp] {
     overflow-y: auto;
     overscroll-behavior: contain;
   }
-
-  /* ------------------------------------------------------------------ sizes */
   .pinfold-accordion[data-size='sm'] {
     --pinfold-acc-pad-x-base: var(--pinfold-space-3);
-    --pinfold-acc-pad-y-base: var(--pinfold-space-2);
+    --pinfold-acc-pad-y-base: var(--pinfold-space-3);
     --pinfold-acc-font-base: var(--pinfold-text-sm);
-    --pinfold-acc-radius-base: var(--pinfold-radius-md);
+    --pinfold-acc-radius-unit: 0.5rem;
   }
   .pinfold-accordion[data-size='lg'] {
     --pinfold-acc-pad-x-base: var(--pinfold-space-5);
-    --pinfold-acc-pad-y-base: var(--pinfold-space-4);
+    --pinfold-acc-pad-y-base: var(--pinfold-space-5);
     --pinfold-acc-font-base: var(--pinfold-text-lg);
-    --pinfold-acc-radius-base: var(--pinfold-radius-xl);
+    --pinfold-acc-radius-unit: 1rem;
   }
-
-  /* ------------------------------------------------------------------ tones */
   .pinfold-accordion[data-tone='neutral'] { --pinfold-acc-accent: var(--pinfold-color-text); }
   .pinfold-accordion[data-tone='success'] { --pinfold-acc-accent: var(--pinfold-success-500); }
   .pinfold-accordion[data-tone='warning'] { --pinfold-acc-accent: var(--pinfold-warning-500); }
   .pinfold-accordion[data-tone='danger'] { --pinfold-acc-accent: var(--pinfold-danger-500); }
   .pinfold-accordion[data-tone='info'] { --pinfold-acc-accent: var(--pinfold-info-500); }
-
-  /* ------------------------------------------------------------------- item */
   .pinfold-accordion__item {
     position: relative;
     border-radius: var(--pinfold-acc-item-radius);
@@ -566,125 +439,89 @@
   .pinfold-accordion__trigger {
     border-radius: inherit;
   }
-
-  /* Accent edge on the open row. Scales from the centre, so it reads as the row
-     opening rather than a bar appearing. */
-  .pinfold-accordion__item::before {
+  .pinfold-accordion[data-dividers]:is([data-variant='solid'], [data-variant='outline'], [data-variant='ghost'], [data-joined])
+    .pinfold-accordion__item + .pinfold-accordion__item::before {
     content: '';
     position: absolute;
-    inset-block: 0;
-    inset-inline-start: 0;
-    width: 2px;
-    background: var(--pinfold-acc-accent);
-    border-start-start-radius: inherit;
-    border-end-start-radius: inherit;
-    transform: scaleY(0);
-    opacity: 0;
-    transition: transform var(--pinfold-acc-duration) var(--pinfold-ease-out),
-      opacity var(--pinfold-duration-fast) linear;
+    inset-block-start: calc(var(--pinfold-acc-gap) / -2);
+    inset-inline: var(--pinfold-acc-divider-inset, 0);
+    border-top: var(--pinfold-acc-border) solid var(--pinfold-accordion-divider-color, var(--pinfold-color-border));
     pointer-events: none;
   }
-  .pinfold-accordion__item[data-state='open']::before {
-    transform: scaleY(1);
-    opacity: 1;
-  }
-  /* Bordered rows already signal state through the border; the bar would double up. */
-  .pinfold-accordion[data-variant='outline'] .pinfold-accordion__item::before,
-  .pinfold-accordion[data-variant='separated'] .pinfold-accordion__item::before {
-    content: none;
+  .pinfold-accordion:is([data-variant='solid'], [data-variant='outline']) {
+    --pinfold-acc-divider-inset: var(--pinfold-acc-pad-x);
+    border: var(--pinfold-acc-border) solid var(--pinfold-color-border);
   }
-
-  /* --------------------------------------------------------------- variants */
-  /* solid — one card, hairline-divided rows. Corners are rounded on the parts
-     that touch them rather than clipped off the container. */
   .pinfold-accordion[data-variant='solid'] {
     background: var(--pinfold-color-surface);
     background-image: var(--pinfold-texture);
     -webkit-backdrop-filter: var(--pinfold-backdrop);
     backdrop-filter: var(--pinfold-backdrop);
-    border: var(--pinfold-acc-border) solid var(--pinfold-color-border);
-    border-radius: var(--pinfold-acc-radius);
-    box-shadow: var(--pinfold-shadow-sm), var(--pinfold-highlight);
-  }
-  .pinfold-accordion[data-variant='solid'][data-dividers] .pinfold-accordion__item + .pinfold-accordion__item {
-    border-top: var(--pinfold-acc-border) solid var(--pinfold-color-border);
+    box-shadow: var(--pinfold-shadow-md), var(--pinfold-highlight);
   }
-  .pinfold-accordion[data-variant='solid'] .pinfold-accordion__item:first-child .pinfold-accordion__trigger {
+  .pinfold-accordion:is([data-variant='solid'], [data-variant='outline']) .pinfold-accordion__item:first-child .pinfold-accordion__trigger {
     border-start-start-radius: var(--pinfold-acc-radius);
     border-start-end-radius: var(--pinfold-acc-radius);
   }
-  .pinfold-accordion[data-variant='solid'] .pinfold-accordion__item:last-child .pinfold-accordion__panel {
+  .pinfold-accordion:is([data-variant='solid'], [data-variant='outline']) .pinfold-accordion__item:last-child .pinfold-accordion__trigger[data-state='closed'] {
     border-end-start-radius: var(--pinfold-acc-radius);
     border-end-end-radius: var(--pinfold-acc-radius);
   }
-
-  /* outline — each row is its own bordered box */
-  .pinfold-accordion[data-variant='outline'] {
-    --pinfold-acc-gap-base: var(--pinfold-space-2);
-  }
-  .pinfold-accordion[data-variant='outline'] .pinfold-accordion__item {
-    --pinfold-acc-item-radius: var(--pinfold-acc-radius);
-    border: var(--pinfold-acc-border) solid var(--pinfold-color-border);
-    transition: border-color var(--pinfold-duration-md) var(--pinfold-ease);
-  }
-  .pinfold-accordion[data-variant='outline'] .pinfold-accordion__item[data-state='open'] {
-    border-color: var(--pinfold-color-border-accent);
-  }
-
-  /* separated — cards with air and elevation */
   .pinfold-accordion[data-variant='separated'] {
-    --pinfold-acc-gap-base: var(--pinfold-space-3);
+    --pinfold-acc-gap-base: var(--pinfold-space-2);
   }
   .pinfold-accordion[data-variant='separated'] .pinfold-accordion__item {
-    --pinfold-acc-item-radius: var(--pinfold-acc-radius);
+    --pinfold-acc-item-radius: var(--pinfold-accordion-item-radius, var(--pinfold-acc-radius));
     background: var(--pinfold-color-surface);
     background-image: var(--pinfold-texture);
     -webkit-backdrop-filter: var(--pinfold-backdrop);
     backdrop-filter: var(--pinfold-backdrop);
     border: var(--pinfold-acc-border) solid var(--pinfold-color-border);
     box-shadow: var(--pinfold-shadow-sm), var(--pinfold-highlight);
-    transition: box-shadow var(--pinfold-duration-md) var(--pinfold-ease),
-      border-color var(--pinfold-duration-md) var(--pinfold-ease),
-      transform var(--pinfold-duration-md) var(--pinfold-ease-out);
-  }
-  .pinfold-accordion[data-variant='separated'] .pinfold-accordion__item:hover {
-    box-shadow: var(--pinfold-shadow-md), var(--pinfold-highlight);
   }
-  .pinfold-accordion[data-variant='separated'] .pinfold-accordion__item[data-state='open'] {
-    border-color: var(--pinfold-color-border-accent);
-    box-shadow: var(--pinfold-shadow-md), var(--pinfold-highlight);
-  }
-
-  /* filled — tinted rows, no borders */
   .pinfold-accordion[data-variant='filled'] {
     --pinfold-acc-gap-base: var(--pinfold-space-2);
   }
   .pinfold-accordion[data-variant='filled'] .pinfold-accordion__item {
-    --pinfold-acc-item-radius: var(--pinfold-acc-radius);
+    --pinfold-acc-item-radius: var(--pinfold-accordion-item-radius, var(--pinfold-acc-radius));
     background: var(--pinfold-color-bg-subtle);
     background-image: var(--pinfold-texture);
     -webkit-backdrop-filter: var(--pinfold-backdrop);
     backdrop-filter: var(--pinfold-backdrop);
-    transition: background-color var(--pinfold-duration-md) var(--pinfold-ease);
   }
-  .pinfold-accordion[data-variant='filled'] .pinfold-accordion__item[data-state='open'] {
-    background-color: var(--pinfold-color-surface-selected);
+  .pinfold-accordion[data-joined] {
+    --pinfold-acc-divider-inset: var(--pinfold-acc-pad-x);
   }
-
-  /* ghost — text only, hover reveals the row */
-  .pinfold-accordion[data-variant='ghost'] .pinfold-accordion__item {
-    --pinfold-acc-item-radius: var(--pinfold-acc-radius);
+  .pinfold-accordion[data-joined] .pinfold-accordion__item {
+    --pinfold-acc-item-radius: 0px;
+  }
+  .pinfold-accordion[data-joined] .pinfold-accordion__item:first-child {
+    border-start-start-radius: var(--pinfold-acc-radius);
+    border-start-end-radius: var(--pinfold-acc-radius);
+  }
+  .pinfold-accordion[data-joined] .pinfold-accordion__item:last-child {
+    border-end-start-radius: var(--pinfold-acc-radius);
+    border-end-end-radius: var(--pinfold-acc-radius);
   }
-  .pinfold-accordion[data-variant='ghost'][data-dividers] .pinfold-accordion__item + .pinfold-accordion__item {
-    border-top: var(--pinfold-acc-border) solid var(--pinfold-color-border);
+  .pinfold-accordion[data-joined][data-variant='separated'] {
+    box-shadow: var(--pinfold-shadow-sm), var(--pinfold-highlight);
+  }
+  .pinfold-accordion[data-joined][data-variant='separated'] .pinfold-accordion__item {
+    box-shadow: none;
+  }
+  .pinfold-accordion[data-joined][data-variant='separated'] .pinfold-accordion__item:not(:last-child) {
+    border-bottom-width: 0;
+  }
+  .pinfold-accordion[data-joined][data-variant='separated'] .pinfold-accordion__item:not(:first-child) {
+    border-top-width: 0;
+  }
+  .pinfold-accordion[data-variant='ghost'] .pinfold-accordion__item {
+    --pinfold-acc-item-radius: var(--pinfold-accordion-item-radius, var(--pinfold-acc-radius));
   }
-
-  /* ----------------------------------------------------------------- header */
   .pinfold-accordion__header {
     display: flex;
     margin: 0;
   }
-
   .pinfold-accordion__trigger {
     display: flex;
     align-items: center;
@@ -696,44 +533,19 @@
     line-height: var(--pinfold-leading-tight);
     text-align: start;
     color: var(--pinfold-color-text);
-    transition: background-color var(--pinfold-duration-fast) var(--pinfold-ease),
-      color var(--pinfold-duration-fast) var(--pinfold-ease);
-  }
-
-  .pinfold-accordion__trigger:hover {
-    background: var(--pinfold-color-surface-hover);
-  }
-  .pinfold-accordion__trigger:active {
-    background: var(--pinfold-color-surface-active);
-  }
-
-  /* Text in the accent: pulled toward the text colour so every tone (500 steps included) clears
-     4.5:1 on every variant's open background, in light and dark mode (the a11y report checks). */
-  .pinfold-accordion__trigger[data-state='open'] {
-    color: color-mix(in oklch, var(--pinfold-acc-accent) 62%, var(--pinfold-color-text));
+    cursor: pointer;
   }
-
   .pinfold-accordion__trigger[data-disabled] {
     color: var(--pinfold-color-text-disabled);
     cursor: not-allowed;
   }
-  .pinfold-accordion__trigger[data-disabled]:hover,
-  .pinfold-accordion__trigger[data-disabled]:active {
-    background: none;
-  }
-
-  /* The ring is drawn by the core reset as a box-shadow; raise the focused row
-     so a neighbouring row's background cannot paint over it. */
   .pinfold-accordion__trigger:focus-visible {
     position: relative;
     z-index: 1;
   }
-
   .pinfold-accordion[data-indicator-position='start'] .pinfold-accordion__trigger {
     flex-direction: row-reverse;
   }
-
-  /* ------------------------------------------------------------------ parts */
   .pinfold-accordion__icon {
     display: inline-flex;
     flex: none;
@@ -743,7 +555,15 @@
     height: var(--pinfold-acc-icon);
     color: var(--pinfold-acc-accent);
   }
-
+  .pinfold-accordion__end-icon {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    width: var(--pinfold-acc-icon);
+    height: var(--pinfold-acc-icon);
+    color: var(--pinfold-color-text-muted);
+  }
   .pinfold-accordion__label {
     display: flex;
     flex: 1 1 auto;
@@ -751,13 +571,10 @@
     gap: 2px;
     min-width: 0;
   }
-
   .pinfold-accordion__title {
     font-size: var(--pinfold-acc-title);
     overflow-wrap: anywhere;
   }
-
-  /* Overflow policy per slot: wrap (default for titles), truncate, or clamp to n lines. */
   .pinfold-accordion [data-overflow='truncate'] {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -770,27 +587,22 @@
     line-clamp: var(--pinfold-lines, 2);
     overflow: hidden;
   }
-
   .pinfold-accordion__description {
     font-size: var(--pinfold-acc-desc);
     font-weight: var(--pinfold-weight-normal);
     letter-spacing: var(--pinfold-tracking-normal);
     color: var(--pinfold-color-text-muted);
   }
-
   .pinfold-accordion__badge {
     flex: none;
     padding: 2px var(--pinfold-space-2);
     font-size: var(--pinfold-text-xs);
     font-weight: var(--pinfold-weight-semibold);
     letter-spacing: var(--pinfold-tracking-wide);
-    /* Small text on a tint of its own colour: pulled halfway toward the text colour, so it
-       clears 4.5:1 in light and dark mode for every tone (checked by the a11y report). */
     color: color-mix(in oklch, var(--pinfold-acc-accent) 55%, var(--pinfold-color-text));
     background: color-mix(in oklch, var(--pinfold-acc-accent) 12%, transparent);
     border-radius: var(--pinfold-radius-full);
   }
-
   .pinfold-accordion__indicator {
     display: inline-flex;
     flex: none;
@@ -801,17 +613,22 @@
     transition: transform var(--pinfold-acc-duration) var(--pinfold-ease-out),
       color var(--pinfold-duration-fast) var(--pinfold-ease);
   }
-
-  .pinfold-accordion__trigger:hover .pinfold-accordion__indicator {
-    color: var(--pinfold-color-text-muted);
+  .pinfold-accordion__trigger:not([data-disabled]):hover .pinfold-accordion__indicator {
+    color: var(--pinfold-color-text);
   }
-
   .pinfold-accordion__trigger[data-state='open'] .pinfold-accordion__indicator {
     color: var(--pinfold-acc-accent);
     transform: rotate(180deg);
   }
-
-  /* The plus glyph morphs into a minus instead of spinning. */
+  .pinfold-accordion[data-static-indicator] .pinfold-accordion__trigger .pinfold-accordion__indicator {
+    transform: none;
+  }
+  .pinfold-accordion[data-static-indicator] .pinfold-accordion__indicator-bar {
+    transition: none;
+  }
+  .pinfold-accordion:not([data-animate]) :is(.pinfold-accordion__indicator, .pinfold-accordion__indicator-bar) {
+    transition: none;
+  }
   .pinfold-accordion__indicator .pinfold-accordion__indicator-bar {
     transform-origin: center;
     transition: opacity var(--pinfold-acc-duration) var(--pinfold-ease),
@@ -825,8 +642,6 @@
     opacity: 0;
     transform: rotate(90deg);
   }
-
-  /* ------------------------------------------------------------------ panel */
   .pinfold-accordion__panel {
     display: grid;
     grid-template-rows: 1fr;
@@ -835,21 +650,13 @@
     line-height: var(--pinfold-leading-normal);
     letter-spacing: var(--pinfold-tracking-normal);
   }
-
   .pinfold-accordion__panel[data-state='closed'] {
     grid-template-rows: 0fr;
-    /* Takes closed content out of the accessibility tree and the tab order once
-       the collapse finishes. */
     visibility: hidden;
   }
-
-  /* Find-in-page: once the inner box carries hidden="until-found", the browser
-     owns its visibility (content-visibility), so the panel itself must stay
-     visible for matches to be found. Before hydration the rule above applies. */
   .pinfold-accordion__panel[data-state='closed']:has(> [hidden='until-found']) {
     visibility: visible;
   }
-
   .pinfold-accordion[data-animate] .pinfold-accordion__panel {
     transition: grid-template-rows var(--pinfold-acc-duration) var(--pinfold-ease-out),
       visibility 0s linear 0s;
@@ -858,14 +665,10 @@
     transition: grid-template-rows var(--pinfold-acc-duration) var(--pinfold-ease),
       visibility 0s linear var(--pinfold-acc-duration);
   }
-
   .pinfold-accordion__panel-inner {
     min-height: 0;
     overflow: hidden;
   }
-
-  /* Content settles in slightly behind the row opening — the lag is what makes
-     the motion read as physical rather than mechanical. */
   .pinfold-accordion[data-animate] .pinfold-accordion__content {
     opacity: 0;
     transform: translateY(-4px);
@@ -877,153 +680,100 @@
     transform: none;
     transition-delay: calc(var(--pinfold-acc-duration) * 0.35);
   }
-
-  /* `dimensions.panelMaxHeight` caps the open panel and scrolls the rest. */
   .pinfold-accordion[data-scroll] .pinfold-accordion__panel[data-state='open'] .pinfold-accordion__panel-inner {
     max-height: var(--pinfold-accordion-panel-max-height);
     overflow-y: auto;
     overscroll-behavior: contain;
   }
-
   .pinfold-accordion__content {
     padding: 0 var(--pinfold-acc-panel-pad-x) var(--pinfold-acc-panel-pad-y);
   }
-
   .pinfold-accordion[data-indicator-position='start'] .pinfold-accordion__content {
     padding-inline-start: calc(var(--pinfold-acc-panel-pad-x) + var(--pinfold-acc-icon) + var(--pinfold-space-3));
   }
-
-  /* ------------------------------------------------------------- responsive */
-  /* Narrow containers: the badge drops under the title so the title keeps its
-     width; the indicator stays on the first line. */
   @container pinfold-accordion (max-width: 26rem) {
     .pinfold-accordion__trigger {
       flex-wrap: wrap;
       row-gap: var(--pinfold-space-1);
     }
-    /* Leaves room for the icon and indicator only, so the badge must wrap. */
     .pinfold-accordion__label {
       flex-basis: calc(100% - 4.5em);
     }
     .pinfold-accordion__indicator {
       order: 1;
     }
-    .pinfold-accordion__badge {
+    .pinfold-accordion__badge,
+    .pinfold-accordion__end-icon {
       order: 2;
+    }
+    .pinfold-accordion__badge,
+    .pinfold-accordion__trigger:not(:has(.pinfold-accordion__badge)) .pinfold-accordion__end-icon {
       margin-inline-start: calc(var(--pinfold-acc-icon) + var(--pinfold-space-3));
     }
-    .pinfold-accordion__trigger:not(:has(.pinfold-accordion__icon)) .pinfold-accordion__badge {
+    .pinfold-accordion__trigger:not(:has(.pinfold-accordion__icon)) :is(.pinfold-accordion__badge, .pinfold-accordion__end-icon) {
       margin-inline-start: 0;
     }
   }
-
-  /* Touch: every trigger is at least 44px tall (WCAG 2.5.5 / 2.5.8). */
   @media (pointer: coarse) {
     .pinfold-accordion__trigger {
       min-height: 44px;
     }
   }
-
   @supports not (color: color-mix(in oklch, red, blue)) {
     .pinfold-accordion__badge {
       background: var(--pinfold-color-bg-subtle);
     }
   }
-
 }
 
-/* Pinfold — style packs.
-
-     import '@pinfold/css/core.css';
-     import '@pinfold/css/packs.css';
-     <PinfoldProvider stylePack="glass">   (or data-pinfold-style="glass" on any element)
-
-   A pack is only a token recipe: it re-points shape, depth, border, surface and
-   type tokens, so every component follows it with no per-component CSS.
-   Colour roles are untouched, so text contrast comes from the palette, which
-   is contrast-checked (see packs.test.ts).
-
-   Every pack yields to the user:
-   - prefers-reduced-transparency: no translucency, no blur.
-   - prefers-contrast: more: opaque surfaces, full-strength borders, no texture.
-   - forced-colors: system colours take over; decorative layers are dropped.
-
-   Packs sit in their own layer after the tokens, so they override the tokens
-   but never beat your own unlayered CSS. */
 
 @layer pinfold.tokens, pinfold.reset, pinfold.components, pinfold.packs;
-
 @layer pinfold.packs {
-
-  /* ------------------------------------------------------------------ glass */
-  /* Frosted, translucent surfaces over whatever is behind them. */
   [data-pinfold-style='glass'] {
-    --pinfold-color-surface: color-mix(in oklch, var(--pinfold-color-bg) 68%, transparent);
-    --pinfold-color-bg-subtle: color-mix(in oklch, var(--pinfold-color-bg) 62%, transparent);
+    --pinfold-color-surface: color-mix(in oklch, color-mix(in oklch, var(--pinfold-color-accent) 6%, var(--pinfold-color-bg)) 66%, transparent);
+    --pinfold-color-bg-subtle: color-mix(in oklch, color-mix(in oklch, var(--pinfold-color-accent) 10%, var(--pinfold-color-bg)) 62%, transparent);
     --pinfold-color-border: color-mix(in oklch, var(--pinfold-color-text) 12%, transparent);
-    --pinfold-backdrop: blur(18px) saturate(1.6);
-    --pinfold-highlight: inset 0 1px 0 color-mix(in oklch, oklch(1 0 0) 40%, transparent);
+    --pinfold-backdrop: blur(20px) saturate(1.8);
+    --pinfold-highlight: inset 0 1px 0 color-mix(in oklch, oklch(1 0 0) 35%, transparent),
+      inset 0 0 0 1px color-mix(in oklch, oklch(1 0 0) 6%, transparent);
+    --pinfold-shadow-sm: 0 8px 24px -12px color-mix(in oklch, var(--pinfold-color-accent) 30%, transparent);
+    --pinfold-shadow-md: 0 16px 40px -16px color-mix(in oklch, var(--pinfold-color-accent) 38%, transparent);
+    --pinfold-radius-scale: 1.5;
+  }
+  [data-pinfold-style='material'] {
+    --pinfold-color-surface: color-mix(in oklch, var(--pinfold-color-accent) 5%, var(--pinfold-color-bg));
+    --pinfold-color-bg-subtle: color-mix(in oklch, var(--pinfold-color-accent) 10%, var(--pinfold-color-bg));
+    --pinfold-color-border: color-mix(in oklch, var(--pinfold-color-text) 8%, transparent);
+    --pinfold-shadow-sm:
+      0 1px 2px color-mix(in oklch, var(--pinfold-shadow-color) 18%, transparent),
+      0 1px 3px 1px color-mix(in oklch, var(--pinfold-shadow-color) 8%, transparent);
+    --pinfold-shadow-md:
+      0 1px 2px color-mix(in oklch, var(--pinfold-shadow-color) 18%, transparent),
+      0 2px 6px 2px color-mix(in oklch, var(--pinfold-shadow-color) 9%, transparent);
+    --pinfold-highlight: 0 0 0 0 transparent;
     --pinfold-radius-scale: 1.4;
   }
-
-  /* ---------------------------------------------------------------- bauhaus */
-  /* Geometry and primaries: square corners, heavy rules, offset colour blocks. */
-  [data-pinfold-style='bauhaus'] {
-    --pinfold-radius-scale: 0;
-    --pinfold-border-width: 2px;
-    --pinfold-color-border: var(--pinfold-color-text);
-    --pinfold-color-border-accent: var(--pinfold-color-accent);
-    --pinfold-shadow-sm: 4px 4px 0 var(--pinfold-color-accent);
-    --pinfold-shadow-md: 6px 6px 0 var(--pinfold-color-accent);
-    --pinfold-highlight: 0 0 0 0 transparent;
-    --pinfold-font-sans: Futura, 'Century Gothic', 'Avenir Next', ui-sans-serif, system-ui, sans-serif;
-    --pinfold-tracking-tight: 0em;
+  [data-pinfold-style='noise'] {
+    --pinfold-texture: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0.16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+    --pinfold-color-bg-subtle: color-mix(in oklch, var(--pinfold-color-accent) 6%, var(--pinfold-color-surface));
   }
-
-  /* -------------------------------------------------------------- brutalist */
-  /* Raw and loud: monospace, thick black rules, hard shadows, no rounding. */
   [data-pinfold-style='brutalist'] {
-    --pinfold-radius-scale: 0;
-    --pinfold-border-width: 3px;
+    --pinfold-radius-scale: 0.5;
+    --pinfold-border-width: 2px;
     --pinfold-color-border: var(--pinfold-color-text);
     --pinfold-color-border-accent: var(--pinfold-color-text);
-    --pinfold-shadow-sm: 5px 5px 0 var(--pinfold-color-text);
-    --pinfold-shadow-md: 8px 8px 0 var(--pinfold-color-text);
+    --pinfold-color-bg-subtle: color-mix(in oklch, var(--pinfold-color-accent) 14%, var(--pinfold-color-surface));
+    --pinfold-shadow-sm: 3px 3px 0 var(--pinfold-color-accent);
+    --pinfold-shadow-md: 5px 5px 0 var(--pinfold-color-accent);
     --pinfold-highlight: 0 0 0 0 transparent;
-    --pinfold-color-surface-hover: color-mix(in oklch, var(--pinfold-color-accent) 18%, var(--pinfold-color-surface));
-    --pinfold-font-sans: var(--pinfold-font-mono);
-    --pinfold-tracking-tight: 0em;
-  }
-
-  /* ------------------------------------------------------------------ noise */
-  /* Print-like grain on every surface. The texture is a 2 kB SVG, no request. */
-  [data-pinfold-style='noise'] {
-    --pinfold-texture: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
-    --pinfold-radius-scale: 0.8;
-  }
-
-  /* ------------------------------------------------------------------- soft */
-  /* Pillowy: generous rounding, no hard borders, wide diffused shadows. */
-  [data-pinfold-style='soft'] {
-    --pinfold-radius-scale: 1.75;
-    --pinfold-color-border: color-mix(in oklch, var(--pinfold-color-text) 6%, transparent);
-    --pinfold-shadow-sm:
-      0 2px 6px -2px color-mix(in oklch, var(--pinfold-shadow-color) 8%, transparent),
-      0 12px 32px -14px color-mix(in oklch, var(--pinfold-shadow-color) 22%, transparent);
-    --pinfold-shadow-md:
-      0 4px 10px -3px color-mix(in oklch, var(--pinfold-shadow-color) 10%, transparent),
-      0 20px 48px -18px color-mix(in oklch, var(--pinfold-shadow-color) 28%, transparent);
   }
-
-  /* ------------------------------------------------------- user preferences */
   @media (prefers-reduced-transparency: reduce) {
     [data-pinfold-style='glass'] {
-      --pinfold-color-surface: var(--pinfold-color-bg);
-      --pinfold-color-bg-subtle: var(--pinfold-neutral-100);
+      --pinfold-color-surface: color-mix(in oklch, var(--pinfold-color-accent) 6%, var(--pinfold-color-bg));
+      --pinfold-color-bg-subtle: color-mix(in oklch, var(--pinfold-color-accent) 10%, var(--pinfold-color-bg));
       --pinfold-backdrop: none;
     }
   }
-
   @media (prefers-contrast: more) {
     [data-pinfold-style] {
       --pinfold-color-surface: var(--pinfold-color-bg);
@@ -1032,12 +782,10 @@
       --pinfold-texture: none;
     }
   }
-
   @media (forced-colors: active) {
     [data-pinfold-style] {
       --pinfold-backdrop: none;
       --pinfold-texture: none;
     }
   }
-
 }