feat: add 7 new plugins with snippet-based architecture

snippets/design-tokens/categories/border-radius.md

@@ -0,0 +1,26 @@
+/* Border radius scale */
+@theme {
+  --radius-none: 0;
+  --radius-xs: 0.125rem;   /* 2px — sharp, subtle rounding */
+  --radius-sm: 0.25rem;    /* 4px — inputs, tags */
+  --radius-md: 0.375rem;   /* 6px — buttons, cards */
+  --radius-lg: 0.5rem;     /* 8px — modals, large cards */
+  --radius-xl: 0.75rem;    /* 12px — feature cards */
+  --radius-2xl: 1rem;      /* 16px — large containers */
+  --radius-3xl: 1.5rem;    /* 24px — hero sections */
+  --radius-full: 9999px;   /* pill */
+}
+
+/* Semantic radius tokens */
+:root {
+  --radius-btn: var(--radius-md);      /* 6px */
+  --radius-input: var(--radius-sm);    /* 4px */
+  --radius-card: var(--radius-lg);     /* 8px */
+  --radius-card-feature: var(--radius-xl); /* 12px */
+  --radius-modal: var(--radius-xl);    /* 12px */
+  --radius-badge: var(--radius-full);  /* pill */
+  --radius-tag: var(--radius-sm);      /* 4px */
+  --radius-tooltip: var(--radius-sm);  /* 4px */
+  --radius-popover: var(--radius-lg);  /* 8px */
+  --radius-avatar: var(--radius-full); /* circular */
+}

snippets/design-tokens/categories/colors.md

@@ -0,0 +1,51 @@
+/* Layer 1 – Primitives (@theme) */
+@theme {
+  --color-brand-50: oklch(0.97 0.02 291);
+  --color-brand-100: oklch(0.94 0.04 291);
+  --color-brand-200: oklch(0.88 0.06 291);
+  --color-brand-300: oklch(0.78 0.09 291);
+  --color-brand-400: oklch(0.70 0.12 291);
+  --color-brand-500: oklch(0.62 0.14 291);
+  --color-brand-600: oklch(0.54 0.14 291);
+  --color-brand-700: oklch(0.46 0.13 291);
+  --color-brand-800: oklch(0.38 0.11 291);
+  --color-brand-900: oklch(0.28 0.08 291);
+  --color-brand-950: oklch(0.18 0.05 291);
+}
+
+/* Layer 2 – Semantics (:root / .dark) */
+:root {
+  --color-bg: var(--color-neutral-50);
+  --color-bg-subtle: var(--color-neutral-100);
+  --color-surface: #ffffff;
+  --color-border: var(--color-neutral-200);
+  --color-border-strong: var(--color-neutral-300);
+  --color-text: var(--color-neutral-900);
+  --color-text-muted: var(--color-neutral-500);
+  --color-primary: var(--color-brand-500);
+  --color-primary-hover: var(--color-brand-600);
+  --color-primary-fg: #ffffff;
+}
+
+.dark {
+  --color-bg: oklch(0.18 0.008 265);
+  --color-bg-subtle: oklch(0.21 0.008 265);
+  --color-surface: oklch(0.24 0.008 265);
+  --color-border: oklch(0.30 0.008 265);
+  --color-border-strong: oklch(0.36 0.008 265);
+  --color-text: oklch(0.94 0.008 265);
+  --color-text-muted: oklch(0.60 0.008 265);
+  --color-primary: var(--color-brand-400);
+  --color-primary-hover: var(--color-brand-300);
+  --color-primary-fg: oklch(0.18 0.005 291);
+}
+
+/* Layer 3 – @theme inline (bridges CSS vars to Tailwind utilities) */
+@theme inline {
+  --color-background: var(--color-bg);
+  --color-foreground: var(--color-text);
+  --color-primary: var(--color-primary);
+  --color-primary-foreground: var(--color-primary-fg);
+  --color-border: var(--color-border);
+  --color-muted: var(--color-text-muted);
+}

snippets/design-tokens/categories/component-sizing.md

@@ -0,0 +1,76 @@
+/* Component sizing tokens */
+:root {
+  /* Touch targets (WCAG 2.5.5) */
+  --size-touch-min: 44px;         /* WCAG minimum */
+  --size-touch-comfortable: 48px; /* recommended */
+
+  /* Button sizes */
+  --btn-h-xs: 1.75rem;    /* 28px */
+  --btn-h-sm: 2rem;       /* 32px */
+  --btn-h-md: 2.5rem;     /* 40px */
+  --btn-h-lg: 2.75rem;    /* 44px — matches touch-min */
+  --btn-h-xl: 3.25rem;    /* 52px */
+
+  --btn-px-xs: 0.625rem;  /* 10px */
+  --btn-px-sm: 0.875rem;  /* 14px */
+  --btn-px-md: 1rem;      /* 16px */
+  --btn-px-lg: 1.25rem;   /* 20px */
+  --btn-px-xl: 1.75rem;   /* 28px */
+
+  --btn-text-xs: 0.6875rem; /* 11px */
+  --btn-text-sm: 0.8125rem; /* 13px */
+  --btn-text-md: 0.9375rem; /* 15px */
+  --btn-text-lg: 1rem;      /* 16px */
+  --btn-text-xl: 1.0625rem; /* 17px */
+
+  /* Input sizes */
+  --input-h-sm: 2rem;      /* 32px */
+  --input-h-md: 2.5rem;    /* 40px */
+  --input-h-lg: 2.75rem;   /* 44px */
+  --input-px-md: 0.875rem; /* 14px */
+  --input-px-lg: 1rem;     /* 16px */
+
+  /* Icon sizes */
+  --icon-xs: 0.75rem;   /* 12px */
+  --icon-sm: 1rem;      /* 16px */
+  --icon-md: 1.25rem;   /* 20px */
+  --icon-lg: 1.5rem;    /* 24px */
+  --icon-xl: 2rem;      /* 32px */
+  --icon-2xl: 3rem;     /* 48px */
+
+  /* Avatar sizes */
+  --avatar-xs: 1.5rem;   /* 24px */
+  --avatar-sm: 2rem;     /* 32px */
+  --avatar-md: 2.5rem;   /* 40px */
+  --avatar-lg: 3rem;     /* 48px */
+  --avatar-xl: 4rem;     /* 64px */
+  --avatar-2xl: 5rem;    /* 80px */
+}
+
+/* Component class example */
+@layer components {
+  .btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--spacing-inline);
+    height: var(--btn-h-md);
+    padding-inline: var(--btn-px-md);
+    font-size: var(--btn-text-md);
+    font-weight: var(--font-weight-strong);
+    border-radius: var(--radius-md);
+    transition: background-color 150ms ease-out, opacity 150ms ease-out;
+    cursor: pointer;
+    user-select: none;
+  }
+  .btn-sm {
+    height: var(--btn-h-sm);
+    padding-inline: var(--btn-px-sm);
+    font-size: var(--btn-text-sm);
+  }
+  .btn-lg {
+    height: var(--btn-h-lg);
+    padding-inline: var(--btn-px-lg);
+    font-size: var(--btn-text-lg);
+  }
+}

snippets/design-tokens/categories/density.md

@@ -0,0 +1,38 @@
+/* Density mode system */
+:root {
+  --density-scale: 1;       /* default */
+  --density-text-adjust: 0; /* rem offset for font sizes */
+}
+
+.density-compact {
+  --density-scale: 0.75;
+  --density-text-adjust: -0.0625rem; /* -1px */
+
+  /* Override spacing tokens */
+  --spacing-card: 1.25rem;      /* vs 1.75rem default */
+  --spacing-card-sm: 0.875rem;  /* vs 1.25rem default */
+  --spacing-section-y: 4rem;    /* vs 6rem default */
+  --spacing-grid-cards: 1rem;   /* vs 1.5rem default */
+
+  /* Override sizing tokens */
+  --btn-h-md: 2rem;             /* vs 2.5rem default */
+  --btn-h-lg: 2.25rem;          /* vs 2.75rem default */
+  --input-h-md: 2rem;           /* vs 2.5rem default */
+  --input-h-lg: 2.25rem;        /* vs 2.75rem default */
+}
+
+.density-comfortable {
+  --density-scale: 1.125;
+  --density-text-adjust: 0.0625rem; /* +1px */
+
+  --spacing-card: 2.25rem;      /* vs 1.75rem default */
+  --spacing-card-sm: 1.625rem;  /* vs 1.25rem default */
+  --spacing-section-y: 8rem;    /* vs 6rem default */
+  --spacing-grid-cards: 2rem;   /* vs 1.5rem default */
+
+  --btn-h-md: 2.75rem;          /* vs 2.5rem default */
+  --btn-h-lg: 3rem;             /* vs 2.75rem default */
+  --input-h-md: 2.75rem;        /* vs 2.5rem default */
+}
+
+/* Usage: apply class to <html> or top-level wrapper */

snippets/design-tokens/categories/motion.md

@@ -0,0 +1,46 @@
+/* Motion tokens */
+@theme {
+  /* Durations */
+  --duration-instant: 50ms;
+  --duration-fast: 100ms;
+  --duration-normal: 200ms;
+  --duration-slow: 300ms;
+  --duration-slower: 400ms;
+  --duration-slowest: 600ms;
+
+  /* Easing curves */
+  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);    /* standard — enter & reposition */
+  --ease-in: cubic-bezier(0.4, 0, 1, 1);            /* accelerate — exiting */
+  --ease-out: cubic-bezier(0, 0, 0.2, 1);           /* decelerate — entering */
+  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);      /* symmetric */
+  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* slight overshoot */
+  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275); /* spring */
+  --ease-snappy: cubic-bezier(0.2, 0, 0, 1);        /* fast start, gentle end */
+  --ease-linear: linear;                             /* only for progress/loaders */
+}
+
+/* Semantic motion tokens */
+:root {
+  --transition-hover: background-color var(--duration-fast) var(--ease-out),
+                      color var(--duration-fast) var(--ease-out),
+                      border-color var(--duration-fast) var(--ease-out),
+                      opacity var(--duration-fast) var(--ease-out);
+
+  --transition-transform: transform var(--duration-normal) var(--ease-out);
+  --transition-panel: transform var(--duration-slow) var(--ease-out),
+                      opacity var(--duration-slow) var(--ease-out);
+  --transition-fade: opacity var(--duration-normal) var(--ease-default);
+  --transition-layout: all var(--duration-slow) var(--ease-default);
+}
+
+/* Reduced motion — ALWAYS include */
+@layer base {
+  @media (prefers-reduced-motion: reduce) {
+    *, *::before, *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }
+}

snippets/design-tokens/categories/opacity.md

@@ -0,0 +1,29 @@
+/* Opacity scale */
+@theme {
+  --opacity-disabled: 0.5;    /* exact WCAG-aligned disabled state */
+  --opacity-muted: 0.65;      /* secondary text, subtle elements */
+  --opacity-ghost: 0.4;       /* very subtle ghost elements */
+  --opacity-overlay: 0.5;     /* modal backdrop overlay */
+  --opacity-overlay-heavy: 0.75; /* strong modal overlay */
+  --opacity-glass: 0.8;       /* frosted glass backgrounds */
+  --opacity-glass-light: 0.6; /* lighter glass variant */
+  --opacity-skeleton: 0.08;   /* skeleton loading shimmer base */
+  --opacity-hover: 0.9;       /* subtle hover brightness */
+}
+
+/* Semantic usage in components */
+@layer components {
+  [disabled], [aria-disabled="true"] {
+    opacity: var(--opacity-disabled);
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  .text-muted { opacity: var(--opacity-muted); }
+
+  .glass {
+    background: oklch(from var(--color-surface) l c h / var(--opacity-glass));
+    backdrop-filter: blur(12px) saturate(150%);
+    -webkit-backdrop-filter: blur(12px) saturate(150%);
+  }
+}

snippets/design-tokens/categories/shadows-elevation.md

@@ -0,0 +1,45 @@
+/* Shadow / Elevation scale */
+:root {
+  /* Warm-tinted shadows — oklch, NOT rgba(0,0,0) */
+  --shadow-xs: 0 1px 2px 0 oklch(0.30 0.02 60 / 0.08);
+  --shadow-sm:
+    0 1px 3px 0 oklch(0.30 0.02 60 / 0.10),
+    0 1px 2px -1px oklch(0.30 0.02 60 / 0.06);
+  --shadow-md:
+    0 4px 6px -1px oklch(0.30 0.02 60 / 0.10),
+    0 2px 4px -2px oklch(0.30 0.02 60 / 0.06);
+  --shadow-lg:
+    0 10px 15px -3px oklch(0.30 0.02 60 / 0.10),
+    0 4px 6px -4px oklch(0.30 0.02 60 / 0.05);
+  --shadow-xl:
+    0 20px 25px -5px oklch(0.30 0.02 60 / 0.10),
+    0 8px 10px -6px oklch(0.30 0.02 60 / 0.04);
+  --shadow-2xl:
+    0 25px 50px -12px oklch(0.30 0.02 60 / 0.25);
+
+  /* Focus ring */
+  --shadow-focus: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-primary);
+
+  /* Semantic elevation tokens */
+  --shadow-btn: var(--shadow-xs);
+  --shadow-card: var(--shadow-sm);
+  --shadow-modal: var(--shadow-xl);
+  --shadow-dropdown: var(--shadow-lg);
+  --shadow-tooltip: var(--shadow-md);
+}
+
+/* Dark mode — use bg-color elevation, skip shadows */
+.dark {
+  --shadow-xs: none;
+  --shadow-sm: none;
+  --shadow-md: none;
+  --shadow-lg: none;
+  --shadow-xl: none;
+  --shadow-2xl: none;
+
+  /* Dark elevation via background lightness steps */
+  --color-surface-1: oklch(0.22 0.008 265); /* slightly elevated */
+  --color-surface-2: oklch(0.26 0.008 265);
+  --color-surface-3: oklch(0.30 0.008 265);
+  --color-surface-4: oklch(0.35 0.008 265); /* modal/floating level */
+}

snippets/design-tokens/categories/spacing.md

@@ -0,0 +1,24 @@
+/* Tailwind v4 base multiplier — DO NOT override individual steps here */
+@theme {
+  --spacing: 0.25rem; /* 4px base — generates p-1=4px, p-2=8px, p-4=16px... */
+}
+
+/* Named semantic spacing tokens */
+:root {
+  --spacing-section-y: 6rem;       /* 96px — major vertical section padding */
+  --spacing-section-x: 1.5rem;     /* 24px — horizontal section padding (mobile) */
+  --spacing-card: 1.75rem;         /* 28px — card internal padding */
+  --spacing-card-sm: 1.25rem;      /* 20px — small card padding */
+  --spacing-grid-cards: 1.5rem;    /* 24px — gap between grid cards */
+  --spacing-grid-cards-lg: 2rem;   /* 32px — larger gap variant */
+  --spacing-inline: 0.5rem;        /* 8px — inline element gaps (icon + label) */
+  --spacing-form-gap: 1.25rem;     /* 20px — gap between form fields */
+  --spacing-nav-x: 1.5rem;         /* 24px — horizontal nav padding */
+  --spacing-nav-y: 1rem;           /* 16px — vertical nav padding */
+  --spacing-container-max: 80rem;  /* 1280px — max content width */
+  --spacing-container-md: 65rem;   /* 1040px — medium content width */
+  --spacing-container-narrow: 42rem; /* 672px — prose/narrow content */
+}
+
+/* Named tokens generate Tailwind utilities automatically in v4 */
+/* Usage: p-card, py-section-y, gap-grid-cards, max-w-container-max */