@mohasinac/appkit 2.3.0 → 2.3.1

package/dist/tokens/index.d.ts

@@ -0,0 +1,864 @@
+/**
+ * @mohasinac/tokens — TypeScript constants
+ *
+ * Mirrors the CSS custom properties in tokens.css as typed TS values.
+ * Use these when you need token values in JS (e.g. canvas drawing, charting,
+ * or building the tailwind.config.js color palette from a single source).
+ *
+ * In CSS/Tailwind prefer `var(--appkit-*)` references over these constants.
+ */
+export declare const COLORS: {
+    readonly primary: {
+        readonly DEFAULT: "#84e122";
+        readonly 50: "#f3ffe3";
+        readonly 100: "#e4ffc5";
+        readonly 200: "#c8ff90";
+        readonly 300: "#a3f550";
+        readonly 400: "#84e122";
+        readonly 500: "#65c408";
+        readonly 600: "#509c02";
+        readonly 700: "#3e7708";
+        readonly 800: "#345e0d";
+        readonly 900: "#2c5011";
+        readonly 950: "#142d03";
+    };
+    readonly secondary: {
+        readonly DEFAULT: "#e91e8c";
+        readonly 50: "#fdf0f8";
+        readonly 100: "#fce2f2";
+        readonly 200: "#fac6e6";
+        readonly 300: "#f79dd2";
+        readonly 400: "#f063b9";
+        readonly 500: "#e91e8c";
+        readonly 600: "#d4107a";
+        readonly 700: "#b00d66";
+        readonly 800: "#900f56";
+        readonly 900: "#771249";
+        readonly 950: "#480525";
+    };
+    readonly cobalt: {
+        readonly DEFAULT: "#3570fc";
+        readonly 50: "#eef5ff";
+        readonly 100: "#d9e8ff";
+        readonly 200: "#bcd4ff";
+        readonly 300: "#8eb9ff";
+        readonly 400: "#5992ff";
+        readonly 500: "#3570fc";
+        readonly 600: "#1a55f2";
+        readonly 700: "#1343de";
+        readonly 800: "#1536b4";
+        readonly 900: "#18318e";
+        readonly 950: "#111e58";
+    };
+    readonly accent: {
+        readonly DEFAULT: "#8393b2";
+        readonly 50: "#f5f7fa";
+        readonly 100: "#eaeef4";
+        readonly 200: "#d1dae6";
+        readonly 300: "#adb9cf";
+        readonly 400: "#8393b2";
+        readonly 500: "#657599";
+        readonly 600: "#505f7f";
+        readonly 700: "#424d67";
+        readonly 800: "#394257";
+        readonly 900: "#333b4b";
+        readonly 950: "#222730";
+    };
+    readonly semantic: {
+        readonly success: "#059669";
+        readonly warning: "#d97706";
+        readonly error: "#dc2626";
+        readonly info: "#0284c7";
+    };
+};
+export declare const RADIUS: {
+    readonly sm: "0.25rem";
+    readonly md: "0.375rem";
+    readonly lg: "0.5rem";
+    readonly xl: "0.75rem";
+    readonly "2xl": "1rem";
+    readonly "3xl": "1.5rem";
+    readonly card: "1rem";
+    readonly btn: "0.75rem";
+    readonly full: "9999px";
+};
+export declare const SHADOWS: {
+    readonly sm: "0 1px 2px 0 rgba(0,0,0,0.05)";
+    readonly md: "0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1)";
+    readonly lg: "0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)";
+    readonly xl: "0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1)";
+    readonly soft: "0 2px 15px -3px rgba(0,0,0,0.07), 0 10px 20px -2px rgba(0,0,0,0.04)";
+    readonly glow: "0 0 20px rgba(80, 156, 2, 0.45)";
+    readonly glowPink: "0 0 20px rgba(233, 30, 140, 0.5)";
+};
+export declare const Z_INDEX: {
+    readonly dropdown: 30;
+    readonly searchBackdrop: 35;
+    readonly navbar: 40;
+    readonly bottomNav: 40;
+    readonly overlay: 45;
+    readonly sidebar: 50;
+    readonly titleBar: 50;
+    readonly modal: 60;
+    readonly toast: 70;
+};
+/**
+ * Returns a CSS custom property reference for the given token name.
+ *
+ * @example
+ *   token("color-primary")       // "var(--appkit-color-primary)"
+ *   token("radius-card")         // "var(--appkit-radius-card)"
+ *   token("shadow-glow")         // "var(--appkit-shadow-glow)"
+ */
+export declare function token(name: string): string;
+export declare const TOKENS: {
+    readonly colors: {
+        readonly primary: {
+            readonly DEFAULT: "#84e122";
+            readonly 50: "#f3ffe3";
+            readonly 100: "#e4ffc5";
+            readonly 200: "#c8ff90";
+            readonly 300: "#a3f550";
+            readonly 400: "#84e122";
+            readonly 500: "#65c408";
+            readonly 600: "#509c02";
+            readonly 700: "#3e7708";
+            readonly 800: "#345e0d";
+            readonly 900: "#2c5011";
+            readonly 950: "#142d03";
+        };
+        readonly secondary: {
+            readonly DEFAULT: "#e91e8c";
+            readonly 50: "#fdf0f8";
+            readonly 100: "#fce2f2";
+            readonly 200: "#fac6e6";
+            readonly 300: "#f79dd2";
+            readonly 400: "#f063b9";
+            readonly 500: "#e91e8c";
+            readonly 600: "#d4107a";
+            readonly 700: "#b00d66";
+            readonly 800: "#900f56";
+            readonly 900: "#771249";
+            readonly 950: "#480525";
+        };
+        readonly cobalt: {
+            readonly DEFAULT: "#3570fc";
+            readonly 50: "#eef5ff";
+            readonly 100: "#d9e8ff";
+            readonly 200: "#bcd4ff";
+            readonly 300: "#8eb9ff";
+            readonly 400: "#5992ff";
+            readonly 500: "#3570fc";
+            readonly 600: "#1a55f2";
+            readonly 700: "#1343de";
+            readonly 800: "#1536b4";
+            readonly 900: "#18318e";
+            readonly 950: "#111e58";
+        };
+        readonly accent: {
+            readonly DEFAULT: "#8393b2";
+            readonly 50: "#f5f7fa";
+            readonly 100: "#eaeef4";
+            readonly 200: "#d1dae6";
+            readonly 300: "#adb9cf";
+            readonly 400: "#8393b2";
+            readonly 500: "#657599";
+            readonly 600: "#505f7f";
+            readonly 700: "#424d67";
+            readonly 800: "#394257";
+            readonly 900: "#333b4b";
+            readonly 950: "#222730";
+        };
+        readonly semantic: {
+            readonly success: "#059669";
+            readonly warning: "#d97706";
+            readonly error: "#dc2626";
+            readonly info: "#0284c7";
+        };
+    };
+    readonly radius: {
+        readonly sm: "0.25rem";
+        readonly md: "0.375rem";
+        readonly lg: "0.5rem";
+        readonly xl: "0.75rem";
+        readonly "2xl": "1rem";
+        readonly "3xl": "1.5rem";
+        readonly card: "1rem";
+        readonly btn: "0.75rem";
+        readonly full: "9999px";
+    };
+    readonly shadows: {
+        readonly sm: "0 1px 2px 0 rgba(0,0,0,0.05)";
+        readonly md: "0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1)";
+        readonly lg: "0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)";
+        readonly xl: "0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1)";
+        readonly soft: "0 2px 15px -3px rgba(0,0,0,0.07), 0 10px 20px -2px rgba(0,0,0,0.04)";
+        readonly glow: "0 0 20px rgba(80, 156, 2, 0.45)";
+        readonly glowPink: "0 0 20px rgba(233, 30, 140, 0.5)";
+    };
+    readonly zIndex: {
+        readonly dropdown: 30;
+        readonly searchBackdrop: 35;
+        readonly navbar: 40;
+        readonly bottomNav: 40;
+        readonly overlay: 45;
+        readonly sidebar: 50;
+        readonly titleBar: 50;
+        readonly modal: 60;
+        readonly toast: 70;
+    };
+    readonly token: typeof token;
+};
+/**
+ * Locale and currency defaults.
+ * Scalar defaults are resolved at call-time via the baseline resolver so that
+ * consumer overrides (via `configureMarketDefaults()`) take effect everywhere.
+ *
+ * @example
+ * ```ts
+ * import { LOCALE_CONFIG } from "@mohasinac/appkit/tokens";
+ *
+ * const price = new Intl.NumberFormat(LOCALE_CONFIG.defaultLocale, {
+ *   style: "currency",
+ *   currency: LOCALE_CONFIG.defaultCurrency,
+ * }).format(1299);
+ * // => "\u20b91,299.00"
+ * ```
+ */
+export declare const LOCALE_CONFIG: {
+    /** IETF language tag used for Intl formatters. Resolved via baseline resolver. */
+    readonly defaultLocale: string;
+    /** ISO 4217 currency code. Resolved via baseline resolver. */
+    readonly defaultCurrency: string;
+    /** IANA timezone for server-side date rendering. Resolved via baseline resolver. */
+    readonly defaultTimezone: string;
+    /** ISO 3166-1 alpha-2 country code. Resolved via baseline resolver. */
+    readonly defaultCountry: string;
+    /** Phone number prefix. Resolved via baseline resolver. */
+    readonly defaultPhonePrefix: string;
+    /** Locales available for the i18n router. */
+    readonly supportedLocales: readonly ["en-IN", "en-US", "en-GB"];
+    /** Currencies the platform accepts. */
+    readonly supportedCurrencies: readonly ["INR", "USD", "GBP", "EUR", "AED", "SGD"];
+    /** Currency symbol map for quick display use. */
+    readonly currencySymbols: {
+        readonly INR: "₹";
+        readonly USD: "$";
+        readonly GBP: "£";
+        readonly EUR: "€";
+        readonly AED: "د.إ";
+        readonly SGD: "S$";
+    };
+    /** Postal code pattern for India (6 digits). */
+    readonly postalPattern: RegExp;
+};
+/**
+ * Layout dimension constants (height, width strings for Tailwind).
+ */
+export declare const LAYOUT: {
+    readonly titleBarHeight: "h-12";
+    readonly navbarHeight: "h-10 md:h-12";
+    readonly sidebarWidth: "w-80";
+    readonly bottomNavHeight: "h-14";
+    readonly maxContentWidth: "max-w-[1920px]";
+    readonly containerWidth: "max-w-[1920px]";
+    readonly contentPadding: "px-4 md:px-6 lg:px-8";
+    readonly navPadding: "px-4 sm:px-6 lg:px-8";
+    readonly titleBarBg: "bg-white/90 dark:bg-slate-950/90 backdrop-blur-md border-b border-zinc-200/80 dark:border-slate-800/80";
+    readonly navbarBg: "bg-white/90 dark:bg-slate-950/90 backdrop-blur-md border-b border-zinc-200/80 dark:border-slate-800/80";
+    readonly sidebarBg: "bg-white dark:bg-slate-900 border-l border-zinc-200 dark:border-slate-800";
+    readonly bottomNavBg: "bg-white/90 dark:bg-slate-950/90 backdrop-blur-md border-t border-zinc-200/80 dark:border-slate-800/80";
+    readonly footerBg: "bg-zinc-50 dark:bg-slate-900 border-t border-zinc-200 dark:border-slate-800";
+    readonly fullScreen: "min-h-screen";
+    readonly flexCenter: "flex items-center justify-center";
+    readonly centerText: "text-center";
+    /** Full-width content zone: max screen-xl, centred, responsive px */
+    readonly content: "w-full max-w-screen-xl mx-auto px-4 sm:px-6 xl:px-8";
+    /** Narrow zone for forms, articles, policy pages */
+    readonly tight: "w-full max-w-3xl mx-auto px-4 sm:px-6";
+    /** Vertical rhythm padding for sections */
+    readonly section: "py-10 sm:py-14 xl:py-20";
+    /** Compact sections (filters, related products) */
+    readonly sectionSm: "py-6 sm:py-10";
+    /** Responsive gap for flex/grid children */
+    readonly gap: "gap-4 sm:gap-6 xl:gap-8";
+    /** Responsive vertical stack spacing */
+    readonly stack: "space-y-4 sm:space-y-6";
+    /** Kill trailing space from last child in a zone */
+    readonly noBleed: "pb-0 mb-0";
+    /** Kill top margin from first element in a zone */
+    readonly firstChild: "mt-0 pt-0";
+    /** Kill bottom margin from last element in a zone */
+    readonly lastChild: "mb-0 pb-0";
+    /** Combined bottom-nav bar (hidden on lg+, iPhone safe-area aware) */
+    readonly bottomNav: "fixed bottom-0 inset-x-0 z-50 flex justify-around items-center h-16 bg-white dark:bg-zinc-900 border-t border-zinc-200 dark:border-zinc-800 lg:hidden pb-[env(safe-area-inset-bottom)]";
+    /** Main content bottom padding to clear the bottom nav on mobile */
+    readonly mainPadBottomNav: "pb-20 lg:pb-0";
+    /** Standard card heights for consistency */
+    readonly cardHeight: {
+        readonly sm: "h-32";
+        readonly md: "h-48";
+        readonly lg: "h-64";
+        readonly xl: "h-80";
+        readonly product: "h-72";
+        readonly store: "h-56";
+        readonly event: "h-80";
+        readonly blog: "h-96";
+    };
+    /** Standard card widths for consistency */
+    readonly cardWidth: {
+        readonly sm: "w-32";
+        readonly md: "w-48";
+        readonly lg: "w-64";
+        readonly xl: "w-80";
+        readonly full: "w-full";
+    };
+};
+/**
+ * Minimum item widths for auto-fill fluid grids matching the four
+ * `fluid-grid-*` CSS utilities (defined in tailwind.config.js plugin).
+ *
+ * Usage: `useContainerGrid({ minItemWidth: FLUID_GRID_MIN_WIDTHS.card })`
+ */
+export declare const FLUID_GRID_MIN_WIDTHS: {
+    /** Product cards, store cards */
+    readonly card: 220;
+    /** Admin stat cards, user cards */
+    readonly admin: 260;
+    /** Blog cards, event cards */
+    readonly wide: 300;
+    /** Gallery thumbnails */
+    readonly thumb: 160;
+    /** Form fields — two-column threshold */
+    readonly form: 280;
+    /** Tab strip items */
+    readonly tabItem: 100;
+    /** Filter chips */
+    readonly chip: 80;
+};
+/**
+ * THEME_CONSTANTS
+ *
+ * The complete, responsive-first design system constant map.
+ * Import in your project's `constants/theme.ts` and extend with
+ * brand-specific values (accentBanner gradients, badge role variants, etc.).
+ *
+ * @example
+ * ```ts
+ * // In your project constants/theme.ts:
+ * import { THEME_CONSTANTS } from "./";
+ *
+ * export { THEME_CONSTANTS };        // re-export as-is
+ *
+ * // or merge with project-specific extensions:
+ * export const THEME_CONSTANTS = {
+ *   ...baseTheme,
+ *   accentBanner: { ... },           // project-specific
+ * };
+ * ```
+ */
+export declare const THEME_CONSTANTS: {
+    readonly themed: {
+        readonly bgPrimary: "bg-zinc-50 dark:bg-slate-950";
+        readonly bgSecondary: "bg-zinc-100 dark:bg-slate-900";
+        readonly bgTertiary: "bg-zinc-200 dark:bg-slate-800";
+        readonly bgElevated: "bg-white dark:bg-slate-900/90";
+        readonly bgInput: "bg-white dark:bg-slate-800/60";
+        readonly textPrimary: "text-zinc-900 dark:text-zinc-50";
+        readonly textSecondary: "text-zinc-500 dark:text-zinc-400";
+        readonly textMuted: "text-zinc-400 dark:text-zinc-500";
+        readonly textError: "text-red-600 dark:text-red-400";
+        readonly textSuccess: "text-emerald-600 dark:text-emerald-400";
+        readonly textOnPrimary: "text-white";
+        readonly textOnDark: "text-white";
+        readonly border: "border-zinc-200 dark:border-slate-700";
+        readonly borderSubtle: "border-zinc-100 dark:border-slate-800/60";
+        readonly borderLight: "border-zinc-100 dark:border-slate-700/60";
+        readonly borderError: "border-red-500";
+        readonly borderColor: "border-zinc-200 dark:border-slate-700";
+        readonly hover: "hover:bg-zinc-100 dark:hover:bg-slate-800";
+        readonly hoverCard: "hover:bg-zinc-50 dark:hover:bg-slate-800/60";
+        readonly hoverBorder: "hover:border-zinc-300 dark:hover:border-slate-600";
+        readonly hoverText: "hover:text-zinc-800 dark:hover:text-zinc-100";
+        readonly activeRow: "bg-primary-50 dark:bg-secondary-950/30";
+        readonly focusRing: "focus:ring-primary-500 dark:focus:ring-secondary-400";
+        readonly divider: "divide-zinc-200 dark:divide-slate-700";
+        readonly placeholder: "placeholder-zinc-400 dark:placeholder-zinc-500";
+    };
+    readonly layout: {
+        readonly titleBarHeight: "h-12";
+        readonly navbarHeight: "h-10 md:h-12";
+        readonly sidebarWidth: "w-80";
+        readonly bottomNavHeight: "h-14";
+        readonly maxContentWidth: "max-w-[1920px]";
+        readonly containerWidth: "max-w-[1920px]";
+        readonly contentPadding: "px-4 md:px-6 lg:px-8";
+        readonly navPadding: "px-4 sm:px-6 lg:px-8";
+        readonly titleBarBg: "bg-white/90 dark:bg-slate-950/90 backdrop-blur-md border-b border-zinc-200/80 dark:border-slate-800/80";
+        readonly navbarBg: "bg-white/90 dark:bg-slate-950/90 backdrop-blur-md border-b border-zinc-200/80 dark:border-slate-800/80";
+        readonly sidebarBg: "bg-white dark:bg-slate-900 border-l border-zinc-200 dark:border-slate-800";
+        readonly bottomNavBg: "bg-white/90 dark:bg-slate-950/90 backdrop-blur-md border-t border-zinc-200/80 dark:border-slate-800/80";
+        readonly footerBg: "bg-zinc-50 dark:bg-slate-900 border-t border-zinc-200 dark:border-slate-800";
+        readonly fullScreen: "min-h-screen";
+        readonly flexCenter: "flex items-center justify-center";
+        readonly centerText: "text-center";
+        /** Full-width content zone: max screen-xl, centred, responsive px */
+        readonly content: "w-full max-w-screen-xl mx-auto px-4 sm:px-6 xl:px-8";
+        /** Narrow zone for forms, articles, policy pages */
+        readonly tight: "w-full max-w-3xl mx-auto px-4 sm:px-6";
+        /** Vertical rhythm padding for sections */
+        readonly section: "py-10 sm:py-14 xl:py-20";
+        /** Compact sections (filters, related products) */
+        readonly sectionSm: "py-6 sm:py-10";
+        /** Responsive gap for flex/grid children */
+        readonly gap: "gap-4 sm:gap-6 xl:gap-8";
+        /** Responsive vertical stack spacing */
+        readonly stack: "space-y-4 sm:space-y-6";
+        /** Kill trailing space from last child in a zone */
+        readonly noBleed: "pb-0 mb-0";
+        /** Kill top margin from first element in a zone */
+        readonly firstChild: "mt-0 pt-0";
+        /** Kill bottom margin from last element in a zone */
+        readonly lastChild: "mb-0 pb-0";
+        /** Combined bottom-nav bar (hidden on lg+, iPhone safe-area aware) */
+        readonly bottomNav: "fixed bottom-0 inset-x-0 z-50 flex justify-around items-center h-16 bg-white dark:bg-zinc-900 border-t border-zinc-200 dark:border-zinc-800 lg:hidden pb-[env(safe-area-inset-bottom)]";
+        /** Main content bottom padding to clear the bottom nav on mobile */
+        readonly mainPadBottomNav: "pb-20 lg:pb-0";
+        /** Standard card heights for consistency */
+        readonly cardHeight: {
+            readonly sm: "h-32";
+            readonly md: "h-48";
+            readonly lg: "h-64";
+            readonly xl: "h-80";
+            readonly product: "h-72";
+            readonly store: "h-56";
+            readonly event: "h-80";
+            readonly blog: "h-96";
+        };
+        /** Standard card widths for consistency */
+        readonly cardWidth: {
+            readonly sm: "w-32";
+            readonly md: "w-48";
+            readonly lg: "w-64";
+            readonly xl: "w-80";
+            readonly full: "w-full";
+        };
+    };
+    readonly typography: {
+        readonly pageTitle: "text-2xl md:text-3xl lg:text-4xl font-bold tracking-tight leading-tight";
+        readonly pageSubtitle: "text-base md:text-lg text-zinc-500 dark:text-zinc-400 leading-relaxed mt-1";
+        readonly sectionTitle: "text-xl md:text-2xl lg:text-3xl font-semibold tracking-tight";
+        readonly sectionSubtitle: "text-sm md:text-base lg:text-lg text-zinc-500 dark:text-zinc-400";
+        readonly cardTitle: "text-base md:text-lg font-semibold leading-snug";
+        readonly cardBody: "text-sm md:text-base leading-relaxed";
+        readonly label: "text-sm font-medium text-zinc-700 dark:text-zinc-300";
+        readonly caption: "text-xs text-zinc-500 dark:text-zinc-400";
+        readonly overline: "text-xs font-semibold uppercase tracking-wider text-zinc-500 dark:text-zinc-400";
+        readonly h1: "text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight font-display";
+        readonly h2: "text-2xl md:text-3xl lg:text-4xl font-bold tracking-tight font-display";
+        readonly h3: "text-xl md:text-2xl lg:text-3xl font-bold tracking-tight font-display";
+        readonly h4: "text-lg md:text-xl lg:text-2xl font-bold font-display";
+        readonly h5: "text-base md:text-lg lg:text-xl font-medium";
+        readonly h6: "text-sm md:text-base lg:text-lg font-medium";
+        readonly body: "text-base lg:text-lg";
+        readonly small: "text-sm lg:text-base";
+        readonly xs: "text-xs lg:text-sm";
+        readonly display: "text-8xl md:text-9xl font-bold font-display";
+    };
+    readonly spacing: {
+        readonly section: "space-y-8 md:space-y-12 lg:space-y-16";
+        readonly formGroup: "space-y-6 lg:space-y-8";
+        readonly stack: "space-y-4";
+        readonly stackSmall: "space-y-2";
+        readonly inline: "space-x-4";
+        readonly inlineSmall: "gap-2 lg:gap-3";
+        readonly inlineLarge: "gap-4 lg:gap-6";
+        readonly pageY: "py-6 sm:py-8 lg:py-10";
+        readonly sectionGap: "mt-8 md:mt-12";
+        readonly cardPadding: "p-5 sm:p-6 lg:p-8";
+        readonly padding: {
+            readonly xs: "p-2";
+            readonly sm: "p-3";
+            readonly md: "p-4";
+            readonly lg: "p-6";
+            readonly xl: "p-8";
+        };
+        readonly gap: {
+            readonly none: "";
+            readonly px: "gap-px";
+            readonly xs: "gap-1";
+            readonly sm: "gap-2";
+            readonly "2.5": "gap-2.5";
+            readonly "3": "gap-3";
+            readonly md: "gap-4";
+            readonly lg: "gap-6";
+            readonly xl: "gap-8";
+            readonly "2xl": "gap-12";
+        };
+    };
+    readonly grid: {
+        /** Single column */
+        readonly cols1: "grid grid-cols-1";
+        /** 1 → 2 */
+        readonly cols2: "grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-2 2xl:grid-cols-2";
+        /** 1 → 2 (md breakpoint) */
+        readonly cols2Md: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-2 2xl:grid-cols-2";
+        /** 1 → 2 → 3 → 4 on widescreen */
+        readonly cols3: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-4";
+        /** 1 → 2 → 3 → 4 → 5 on widescreen */
+        readonly cols4: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5";
+        /** 1 → 2 → 3 → 4 → 5 */
+        readonly cols5: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-5";
+        /** 2 → 3 → 4 → 5 → 6 */
+        readonly cols6: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6";
+        /** 2 → 3 → 6 (lg breakpoint) */
+        readonly cols6Lg: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6";
+        /**
+         * Generic card grid — 1 col on portrait mobile → 5 on ultrawide.
+         * Starts at 1 (not 2) so product cards with title+image+price are readable
+         * even on 320 px handsets in portrait orientation.
+         */
+        readonly cards: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-5";
+        /** Auto-fill product cards — min 200 px */
+        readonly productCards: "grid grid-cols-[repeat(auto-fill,minmax(200px,1fr))] gap-6";
+        /** Auto-fill store cards — min 220 px */
+        readonly storeCards: "grid grid-cols-[repeat(auto-fill,minmax(220px,1fr))] gap-6";
+        /** Auto-fill category icon+label tiles — min 130 px */
+        readonly categoryCards: "grid grid-cols-[repeat(auto-fill,minmax(130px,1fr))] gap-4";
+        /** Auto-fill coupon/promo cards — min 264 px */
+        readonly couponCards: "grid grid-cols-[repeat(auto-fill,minmax(264px,1fr))] gap-6";
+        /** Auto-fill address / wide cards — min 300 px */
+        readonly addressCards: "grid grid-cols-[repeat(auto-fill,minmax(300px,1fr))] gap-4";
+        /** Auto-fill KPI/stat tiles — min 180 px */
+        readonly statTiles: "grid grid-cols-[repeat(auto-fill,minmax(180px,1fr))] gap-4";
+        /** Auto-fill account nav tiles — min 160 px */
+        readonly navTiles: "grid grid-cols-[repeat(auto-fill,minmax(160px,1fr))] gap-4";
+        /** Auto-fill, min 200 px */
+        readonly autoFillSm: "grid grid-cols-[repeat(auto-fill,minmax(200px,1fr))]";
+        /** Auto-fill, min 280 px */
+        readonly autoFillMd: "grid grid-cols-[repeat(auto-fill,minmax(280px,1fr))]";
+        /** Auto-fill, min 360 px */
+        readonly autoFillLg: "grid grid-cols-[repeat(auto-fill,minmax(360px,1fr))]";
+        /** Fixed 280 px left sidebar + 1fr */
+        readonly sidebar: "grid grid-cols-1 lg:grid-cols-[280px_1fr]";
+        /** 1fr + fixed 280 px right sidebar */
+        readonly sidebarRight: "grid grid-cols-1 lg:grid-cols-[1fr_280px]";
+        /** Fixed 320 px left sidebar + 1fr (admin) */
+        readonly sidebarWide: "grid grid-cols-1 lg:grid-cols-[320px_1fr]";
+        /** Equal halves on md+ */
+        readonly halves: "grid grid-cols-1 md:grid-cols-2 xl:grid-cols-2 2xl:grid-cols-2";
+        /** 2fr / 1fr */
+        readonly twoThird: "grid grid-cols-1 md:grid-cols-[2fr_1fr]";
+        /** 1fr / 2fr */
+        readonly oneThird: "grid grid-cols-1 md:grid-cols-[1fr_2fr]";
+        /** Product grid — 2 cols on mobile, scales to 5 on ultrawide */
+        readonly products: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3 sm:gap-4 xl:gap-6";
+        /** Wide card grid — 1 col on mobile → 3 on xl */
+        readonly wide: "grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 xl:gap-8";
+        /** Admin stats grid — 1 col → 4 KPI tiles on xl */
+        readonly admin: "grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4";
+        /** Filter sidebar + main content + optional right aside */
+        readonly withFilter: "grid grid-cols-1 lg:grid-cols-[220px_1fr] xl:grid-cols-[260px_1fr_200px] gap-4 xl:gap-6";
+    };
+    readonly page: {
+        readonly px: "px-4 sm:px-6 lg:px-8";
+        readonly container: {
+            /** max-w-3xl — blog / policy */
+            readonly sm: "max-w-3xl mx-auto px-4 sm:px-6 lg:px-8";
+            /** max-w-4xl — contact / about */
+            readonly md: "max-w-4xl mx-auto px-4 sm:px-6 lg:px-8";
+            /** max-w-5xl — checkout / help */
+            readonly lg: "max-w-5xl mx-auto px-4 sm:px-6 lg:px-8";
+            /** max-w-6xl — product detail / cart */
+            readonly xl: "max-w-6xl mx-auto px-4 sm:px-6 lg:px-8";
+            /** max-w-7xl — main content grids (default) */
+            readonly "2xl": "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8";
+            /** max-w-screen-2xl — full-bleed content */
+            readonly full: "max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8";
+            /** max-w-screen-2xl — wide store/seller layouts (compact px) */
+            readonly wide: "max-w-screen-2xl mx-auto px-4 sm:px-6";
+            /** max-w-[1920px] — ultra-wide / 4K displays */
+            readonly ultra: "max-w-[1920px] mx-auto px-4 sm:px-6 lg:px-8";
+        };
+    };
+    readonly input: {
+        readonly base: "rounded-lg border border-zinc-200 dark:border-slate-700 bg-white dark:bg-slate-800/60 px-3.5 py-2.5 text-base sm:text-sm text-zinc-900 dark:text-zinc-100 focus:ring-2 focus:ring-primary-500/40 dark:focus:ring-secondary-400/40 focus:border-primary-500 dark:focus:border-secondary-400 focus:outline-none transition-colors duration-150 placeholder:text-zinc-400 dark:placeholder:text-zinc-500";
+        readonly error: "border-red-400 dark:border-red-500 focus:ring-red-500/20 focus:border-red-500 bg-red-50/30 dark:bg-red-950/10";
+        readonly success: "border-emerald-400 dark:border-emerald-500 focus:ring-emerald-500/20 focus:border-emerald-500";
+        readonly disabled: "bg-zinc-50 dark:bg-slate-800/30 text-zinc-400 dark:text-zinc-500 cursor-not-allowed opacity-60";
+        readonly withIcon: "pl-10";
+    };
+    readonly card: {
+        readonly base: "rounded-2xl overflow-hidden transition-all";
+        readonly shadow: "shadow-sm";
+        readonly shadowElevated: "shadow-lg";
+        readonly hover: "hover:shadow-md dark:hover:shadow-xl cursor-pointer transition-shadow duration-200";
+        readonly standard: "rounded-2xl border border-zinc-200 dark:border-slate-700 bg-white dark:bg-slate-900 shadow-sm hover:shadow-md transition-all duration-200";
+        readonly elevated: "rounded-2xl bg-white dark:bg-slate-900 border border-zinc-200 dark:border-slate-700 shadow-md hover:shadow-lg transition-shadow duration-200";
+        readonly interactive: "rounded-2xl border border-zinc-200 dark:border-slate-700 bg-white dark:bg-slate-900 shadow-sm hover:shadow-md hover:border-primary-300/60 dark:hover:border-secondary-500/60 transition-all duration-200 cursor-pointer";
+        readonly glass: "rounded-2xl backdrop-blur-md bg-white/85 dark:bg-slate-900/85 border border-zinc-200/60 dark:border-slate-700/40 shadow-lg";
+        /** Product card image wrapper — portrait aspect ratio */
+        readonly image: "relative aspect-[3/4] overflow-hidden bg-zinc-100 dark:bg-zinc-800";
+        /** Wide image wrapper — video/landscape ratio */
+        readonly imageWide: "relative aspect-video overflow-hidden bg-zinc-100 dark:bg-zinc-800";
+        /** Square image wrapper */
+        readonly imageSquare: "relative aspect-square overflow-hidden bg-zinc-100 dark:bg-zinc-800";
+        /** Banner aspect ratio — 4:3 on mobile, auto on md+ */
+        readonly aspectBanner: "aspect-[4/3] md:aspect-auto";
+        /** Card body — flex-column, responsive padding */
+        readonly body: "flex flex-col flex-1 gap-1 p-3 sm:p-4";
+        /** Card footer — responsive padding */
+        readonly footer: "px-3 pb-3 sm:px-4 sm:pb-4";
+        /** Badge overlay (top-left) */
+        readonly badge: "absolute top-2 left-2 z-10";
+        /** Action overlay, e.g. wishlist button (top-right) */
+        readonly action: "absolute top-2 right-2 z-10";
+    };
+    readonly flex: {
+        readonly row: "flex flex-row";
+        readonly col: "flex flex-col";
+        readonly rowWrap: "flex flex-row flex-wrap";
+        readonly colWrap: "flex flex-col flex-wrap";
+        readonly inline: "inline-flex";
+        readonly center: "flex items-center justify-center";
+        readonly between: "flex items-center justify-between";
+        readonly betweenStart: "flex items-start justify-between";
+        readonly betweenEnd: "flex items-end justify-between";
+        readonly start: "flex items-center justify-start";
+        readonly end: "flex items-center justify-end";
+        readonly rowCenter: "flex flex-row items-center";
+        readonly rowStart: "flex flex-row items-start";
+        readonly rowEnd: "flex flex-row items-end";
+        readonly centerCol: "flex flex-col items-center justify-center";
+        readonly colStart: "flex flex-col items-start";
+        readonly colCenter: "flex flex-col items-center";
+        readonly colEnd: "flex flex-col items-end";
+        readonly colBetween: "flex flex-col justify-between";
+        readonly inlineCenter: "inline-flex items-center";
+        readonly inlineFull: "inline-flex items-center justify-center";
+        readonly grow: "flex-1";
+        readonly growMin: "flex-1 min-w-0";
+        readonly growMinH: "flex-1 min-h-0";
+        readonly noShrink: "flex-shrink-0";
+        readonly none: "flex-none";
+        readonly hCenter: "flex justify-center";
+    };
+    readonly position: {
+        readonly relative: "relative";
+        readonly absolute: "absolute";
+        readonly fixed: "fixed";
+        readonly sticky: "sticky";
+        readonly static: "static";
+        readonly fill: "absolute inset-0";
+        readonly absoluteCenter: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2";
+        readonly absoluteTop: "absolute top-0 inset-x-0";
+        readonly absoluteBottom: "absolute bottom-0 inset-x-0";
+        readonly absoluteTopRight: "absolute top-0 right-0";
+        readonly absoluteTopLeft: "absolute top-0 left-0";
+        readonly absoluteBottomRight: "absolute bottom-0 right-0";
+        readonly absoluteBottomLeft: "absolute bottom-0 left-0";
+    };
+    readonly states: {
+        readonly disabled: "opacity-50 cursor-not-allowed pointer-events-none";
+        readonly loading: "opacity-75 cursor-wait";
+        readonly readonly: "bg-zinc-100 dark:bg-slate-800 cursor-default";
+        readonly error: "border-red-500 dark:border-red-500";
+        readonly success: "border-green-500 dark:border-green-500";
+        readonly focus: "focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:focus:ring-secondary-400 dark:focus:ring-offset-slate-950";
+    };
+    readonly transitions: {
+        readonly default: "transition-all duration-200 ease-in-out";
+        readonly fast: "transition-all duration-150 ease-in-out";
+        readonly slow: "transition-all duration-500 ease-in-out";
+        readonly colors: "transition-colors duration-200 ease-in-out";
+        readonly transform: "transition-transform duration-200 ease-in-out";
+        readonly opacity: "transition-opacity duration-200 ease-in-out";
+    };
+    readonly skeleton: {
+        readonly base: "animate-pulse rounded bg-zinc-200 dark:bg-slate-700/60";
+        readonly text: "animate-pulse rounded bg-zinc-200 dark:bg-slate-700/60 h-4";
+        readonly heading: "animate-pulse rounded bg-zinc-200 dark:bg-slate-700/60 h-7";
+        readonly image: "animate-pulse rounded-xl bg-zinc-200 dark:bg-slate-700/60";
+        readonly card: "animate-pulse rounded-2xl bg-zinc-200 dark:bg-slate-700/60";
+        readonly shimmer: "animate-shimmer bg-[length:400%_100%] rounded bg-gradient-to-r from-zinc-200 via-zinc-100 to-zinc-200 dark:from-slate-800 dark:via-slate-700/60 dark:to-slate-800";
+        readonly shimmerText: "animate-shimmer bg-[length:400%_100%] h-4 rounded bg-gradient-to-r from-zinc-200 via-zinc-100 to-zinc-200 dark:from-slate-800 dark:via-slate-700/60 dark:to-slate-800";
+        readonly shimmerCard: "animate-shimmer bg-[length:400%_100%] rounded-2xl bg-gradient-to-r from-zinc-200 via-zinc-100 to-zinc-200 dark:from-slate-800 dark:via-slate-700/60 dark:to-slate-800";
+    };
+    readonly motion: {
+        readonly fadeIn: "motion-safe:animate-fade-in";
+        readonly slideUp: "motion-safe:animate-slide-up";
+        readonly scaleIn: "motion-safe:animate-scale-in";
+        readonly skeleton: "motion-safe:animate-pulse";
+        readonly transition: "motion-safe:transition-all motion-safe:duration-200";
+        readonly transitionSlow: "motion-safe:transition-all motion-safe:duration-500 motion-safe:ease-in-out";
+    };
+    readonly text: {
+        readonly h1: "text-2xl sm:text-3xl xl:text-4xl font-bold tracking-tight leading-tight";
+        readonly h2: "text-xl sm:text-2xl xl:text-3xl font-semibold tracking-tight";
+        readonly h3: "text-lg sm:text-xl xl:text-2xl font-semibold";
+        readonly h4: "text-base sm:text-lg font-semibold";
+        readonly body: "text-sm sm:text-base leading-relaxed";
+        readonly bodyLg: "text-base sm:text-lg leading-relaxed";
+        readonly small: "text-xs sm:text-sm";
+        readonly label: "text-xs font-medium uppercase tracking-wide";
+        readonly price: "text-lg sm:text-xl font-bold tabular-nums";
+        readonly priceLg: "text-2xl sm:text-3xl font-bold tabular-nums";
+        readonly muted: "text-zinc-500 dark:text-zinc-400";
+        readonly error: "text-red-600 dark:text-red-400";
+        readonly success: "text-green-600 dark:text-green-400";
+    };
+    readonly touch: {
+        readonly target: "min-h-[44px] min-w-[44px]";
+        readonly targetSm: "min-h-[36px] min-w-[36px]";
+        readonly targetH: "min-h-[44px]";
+        readonly targetW: "min-w-[44px]";
+        /** 44 px height primary button */
+        readonly button: "h-11 px-5 py-2.5";
+        /** 44×44 icon button */
+        readonly icon: "h-11 w-11 flex items-center justify-center";
+        /** 44 px height input */
+        readonly input: "h-11 px-3 py-2";
+        /** 48 px height tab */
+        readonly tab: "h-12 px-4";
+        /** Secondary chip (smaller but acceptable) */
+        readonly chip: "h-9 px-3";
+    };
+    readonly fluidGrid: {
+        /** Product / store cards — min 220 px */
+        readonly card: "fluid-grid-card";
+        /** Admin stat / user cards — min 260 px */
+        readonly admin: "fluid-grid-admin";
+        /** Blog / event cards — min 300 px */
+        readonly wide: "fluid-grid-wide";
+        /** Gallery thumbnails — min 160 px */
+        readonly thumb: "fluid-grid-thumb";
+    };
+    /** Form layout tokens — pair with FormGrid / FormField components */
+    readonly form: {
+        readonly grid: "flex flex-wrap gap-4";
+        readonly field: "flex-1 min-w-[280px] flex flex-col gap-1.5";
+        readonly fieldWide: "w-full flex flex-col gap-1.5";
+        readonly fieldHalf: "w-1/2 min-w-[280px] flex flex-col gap-1.5";
+        readonly label: "text-sm font-medium text-zinc-700 dark:text-zinc-300";
+        readonly hint: "text-xs text-zinc-500 dark:text-zinc-400";
+        readonly error: "text-xs text-red-600 dark:text-red-400";
+        readonly section: "space-y-6";
+        readonly sectionHead: "text-base font-semibold text-zinc-900 dark:text-zinc-100 border-b pb-2 mb-2 border-zinc-200 dark:border-zinc-700";
+    };
+    /** Tooltip bubble styles — used by the <Tooltip> component. */
+    readonly tooltip: {
+        readonly content: "z-50 px-2 py-1 text-xs font-medium rounded bg-zinc-900 dark:bg-zinc-100 text-white dark:text-zinc-900 shadow-sm";
+        readonly arrow: "fill-zinc-900 dark:fill-zinc-100";
+    };
+    readonly utilities: {
+        readonly scrollbarHide: "scrollbar-hide [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]";
+        readonly scrollbarThin: "scrollbar-thin [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-zinc-100 dark:[&::-webkit-scrollbar-track]:bg-slate-800/60 [&::-webkit-scrollbar-track]:rounded-full [&::-webkit-scrollbar-thumb]:bg-zinc-300 dark:[&::-webkit-scrollbar-thumb]:bg-slate-600 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb:hover]:bg-zinc-400 dark:[&::-webkit-scrollbar-thumb:hover]:bg-slate-500";
+        readonly scrollbarThinX: "[&::-webkit-scrollbar]:h-1.5 [&::-webkit-scrollbar-track]:rounded-full [&::-webkit-scrollbar-track]:bg-zinc-100 dark:[&::-webkit-scrollbar-track]:bg-slate-800/60 [&::-webkit-scrollbar-thumb]:bg-zinc-300 dark:[&::-webkit-scrollbar-thumb]:bg-slate-600 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb:hover]:bg-zinc-400 dark:[&::-webkit-scrollbar-thumb:hover]:bg-slate-500";
+        readonly safeAreaBottom: "pb-[env(safe-area-inset-bottom)]";
+        readonly safeAreaTop: "pt-[env(safe-area-inset-top)]";
+        readonly safeAreaInline: "px-[env(safe-area-inset-left)] px-[env(safe-area-inset-right)]";
+        readonly gradientText: "bg-gradient-to-r from-primary-600 to-primary-800 bg-clip-text text-transparent";
+        /** Text truncation utilities */
+        readonly textTruncate: "truncate";
+        readonly textClamp1: "line-clamp-1";
+        readonly textClamp2: "line-clamp-2";
+        readonly textClamp3: "line-clamp-3";
+        readonly textClamp4: "line-clamp-4";
+    };
+    readonly patterns: {
+        readonly pageContainer: "min-h-screen bg-white dark:bg-slate-950";
+        readonly sectionContainer: "max-w-7xl mx-auto px-4 md:px-6 lg:px-8 py-8 lg:py-12";
+        readonly formContainer: "bg-white dark:bg-slate-900 rounded-2xl border border-zinc-200 dark:border-slate-700 shadow-sm p-6 lg:p-8 space-y-6";
+        readonly listItem: "bg-white dark:bg-slate-900 border border-zinc-200 dark:border-slate-700 rounded-xl p-4 hover:border-zinc-300 dark:hover:border-slate-600 transition-colors";
+        readonly linkDefault: "text-primary-600 dark:text-secondary-400 hover:text-primary-500 dark:hover:text-secondary-300 transition-colors underline-offset-2 hover:underline";
+        readonly iconButton: "p-2 rounded-lg transition-colors hover:bg-zinc-100 dark:hover:bg-slate-800 active:bg-zinc-200 dark:active:bg-slate-700 min-h-[44px] min-w-[44px] flex items-center justify-center";
+        readonly modalOverlay: "fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50";
+        readonly modalContent: "bg-white dark:bg-slate-900 rounded-2xl border border-zinc-200 dark:border-slate-700 shadow-xl max-w-lg w-full mx-4 overflow-hidden";
+        readonly divider: "border-t border-zinc-200 dark:border-slate-700";
+        readonly emptyState: "flex flex-col items-center justify-center py-12 text-center text-zinc-500 dark:text-zinc-400";
+    };
+    readonly icon: {
+        readonly muted: "text-zinc-400 dark:text-zinc-500";
+        readonly primary: "text-primary-600 dark:text-secondary-400";
+        readonly success: "text-emerald-500 dark:text-emerald-400";
+        readonly danger: "text-red-500 dark:text-red-400";
+        readonly warning: "text-amber-500 dark:text-amber-400";
+        readonly size: {
+            readonly sm: "w-4 h-4";
+            readonly md: "w-6 h-6";
+            readonly lg: "w-8 h-8";
+            readonly xl: "w-16 h-16";
+        };
+    };
+    readonly tab: {
+        readonly active: "border-b-2 border-primary-600 dark:border-secondary-400 text-primary-600 dark:text-secondary-400 font-semibold";
+        readonly inactive: "border-transparent text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-300";
+    };
+    readonly rating: {
+        readonly filled: "text-yellow-400";
+        readonly empty: "text-zinc-300 dark:text-zinc-600";
+    };
+    /** Breakpoints for reference (matches Tailwind defaults). */
+    readonly breakpoints: {
+        readonly sm: "640px";
+        readonly md: "768px";
+        readonly lg: "1024px";
+        readonly xl: "1280px";
+        readonly "2xl": "1536px";
+        readonly "3xl": "1920px";
+    };
+    /** Global body/html base classes. */
+    readonly base: {
+        readonly body: "bg-white dark:bg-slate-950 text-zinc-900 dark:text-zinc-100 antialiased font-[Inter,ui-sans-serif,system-ui,-apple-system,\"Segoe_UI\",Roboto,\"Helvetica_Neue\",Arial,sans-serif]";
+        readonly html: "scroll-smooth";
+    };
+    /** Hero / homepage section layout tokens. */
+    readonly homepage: {
+        readonly heroMinH: "min-h-[clamp(420px,72vh,680px)]";
+        readonly heroMinHMobile: "min-h-[clamp(120px,14vh,200px)]";
+    };
+    /** Carousel navigation tokens — shared by HeroCarousel and SectionCarousel. */
+    readonly carousel: {
+        /** Standard responsive per-view configs for carousels */
+        readonly perView: {
+            /** Default: 1 on mobile, 2 on sm, 3 on md+ */
+            readonly default: {
+                readonly base: 1;
+                readonly sm: 2;
+                readonly md: 3;
+            };
+            /** Cards: 1 on mobile, 2 on sm, 3 on md, 4 on lg+ */
+            readonly cards: {
+                readonly base: 1;
+                readonly sm: 2;
+                readonly md: 3;
+                readonly lg: 4;
+            };
+            /** Compact cards: 2 on mobile, 3 on sm, 4 on md, 5 on xl+ */
+            readonly compact: {
+                readonly base: 2;
+                readonly sm: 3;
+                readonly md: 4;
+                readonly xl: 5;
+            };
+            /** Reviews: 1 on mobile, 2 on sm, 3 on md/lg, 4 on 2xl+ */
+            readonly reviews: {
+                readonly base: 1;
+                readonly sm: 2;
+                readonly md: 3;
+                readonly lg: 3;
+                readonly "2xl": 4;
+            };
+            /** Events: 1 on mobile, 2 on sm, 3 on md/lg */
+            readonly events: {
+                readonly base: 1;
+                readonly sm: 2;
+                readonly md: 3;
+                readonly lg: 3;
+            };
+        };
+        readonly arrow: "w-10 h-10 rounded-2xl bg-white/85 dark:bg-slate-800/90 backdrop-blur-sm shadow-lg border border-zinc-300/70 dark:border-slate-600 text-zinc-800 dark:text-zinc-200 hover:-translate-y-0.5 hover:bg-white hover:shadow-xl hover:border-zinc-400 dark:hover:border-slate-500 active:scale-95 transition-all duration-200 flex items-center justify-center";
+        readonly dotActive: "w-8 h-2 !min-h-0 rounded-full bg-white shadow-sm transition-all duration-500";
+        readonly dotInactive: "w-2 h-2 !min-h-0 rounded-full bg-white/55 shadow-sm transition-all duration-500";
+    };
+};