@mohasinac/appkit 2.7.22 → 2.7.24

package/dist/tokens/tokens.css

@@ -1,436 +1,436 @@
-/*
- * @mohasinac/tokens — Design tokens as CSS custom properties
- *
- * All values are prefixed --appkit-* for the @mohasinac/* package system.
- * Consumer projects override only what they need to rebrand:
- *
- *   /* my-brand/globals.css * /
- *   @import "@mohasinac/tokens/tokens.css";
- *   :root {
- *     --appkit-color-primary:   #your-primary;
- *     --appkit-color-secondary: #your-secondary;
- *   }
- *
- * Default values reflect a lime + magenta palette (override --appkit-color-primary etc. to rebrand).
- */
-
-/* --- Colour — Brand ------------------------------------------------------- */
-/*
- * Light mode  (image 1 — cobalt-blue body + lime-green blades):
- *   primary   = Cobalt Blue   (dominant body colour)
- *   secondary = Lime Green    (blade / accent colour)
- *
- * Dark mode   (image 2 — hot-pink blades + near-black body):
- *   primary   = Hot Pink      (dominant accent colour)   ← overridden in .dark below
- *   secondary = Hot Pink      (same — unified accent)    ← overridden in .dark below
- */
-:root {
-  /* Primary — Cobalt Blue (light mode dominant, matches Beyblade 1 blue body) */
-  --appkit-color-primary:          #3570fc;
-  --appkit-color-primary-50:       #eef5ff;
-  --appkit-color-primary-100:      #d9e8ff;
-  --appkit-color-primary-200:      #bcd4ff;
-  --appkit-color-primary-300:      #8eb9ff;
-  --appkit-color-primary-400:      #5992ff;
-  --appkit-color-primary-500:      #3570fc;
-  --appkit-color-primary-600:      #1a55f2;
-  --appkit-color-primary-700:      #1343de;
-  --appkit-color-primary-800:      #1536b4;
-  --appkit-color-primary-900:      #18318e;
-  --appkit-color-primary-950:      #111e58;
-
-  /* Secondary — Lime Green (light mode accent, matches Beyblade 1 green blades) */
-  --appkit-color-secondary:        #65c408;
-  --appkit-color-secondary-50:     #f3ffe3;
-  --appkit-color-secondary-100:    #e4ffc5;
-  --appkit-color-secondary-200:    #c8ff90;
-  --appkit-color-secondary-300:    #a3f550;
-  --appkit-color-secondary-400:    #84e122;
-  --appkit-color-secondary-500:    #65c408;
-  --appkit-color-secondary-600:    #509c02;
-  --appkit-color-secondary-700:    #3e7708;
-  --appkit-color-secondary-800:    #345e0d;
-  --appkit-color-secondary-900:    #2c5011;
-  --appkit-color-secondary-950:    #142d03;
-
-  /* Cobalt — Blue accent (links, nav) */
-  --appkit-color-cobalt:           #3570fc;
-  --appkit-color-cobalt-50:        #eef5ff;
-  --appkit-color-cobalt-100:       #d9e8ff;
-  --appkit-color-cobalt-200:       #bcd4ff;
-  --appkit-color-cobalt-300:       #8eb9ff;
-  --appkit-color-cobalt-400:       #5992ff;
-  --appkit-color-cobalt-500:       #3570fc;
-  --appkit-color-cobalt-600:       #1a55f2;
-  --appkit-color-cobalt-700:       #1343de;
-  --appkit-color-cobalt-800:       #1536b4;
-  --appkit-color-cobalt-900:       #18318e;
-  --appkit-color-cobalt-950:       #111e58;
-
-  /* Accent — Metallic Steel (frame silver) */
-  --appkit-color-accent:           #8393b2;
-  --appkit-color-accent-50:        #f5f7fa;
-  --appkit-color-accent-100:       #eaeef4;
-  --appkit-color-accent-200:       #d1dae6;
-  --appkit-color-accent-300:       #adb9cf;
-  --appkit-color-accent-400:       #8393b2;
-  --appkit-color-accent-500:       #657599;
-  --appkit-color-accent-600:       #505f7f;
-  --appkit-color-accent-700:       #424d67;
-  --appkit-color-accent-800:       #394257;
-  --appkit-color-accent-900:       #333b4b;
-  --appkit-color-accent-950:       #222730;
-}
-
-/* --- Colour — Extended Palettes ------------------------------------------ */
-/* Tailwind-aligned palette scales. Pure values — no dark-mode override needed.   */
-/* Used by component CSS to reference specific shades via var(--appkit-color-*).  */
-:root {
-  /* Zinc (neutrals used for borders, muted text, surfaces) */
-  --appkit-color-zinc-50:  #fafafa;
-  --appkit-color-zinc-100: #f4f4f5;
-  --appkit-color-zinc-200: #e4e4e7;
-  --appkit-color-zinc-300: #d4d4d8;
-  --appkit-color-zinc-400: #a1a1aa;
-  --appkit-color-zinc-500: #71717a;
-  --appkit-color-zinc-600: #52525b;
-  --appkit-color-zinc-700: #3f3f46;
-  --appkit-color-zinc-800: #27272a;
-  --appkit-color-zinc-900: #18181b;
-  --appkit-color-zinc-950: #09090b;
-
-  /* Slate (used for dark-mode chrome, dev tools, panel backgrounds) */
-  --appkit-color-slate-50:  #f8fafc;
-  --appkit-color-slate-100: #f1f5f9;
-  --appkit-color-slate-200: #e2e8f0;
-  --appkit-color-slate-300: #cbd5e1;
-  --appkit-color-slate-400: #94a3b8;
-  --appkit-color-slate-500: #64748b;
-  --appkit-color-slate-600: #475569;
-  --appkit-color-slate-700: #334155;
-  --appkit-color-slate-800: #1e293b;
-  --appkit-color-slate-900: #0f172a;
-  --appkit-color-slate-950: #020617;
-
-  /* Emerald (success states, verified badges) */
-  --appkit-color-emerald-50:  #ecfdf5;
-  --appkit-color-emerald-100: #d1fae5;
-  --appkit-color-emerald-200: #a7f3d0;
-  --appkit-color-emerald-300: #6ee7b7;
-  --appkit-color-emerald-400: #34d399;
-  --appkit-color-emerald-500: #10b981;
-  --appkit-color-emerald-600: #059669;
-  --appkit-color-emerald-700: #047857;
-  --appkit-color-emerald-800: #065f46;
-  --appkit-color-emerald-900: #064e3b;
-  --appkit-color-emerald-950: #022c22;
-
-  /* Amber (warning states, pending badges) */
-  --appkit-color-amber-50:  #fffbeb;
-  --appkit-color-amber-100: #fef3c7;
-  --appkit-color-amber-200: #fde68a;
-  --appkit-color-amber-300: #fcd34d;
-  --appkit-color-amber-400: #fbbf24;
-  --appkit-color-amber-500: #f59e0b;
-  --appkit-color-amber-600: #d97706;
-  --appkit-color-amber-700: #b45309;
-  --appkit-color-amber-800: #92400e;
-  --appkit-color-amber-900: #78350f;
-  --appkit-color-amber-950: #451a03;
-
-  /* Rose (danger states, rejected badges) */
-  --appkit-color-rose-50:  #fff1f2;
-  --appkit-color-rose-100: #ffe4e6;
-  --appkit-color-rose-200: #fecdd3;
-  --appkit-color-rose-300: #fda4af;
-  --appkit-color-rose-400: #fb7185;
-  --appkit-color-rose-500: #f43f5e;
-  --appkit-color-rose-600: #e11d48;
-  --appkit-color-rose-700: #be123c;
-  --appkit-color-rose-800: #9f1239;
-  --appkit-color-rose-900: #881337;
-  --appkit-color-rose-950: #4c0519;
-
-  /* Sky (info states, link colors) */
-  --appkit-color-sky-50:  #f0f9ff;
-  --appkit-color-sky-100: #e0f2fe;
-  --appkit-color-sky-200: #bae6fd;
-  --appkit-color-sky-300: #7dd3fc;
-  --appkit-color-sky-400: #38bdf8;
-  --appkit-color-sky-500: #0ea5e9;
-  --appkit-color-sky-600: #0284c7;
-  --appkit-color-sky-700: #0369a1;
-  --appkit-color-sky-800: #075985;
-  --appkit-color-sky-900: #0c4a6e;
-  --appkit-color-sky-950: #082f49;
-
-  /* Purple (admin badges, premium states) */
-  --appkit-color-purple-50:  #faf5ff;
-  --appkit-color-purple-100: #f3e8ff;
-  --appkit-color-purple-200: #e9d5ff;
-  --appkit-color-purple-300: #d8b4fe;
-  --appkit-color-purple-400: #c084fc;
-  --appkit-color-purple-500: #a855f7;
-  --appkit-color-purple-600: #9333ea;
-  --appkit-color-purple-700: #7e22ce;
-  --appkit-color-purple-800: #6b21a8;
-  --appkit-color-purple-900: #581c87;
-  --appkit-color-purple-950: #3b0764;
-
-  /* Teal (seller badges, verified states) */
-  --appkit-color-teal-50:  #f0fdfa;
-  --appkit-color-teal-100: #ccfbf1;
-  --appkit-color-teal-200: #99f6e4;
-  --appkit-color-teal-300: #5eead4;
-  --appkit-color-teal-400: #2dd4bf;
-  --appkit-color-teal-500: #14b8a6;
-  --appkit-color-teal-600: #0d9488;
-  --appkit-color-teal-700: #0f766e;
-  --appkit-color-teal-800: #115e59;
-  --appkit-color-teal-900: #134e4a;
-  --appkit-color-teal-950: #042f2e;
-
-  /* Green (active/live indicators, availability) */
-  --appkit-color-green-50:  #f0fdf4;
-  --appkit-color-green-100: #dcfce7;
-  --appkit-color-green-200: #bbf7d0;
-  --appkit-color-green-300: #86efac;
-  --appkit-color-green-400: #4ade80;
-  --appkit-color-green-500: #22c55e;
-  --appkit-color-green-600: #16a34a;
-  --appkit-color-green-700: #15803d;
-  --appkit-color-green-800: #166534;
-  --appkit-color-green-900: #14532d;
-  --appkit-color-green-950: #052e16;
-}
-
-/* --- Colour — Social Brand Tokens ---------------------------------------- */
-:root {
-  --appkit-color-instagram:  #E1306C;
-  --appkit-color-facebook:   #1877F2;
-  --appkit-color-tiktok:     #010101;
-  --appkit-color-deviantart: #05CC47;
-  --appkit-color-whatsapp:   #25D366;
-  --appkit-color-youtube:    #FF0000;
-}
-
-/* --- Colour — Semantic (light mode defaults) ------------------------------ */
-:root {
-  --appkit-color-bg:               #fafafa;    /* zinc-50 */
-  --appkit-color-surface:          #ffffff;    /* white */
-  --appkit-color-surface-elevated: #ffffff;
-  --appkit-color-surface-input:    #ffffff;
-
-  --appkit-color-border:           #e4e4e7;    /* zinc-200 */
-  --appkit-color-border-subtle:    #f4f4f5;    /* zinc-100 */
-
-  --appkit-color-text:             #18181b;    /* zinc-900 */
-  --appkit-color-text-muted:       #71717a;    /* zinc-500 */
-  --appkit-color-text-faint:       #a1a1aa;    /* zinc-400 */
-  --appkit-color-text-on-primary:  #ffffff;
-  --appkit-color-text-on-dark:     #ffffff;
-
-  --appkit-color-success:          #059669;    /* emerald-600 */
-  --appkit-color-success-surface:  #ecfdf5;    /* emerald-50 */
-  --appkit-color-warning:          #d97706;    /* amber-600 */
-  --appkit-color-warning-surface:  #fffbeb;    /* amber-50 */
-  --appkit-color-error:            #dc2626;    /* red-600 */
-  --appkit-color-error-hover:      #ef4444;    /* red-500 — danger button hover */
-  --appkit-color-error-surface:    #fef2f2;    /* red-50 */
-  --appkit-color-error-title:      #7f1d1d;    /* red-900 */
-  --appkit-color-error-text:       #991b1b;    /* red-800 */
-  --appkit-color-info:             #0284c7;    /* sky-600 */
-  --appkit-color-info-surface:     #f0f9ff;    /* sky-50 */
-
-  --appkit-color-focus-ring:       #3570fc;    /* primary-500 = cobalt blue */
-}
-
-/* --- Colour — Brand (dark mode overrides) --------------------------------- */
-/* Dark mode: both primary & secondary become Hot Pink (Beyblade 2 dominant colour) */
-.dark {
-  --appkit-color-primary:          #e91e8c;
-  --appkit-color-primary-50:       #fdf0f8;
-  --appkit-color-primary-100:      #fce2f2;
-  --appkit-color-primary-200:      #fac6e6;
-  --appkit-color-primary-300:      #f79dd2;
-  --appkit-color-primary-400:      #f063b9;
-  --appkit-color-primary-500:      #e91e8c;
-  --appkit-color-primary-600:      #d4107a;
-  --appkit-color-primary-700:      #b00d66;
-  --appkit-color-primary-800:      #900f56;
-  --appkit-color-primary-900:      #771249;
-  --appkit-color-primary-950:      #480525;
-
-  --appkit-color-secondary:        #e91e8c;
-  --appkit-color-secondary-50:     #fdf0f8;
-  --appkit-color-secondary-100:    #fce2f2;
-  --appkit-color-secondary-200:    #fac6e6;
-  --appkit-color-secondary-300:    #f79dd2;
-  --appkit-color-secondary-400:    #f063b9;
-  --appkit-color-secondary-500:    #e91e8c;
-  --appkit-color-secondary-600:    #d4107a;
-  --appkit-color-secondary-700:    #b00d66;
-  --appkit-color-secondary-800:    #900f56;
-  --appkit-color-secondary-900:    #771249;
-  --appkit-color-secondary-950:    #480525;
-}
-
-/* --- Colour — Semantic (dark mode overrides) ------------------------------ */
-.dark {
-  --appkit-color-bg:               #020617;    /* slate-950 */
-  --appkit-color-surface:          #0f172a;    /* slate-900 */
-  --appkit-color-surface-elevated: rgba(15, 23, 42, 0.9);
-  --appkit-color-surface-input:    rgba(30, 41, 59, 0.6);  /* slate-800/60 */
-
-  --appkit-color-border:           #334155;    /* slate-700 */
-  --appkit-color-border-subtle:    rgba(30, 41, 59, 0.6);  /* slate-800/60 */
-
-  --appkit-color-text:             #fafafa;    /* zinc-50 */
-  --appkit-color-text-muted:       #a1a1aa;    /* zinc-400 */
-  --appkit-color-text-faint:       #71717a;    /* zinc-500 */
-
-  --appkit-color-success:          #34d399;    /* emerald-400 */
-  --appkit-color-success-surface:  rgba(6, 78, 59, 0.25);
-  --appkit-color-warning:          #fbbf24;    /* amber-400 */
-  --appkit-color-warning-surface:  #1c1508;    /* dark amber tint */
-  --appkit-color-error:            #f87171;    /* red-400 */
-  --appkit-color-error-surface:    rgba(127, 29, 29, 0.25);
-  --appkit-color-error-title:      #fecaca;    /* red-200 */
-  --appkit-color-error-text:       #fca5a5;    /* red-300 */
-  --appkit-color-info:             #38bdf8;    /* sky-400 */
-  --appkit-color-info-surface:     rgba(12, 74, 110, 0.25);
-
-  --appkit-color-focus-ring:       #f063b9;    /* primary-400 in dark = hot pink */
-  /* Dark-mode glow: use hot pink instead of cobalt */
-  --appkit-shadow-glow:            0 0 0 1px rgba(233,30,140,0.12), 0 4px 16px -4px rgba(233,30,140,0.22);
-  --appkit-shadow-glow-pink:       0 0 0 1px rgba(233,30,140,0.14), 0 4px 20px -4px rgba(233,30,140,0.28);
-}
-
-/* --- Typography ----------------------------------------------------------- */
-:root {
-  --appkit-font-sans:      var(--font-body), ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-  --appkit-font-display:   var(--font-display), "Poppins", ui-sans-serif, system-ui, sans-serif;
-  --appkit-font-editorial: var(--font-editorial), "Georgia", serif;
-  --appkit-font-mono:      ui-monospace, "SFMono-Regular", "Cascadia Mono", "Consolas", monospace;
-
-  --appkit-text-2xs:       0.625rem;   /* 10px */
-  --appkit-text-xs:        0.75rem;    /* 12px */
-  --appkit-text-sm:        0.875rem;   /* 14px */
-  --appkit-text-base:      1rem;       /* 16px */
-  --appkit-text-lg:        1.125rem;   /* 18px */
-  --appkit-text-xl:        1.25rem;    /* 20px */
-  --appkit-text-2xl:       1.5rem;     /* 24px */
-  --appkit-text-3xl:       1.875rem;   /* 30px */
-  --appkit-text-4xl:       2.25rem;    /* 36px */
-  --appkit-text-5xl:       3rem;       /* 48px */
-
-  --appkit-leading-tight:  1.15;
-  --appkit-leading-snug:   1.375;
-  --appkit-leading-normal: 1.5;
-  --appkit-leading-relaxed: 1.7;
-
-  --appkit-tracking-tighter: -0.02em;
-  --appkit-tracking-tight:   -0.011em;
-  --appkit-tracking-normal:  0em;
-  --appkit-tracking-wide:    0.025em;
-  --appkit-tracking-wider:   0.05em;
-}
-
-/* --- Spacing -------------------------------------------------------------- */
-:root {
-  --appkit-space-1:    0.25rem;    /*  4px */
-  --appkit-space-2:    0.5rem;     /*  8px */
-  --appkit-space-3:    0.75rem;    /* 12px */
-  --appkit-space-4:    1rem;       /* 16px */
-  --appkit-space-5:    1.25rem;    /* 20px */
-  --appkit-space-6:    1.5rem;     /* 24px */
-  --appkit-space-8:    2rem;       /* 32px */
-  --appkit-space-10:   2.5rem;     /* 40px */
-  --appkit-space-12:   3rem;       /* 48px */
-  --appkit-space-16:   4rem;       /* 64px */
-  --appkit-space-20:   5rem;       /* 80px */
-  --appkit-space-18:   4.5rem;     /* 72px — custom */
-  --appkit-space-24:   6rem;       /* 96px */
-}
-
-/* --- Border Radius -------------------------------------------------------- */
-:root {
-  --appkit-radius-sm:   0.25rem;    /*  4px */
-  --appkit-radius-md:   0.375rem;   /*  6px */
-  --appkit-radius-lg:   0.5rem;     /*  8px */
-  --appkit-radius-xl:   0.75rem;    /* 12px */
-  --appkit-radius-2xl:  1rem;       /* 16px */
-  --appkit-radius-3xl:  1.5rem;     /* 24px */
-  --appkit-radius-card: 1rem;       /* 16px — alias */
-  --appkit-radius-btn:  0.75rem;    /* 12px — rounded-xl */
-  --appkit-radius-full: 9999px;
-}
-
-/* --- Shadow --------------------------------------------------------------- */
-:root {
-  --appkit-shadow-sm:      0 1px 2px 0 rgba(0,0,0,0.05);
-  --appkit-shadow-md:      0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
-  --appkit-shadow-lg:      0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
-  --appkit-shadow-xl:      0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
-  --appkit-shadow-soft:    0 2px 15px -3px rgba(0,0,0,0.07), 0 10px 20px -2px rgba(0,0,0,0.04);
-  /* Themed glow: tight ring + soft bloom — no bleed into neighbours */
-  --appkit-shadow-glow:      0 0 0 1px rgba(53,112,252,0.10), 0 4px 16px -4px rgba(53,112,252,0.20);
-  --appkit-shadow-glow-pink: 0 0 0 1px rgba(233,30,140,0.12), 0 4px 16px -4px rgba(233,30,140,0.22);
-}
-
-/* --- Z-index -------------------------------------------------------------- */
-:root {
-  --appkit-z-below:          -1;
-  --appkit-z-base:            0;
-  --appkit-z-raised:         10;
-  --appkit-z-dropdown:       30;
-  --appkit-z-search-backdrop: 35;
-  --appkit-z-overlay:        45;
-  --appkit-z-navbar:         40;
-  --appkit-z-bottom-nav:     40;
-  --appkit-z-sidebar:        50;
-  --appkit-z-title-bar:      50;
-  --appkit-z-modal:          60;
-  --appkit-z-toast:          70;
-  --appkit-z-tooltip:        80;
-
-  /* Layout dimensions */
-  --appkit-navbar-height:     2.5rem;  /* h-10 = 40px (mobile), h-12 = 48px (md) */
-  --appkit-sidebar-width:     20rem;   /* w-80 = 320px */
-  --appkit-bottom-nav-height: 3.5rem;  /* h-14 = 56px */
-  --appkit-title-bar-height:  3rem;    /* h-12 = 48px */
-}
-
-/* --- Component Sizes ------------------------------------------------------- */
-:root {
-  /* Input heights */
-  --appkit-size-input-sm: 2rem;     /*  32px */
-  --appkit-size-input-md: 2.5rem;   /*  40px */
-  --appkit-size-input-lg: 2.75rem;  /*  44px */
-
-  /* Avatar sizes */
-  --appkit-size-avatar-xs: 1.5rem;  /*  24px */
-  --appkit-size-avatar-sm: 2rem;    /*  32px */
-  --appkit-size-avatar-md: 2.5rem;  /*  40px */
-  --appkit-size-avatar-lg: 3rem;    /*  48px */
-}
-
-/* --- Grid ------------------------------------------------------------------ */
-:root {
-  /* Minimum column widths for auto-fill grid layouts (used in minmax()) */
-  --appkit-grid-min-card-xs: 130px;
-  --appkit-grid-min-card-sm: 160px;
-  --appkit-grid-min-card:    220px;
-  --appkit-grid-min-card-lg: 300px;
-}
-
-/* --- Transition ----------------------------------------------------------- */
-:root {
-  --appkit-duration-fast:   150ms;
-  --appkit-duration-base:   200ms;
-  --appkit-duration-slow:   300ms;
-  --appkit-duration-slower: 400ms;
-  --appkit-ease-default:    cubic-bezier(0.4, 0, 0.2, 1);
-  --appkit-ease-in:         cubic-bezier(0.4, 0, 1, 1);
-  --appkit-ease-out:        cubic-bezier(0, 0, 0.2, 1);
-}
+/*
+ * @mohasinac/tokens — Design tokens as CSS custom properties
+ *
+ * All values are prefixed --appkit-* for the @mohasinac/* package system.
+ * Consumer projects override only what they need to rebrand:
+ *
+ *   /* my-brand/globals.css * /
+ *   @import "@mohasinac/tokens/tokens.css";
+ *   :root {
+ *     --appkit-color-primary:   #your-primary;
+ *     --appkit-color-secondary: #your-secondary;
+ *   }
+ *
+ * Default values reflect a lime + magenta palette (override --appkit-color-primary etc. to rebrand).
+ */
+
+/* --- Colour — Brand ------------------------------------------------------- */
+/*
+ * Light mode  (image 1 — cobalt-blue body + lime-green blades):
+ *   primary   = Cobalt Blue   (dominant body colour)
+ *   secondary = Lime Green    (blade / accent colour)
+ *
+ * Dark mode   (image 2 — hot-pink blades + near-black body):
+ *   primary   = Hot Pink      (dominant accent colour)   ← overridden in .dark below
+ *   secondary = Hot Pink      (same — unified accent)    ← overridden in .dark below
+ */
+:root {
+  /* Primary — Cobalt Blue (light mode dominant, matches Beyblade 1 blue body) */
+  --appkit-color-primary:          #3570fc;
+  --appkit-color-primary-50:       #eef5ff;
+  --appkit-color-primary-100:      #d9e8ff;
+  --appkit-color-primary-200:      #bcd4ff;
+  --appkit-color-primary-300:      #8eb9ff;
+  --appkit-color-primary-400:      #5992ff;
+  --appkit-color-primary-500:      #3570fc;
+  --appkit-color-primary-600:      #1a55f2;
+  --appkit-color-primary-700:      #1343de;
+  --appkit-color-primary-800:      #1536b4;
+  --appkit-color-primary-900:      #18318e;
+  --appkit-color-primary-950:      #111e58;
+
+  /* Secondary — Lime Green (light mode accent, matches Beyblade 1 green blades) */
+  --appkit-color-secondary:        #65c408;
+  --appkit-color-secondary-50:     #f3ffe3;
+  --appkit-color-secondary-100:    #e4ffc5;
+  --appkit-color-secondary-200:    #c8ff90;
+  --appkit-color-secondary-300:    #a3f550;
+  --appkit-color-secondary-400:    #84e122;
+  --appkit-color-secondary-500:    #65c408;
+  --appkit-color-secondary-600:    #509c02;
+  --appkit-color-secondary-700:    #3e7708;
+  --appkit-color-secondary-800:    #345e0d;
+  --appkit-color-secondary-900:    #2c5011;
+  --appkit-color-secondary-950:    #142d03;
+
+  /* Cobalt — Blue accent (links, nav) */
+  --appkit-color-cobalt:           #3570fc;
+  --appkit-color-cobalt-50:        #eef5ff;
+  --appkit-color-cobalt-100:       #d9e8ff;
+  --appkit-color-cobalt-200:       #bcd4ff;
+  --appkit-color-cobalt-300:       #8eb9ff;
+  --appkit-color-cobalt-400:       #5992ff;
+  --appkit-color-cobalt-500:       #3570fc;
+  --appkit-color-cobalt-600:       #1a55f2;
+  --appkit-color-cobalt-700:       #1343de;
+  --appkit-color-cobalt-800:       #1536b4;
+  --appkit-color-cobalt-900:       #18318e;
+  --appkit-color-cobalt-950:       #111e58;
+
+  /* Accent — Metallic Steel (frame silver) */
+  --appkit-color-accent:           #8393b2;
+  --appkit-color-accent-50:        #f5f7fa;
+  --appkit-color-accent-100:       #eaeef4;
+  --appkit-color-accent-200:       #d1dae6;
+  --appkit-color-accent-300:       #adb9cf;
+  --appkit-color-accent-400:       #8393b2;
+  --appkit-color-accent-500:       #657599;
+  --appkit-color-accent-600:       #505f7f;
+  --appkit-color-accent-700:       #424d67;
+  --appkit-color-accent-800:       #394257;
+  --appkit-color-accent-900:       #333b4b;
+  --appkit-color-accent-950:       #222730;
+}
+
+/* --- Colour — Extended Palettes ------------------------------------------ */
+/* Tailwind-aligned palette scales. Pure values — no dark-mode override needed.   */
+/* Used by component CSS to reference specific shades via var(--appkit-color-*).  */
+:root {
+  /* Zinc (neutrals used for borders, muted text, surfaces) */
+  --appkit-color-zinc-50:  #fafafa;
+  --appkit-color-zinc-100: #f4f4f5;
+  --appkit-color-zinc-200: #e4e4e7;
+  --appkit-color-zinc-300: #d4d4d8;
+  --appkit-color-zinc-400: #a1a1aa;
+  --appkit-color-zinc-500: #71717a;
+  --appkit-color-zinc-600: #52525b;
+  --appkit-color-zinc-700: #3f3f46;
+  --appkit-color-zinc-800: #27272a;
+  --appkit-color-zinc-900: #18181b;
+  --appkit-color-zinc-950: #09090b;
+
+  /* Slate (used for dark-mode chrome, dev tools, panel backgrounds) */
+  --appkit-color-slate-50:  #f8fafc;
+  --appkit-color-slate-100: #f1f5f9;
+  --appkit-color-slate-200: #e2e8f0;
+  --appkit-color-slate-300: #cbd5e1;
+  --appkit-color-slate-400: #94a3b8;
+  --appkit-color-slate-500: #64748b;
+  --appkit-color-slate-600: #475569;
+  --appkit-color-slate-700: #334155;
+  --appkit-color-slate-800: #1e293b;
+  --appkit-color-slate-900: #0f172a;
+  --appkit-color-slate-950: #020617;
+
+  /* Emerald (success states, verified badges) */
+  --appkit-color-emerald-50:  #ecfdf5;
+  --appkit-color-emerald-100: #d1fae5;
+  --appkit-color-emerald-200: #a7f3d0;
+  --appkit-color-emerald-300: #6ee7b7;
+  --appkit-color-emerald-400: #34d399;
+  --appkit-color-emerald-500: #10b981;
+  --appkit-color-emerald-600: #059669;
+  --appkit-color-emerald-700: #047857;
+  --appkit-color-emerald-800: #065f46;
+  --appkit-color-emerald-900: #064e3b;
+  --appkit-color-emerald-950: #022c22;
+
+  /* Amber (warning states, pending badges) */
+  --appkit-color-amber-50:  #fffbeb;
+  --appkit-color-amber-100: #fef3c7;
+  --appkit-color-amber-200: #fde68a;
+  --appkit-color-amber-300: #fcd34d;
+  --appkit-color-amber-400: #fbbf24;
+  --appkit-color-amber-500: #f59e0b;
+  --appkit-color-amber-600: #d97706;
+  --appkit-color-amber-700: #b45309;
+  --appkit-color-amber-800: #92400e;
+  --appkit-color-amber-900: #78350f;
+  --appkit-color-amber-950: #451a03;
+
+  /* Rose (danger states, rejected badges) */
+  --appkit-color-rose-50:  #fff1f2;
+  --appkit-color-rose-100: #ffe4e6;
+  --appkit-color-rose-200: #fecdd3;
+  --appkit-color-rose-300: #fda4af;
+  --appkit-color-rose-400: #fb7185;
+  --appkit-color-rose-500: #f43f5e;
+  --appkit-color-rose-600: #e11d48;
+  --appkit-color-rose-700: #be123c;
+  --appkit-color-rose-800: #9f1239;
+  --appkit-color-rose-900: #881337;
+  --appkit-color-rose-950: #4c0519;
+
+  /* Sky (info states, link colors) */
+  --appkit-color-sky-50:  #f0f9ff;
+  --appkit-color-sky-100: #e0f2fe;
+  --appkit-color-sky-200: #bae6fd;
+  --appkit-color-sky-300: #7dd3fc;
+  --appkit-color-sky-400: #38bdf8;
+  --appkit-color-sky-500: #0ea5e9;
+  --appkit-color-sky-600: #0284c7;
+  --appkit-color-sky-700: #0369a1;
+  --appkit-color-sky-800: #075985;
+  --appkit-color-sky-900: #0c4a6e;
+  --appkit-color-sky-950: #082f49;
+
+  /* Purple (admin badges, premium states) */
+  --appkit-color-purple-50:  #faf5ff;
+  --appkit-color-purple-100: #f3e8ff;
+  --appkit-color-purple-200: #e9d5ff;
+  --appkit-color-purple-300: #d8b4fe;
+  --appkit-color-purple-400: #c084fc;
+  --appkit-color-purple-500: #a855f7;
+  --appkit-color-purple-600: #9333ea;
+  --appkit-color-purple-700: #7e22ce;
+  --appkit-color-purple-800: #6b21a8;
+  --appkit-color-purple-900: #581c87;
+  --appkit-color-purple-950: #3b0764;
+
+  /* Teal (seller badges, verified states) */
+  --appkit-color-teal-50:  #f0fdfa;
+  --appkit-color-teal-100: #ccfbf1;
+  --appkit-color-teal-200: #99f6e4;
+  --appkit-color-teal-300: #5eead4;
+  --appkit-color-teal-400: #2dd4bf;
+  --appkit-color-teal-500: #14b8a6;
+  --appkit-color-teal-600: #0d9488;
+  --appkit-color-teal-700: #0f766e;
+  --appkit-color-teal-800: #115e59;
+  --appkit-color-teal-900: #134e4a;
+  --appkit-color-teal-950: #042f2e;
+
+  /* Green (active/live indicators, availability) */
+  --appkit-color-green-50:  #f0fdf4;
+  --appkit-color-green-100: #dcfce7;
+  --appkit-color-green-200: #bbf7d0;
+  --appkit-color-green-300: #86efac;
+  --appkit-color-green-400: #4ade80;
+  --appkit-color-green-500: #22c55e;
+  --appkit-color-green-600: #16a34a;
+  --appkit-color-green-700: #15803d;
+  --appkit-color-green-800: #166534;
+  --appkit-color-green-900: #14532d;
+  --appkit-color-green-950: #052e16;
+}
+
+/* --- Colour — Social Brand Tokens ---------------------------------------- */
+:root {
+  --appkit-color-instagram:  #E1306C;
+  --appkit-color-facebook:   #1877F2;
+  --appkit-color-tiktok:     #010101;
+  --appkit-color-deviantart: #05CC47;
+  --appkit-color-whatsapp:   #25D366;
+  --appkit-color-youtube:    #FF0000;
+}
+
+/* --- Colour — Semantic (light mode defaults) ------------------------------ */
+:root {
+  --appkit-color-bg:               #fafafa;    /* zinc-50 */
+  --appkit-color-surface:          #ffffff;    /* white */
+  --appkit-color-surface-elevated: #ffffff;
+  --appkit-color-surface-input:    #ffffff;
+
+  --appkit-color-border:           #e4e4e7;    /* zinc-200 */
+  --appkit-color-border-subtle:    #f4f4f5;    /* zinc-100 */
+
+  --appkit-color-text:             #18181b;    /* zinc-900 */
+  --appkit-color-text-muted:       #71717a;    /* zinc-500 */
+  --appkit-color-text-faint:       #a1a1aa;    /* zinc-400 */
+  --appkit-color-text-on-primary:  #ffffff;
+  --appkit-color-text-on-dark:     #ffffff;
+
+  --appkit-color-success:          #059669;    /* emerald-600 */
+  --appkit-color-success-surface:  #ecfdf5;    /* emerald-50 */
+  --appkit-color-warning:          #d97706;    /* amber-600 */
+  --appkit-color-warning-surface:  #fffbeb;    /* amber-50 */
+  --appkit-color-error:            #dc2626;    /* red-600 */
+  --appkit-color-error-hover:      #ef4444;    /* red-500 — danger button hover */
+  --appkit-color-error-surface:    #fef2f2;    /* red-50 */
+  --appkit-color-error-title:      #7f1d1d;    /* red-900 */
+  --appkit-color-error-text:       #991b1b;    /* red-800 */
+  --appkit-color-info:             #0284c7;    /* sky-600 */
+  --appkit-color-info-surface:     #f0f9ff;    /* sky-50 */
+
+  --appkit-color-focus-ring:       #3570fc;    /* primary-500 = cobalt blue */
+}
+
+/* --- Colour — Brand (dark mode overrides) --------------------------------- */
+/* Dark mode: both primary & secondary become Hot Pink (Beyblade 2 dominant colour) */
+.dark {
+  --appkit-color-primary:          #e91e8c;
+  --appkit-color-primary-50:       #fdf0f8;
+  --appkit-color-primary-100:      #fce2f2;
+  --appkit-color-primary-200:      #fac6e6;
+  --appkit-color-primary-300:      #f79dd2;
+  --appkit-color-primary-400:      #f063b9;
+  --appkit-color-primary-500:      #e91e8c;
+  --appkit-color-primary-600:      #d4107a;
+  --appkit-color-primary-700:      #b00d66;
+  --appkit-color-primary-800:      #900f56;
+  --appkit-color-primary-900:      #771249;
+  --appkit-color-primary-950:      #480525;
+
+  --appkit-color-secondary:        #e91e8c;
+  --appkit-color-secondary-50:     #fdf0f8;
+  --appkit-color-secondary-100:    #fce2f2;
+  --appkit-color-secondary-200:    #fac6e6;
+  --appkit-color-secondary-300:    #f79dd2;
+  --appkit-color-secondary-400:    #f063b9;
+  --appkit-color-secondary-500:    #e91e8c;
+  --appkit-color-secondary-600:    #d4107a;
+  --appkit-color-secondary-700:    #b00d66;
+  --appkit-color-secondary-800:    #900f56;
+  --appkit-color-secondary-900:    #771249;
+  --appkit-color-secondary-950:    #480525;
+}
+
+/* --- Colour — Semantic (dark mode overrides) ------------------------------ */
+.dark {
+  --appkit-color-bg:               #020617;    /* slate-950 */
+  --appkit-color-surface:          #0f172a;    /* slate-900 */
+  --appkit-color-surface-elevated: rgba(15, 23, 42, 0.9);
+  --appkit-color-surface-input:    rgba(30, 41, 59, 0.6);  /* slate-800/60 */
+
+  --appkit-color-border:           #334155;    /* slate-700 */
+  --appkit-color-border-subtle:    rgba(30, 41, 59, 0.6);  /* slate-800/60 */
+
+  --appkit-color-text:             #fafafa;    /* zinc-50 */
+  --appkit-color-text-muted:       #a1a1aa;    /* zinc-400 */
+  --appkit-color-text-faint:       #71717a;    /* zinc-500 */
+
+  --appkit-color-success:          #34d399;    /* emerald-400 */
+  --appkit-color-success-surface:  rgba(6, 78, 59, 0.25);
+  --appkit-color-warning:          #fbbf24;    /* amber-400 */
+  --appkit-color-warning-surface:  #1c1508;    /* dark amber tint */
+  --appkit-color-error:            #f87171;    /* red-400 */
+  --appkit-color-error-surface:    rgba(127, 29, 29, 0.25);
+  --appkit-color-error-title:      #fecaca;    /* red-200 */
+  --appkit-color-error-text:       #fca5a5;    /* red-300 */
+  --appkit-color-info:             #38bdf8;    /* sky-400 */
+  --appkit-color-info-surface:     rgba(12, 74, 110, 0.25);
+
+  --appkit-color-focus-ring:       #f063b9;    /* primary-400 in dark = hot pink */
+  /* Dark-mode glow: use hot pink instead of cobalt */
+  --appkit-shadow-glow:            0 0 0 1px rgba(233,30,140,0.12), 0 4px 16px -4px rgba(233,30,140,0.22);
+  --appkit-shadow-glow-pink:       0 0 0 1px rgba(233,30,140,0.14), 0 4px 20px -4px rgba(233,30,140,0.28);
+}
+
+/* --- Typography ----------------------------------------------------------- */
+:root {
+  --appkit-font-sans:      var(--font-body), ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --appkit-font-display:   var(--font-display), "Poppins", ui-sans-serif, system-ui, sans-serif;
+  --appkit-font-editorial: var(--font-editorial), "Georgia", serif;
+  --appkit-font-mono:      ui-monospace, "SFMono-Regular", "Cascadia Mono", "Consolas", monospace;
+
+  --appkit-text-2xs:       0.625rem;   /* 10px */
+  --appkit-text-xs:        0.75rem;    /* 12px */
+  --appkit-text-sm:        0.875rem;   /* 14px */
+  --appkit-text-base:      1rem;       /* 16px */
+  --appkit-text-lg:        1.125rem;   /* 18px */
+  --appkit-text-xl:        1.25rem;    /* 20px */
+  --appkit-text-2xl:       1.5rem;     /* 24px */
+  --appkit-text-3xl:       1.875rem;   /* 30px */
+  --appkit-text-4xl:       2.25rem;    /* 36px */
+  --appkit-text-5xl:       3rem;       /* 48px */
+
+  --appkit-leading-tight:  1.15;
+  --appkit-leading-snug:   1.375;
+  --appkit-leading-normal: 1.5;
+  --appkit-leading-relaxed: 1.7;
+
+  --appkit-tracking-tighter: -0.02em;
+  --appkit-tracking-tight:   -0.011em;
+  --appkit-tracking-normal:  0em;
+  --appkit-tracking-wide:    0.025em;
+  --appkit-tracking-wider:   0.05em;
+}
+
+/* --- Spacing -------------------------------------------------------------- */
+:root {
+  --appkit-space-1:    0.25rem;    /*  4px */
+  --appkit-space-2:    0.5rem;     /*  8px */
+  --appkit-space-3:    0.75rem;    /* 12px */
+  --appkit-space-4:    1rem;       /* 16px */
+  --appkit-space-5:    1.25rem;    /* 20px */
+  --appkit-space-6:    1.5rem;     /* 24px */
+  --appkit-space-8:    2rem;       /* 32px */
+  --appkit-space-10:   2.5rem;     /* 40px */
+  --appkit-space-12:   3rem;       /* 48px */
+  --appkit-space-16:   4rem;       /* 64px */
+  --appkit-space-20:   5rem;       /* 80px */
+  --appkit-space-18:   4.5rem;     /* 72px — custom */
+  --appkit-space-24:   6rem;       /* 96px */
+}
+
+/* --- Border Radius -------------------------------------------------------- */
+:root {
+  --appkit-radius-sm:   0.25rem;    /*  4px */
+  --appkit-radius-md:   0.375rem;   /*  6px */
+  --appkit-radius-lg:   0.5rem;     /*  8px */
+  --appkit-radius-xl:   0.75rem;    /* 12px */
+  --appkit-radius-2xl:  1rem;       /* 16px */
+  --appkit-radius-3xl:  1.5rem;     /* 24px */
+  --appkit-radius-card: 1rem;       /* 16px — alias */
+  --appkit-radius-btn:  0.75rem;    /* 12px — rounded-xl */
+  --appkit-radius-full: 9999px;
+}
+
+/* --- Shadow --------------------------------------------------------------- */
+:root {
+  --appkit-shadow-sm:      0 1px 2px 0 rgba(0,0,0,0.05);
+  --appkit-shadow-md:      0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
+  --appkit-shadow-lg:      0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
+  --appkit-shadow-xl:      0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
+  --appkit-shadow-soft:    0 2px 15px -3px rgba(0,0,0,0.07), 0 10px 20px -2px rgba(0,0,0,0.04);
+  /* Themed glow: tight ring + soft bloom — no bleed into neighbours */
+  --appkit-shadow-glow:      0 0 0 1px rgba(53,112,252,0.10), 0 4px 16px -4px rgba(53,112,252,0.20);
+  --appkit-shadow-glow-pink: 0 0 0 1px rgba(233,30,140,0.12), 0 4px 16px -4px rgba(233,30,140,0.22);
+}
+
+/* --- Z-index -------------------------------------------------------------- */
+:root {
+  --appkit-z-below:          -1;
+  --appkit-z-base:            0;
+  --appkit-z-raised:         10;
+  --appkit-z-dropdown:       30;
+  --appkit-z-search-backdrop: 35;
+  --appkit-z-overlay:        45;
+  --appkit-z-navbar:         40;
+  --appkit-z-bottom-nav:     40;
+  --appkit-z-sidebar:        50;
+  --appkit-z-title-bar:      50;
+  --appkit-z-modal:          60;
+  --appkit-z-toast:          70;
+  --appkit-z-tooltip:        80;
+
+  /* Layout dimensions */
+  --appkit-navbar-height:     2.5rem;  /* h-10 = 40px (mobile), h-12 = 48px (md) */
+  --appkit-sidebar-width:     20rem;   /* w-80 = 320px */
+  --appkit-bottom-nav-height: 3.5rem;  /* h-14 = 56px */
+  --appkit-title-bar-height:  3rem;    /* h-12 = 48px */
+}
+
+/* --- Component Sizes ------------------------------------------------------- */
+:root {
+  /* Input heights */
+  --appkit-size-input-sm: 2rem;     /*  32px */
+  --appkit-size-input-md: 2.5rem;   /*  40px */
+  --appkit-size-input-lg: 2.75rem;  /*  44px */
+
+  /* Avatar sizes */
+  --appkit-size-avatar-xs: 1.5rem;  /*  24px */
+  --appkit-size-avatar-sm: 2rem;    /*  32px */
+  --appkit-size-avatar-md: 2.5rem;  /*  40px */
+  --appkit-size-avatar-lg: 3rem;    /*  48px */
+}
+
+/* --- Grid ------------------------------------------------------------------ */
+:root {
+  /* Minimum column widths for auto-fill grid layouts (used in minmax()) */
+  --appkit-grid-min-card-xs: 130px;
+  --appkit-grid-min-card-sm: 160px;
+  --appkit-grid-min-card:    220px;
+  --appkit-grid-min-card-lg: 300px;
+}
+
+/* --- Transition ----------------------------------------------------------- */
+:root {
+  --appkit-duration-fast:   150ms;
+  --appkit-duration-base:   200ms;
+  --appkit-duration-slow:   300ms;
+  --appkit-duration-slower: 400ms;
+  --appkit-ease-default:    cubic-bezier(0.4, 0, 0.2, 1);
+  --appkit-ease-in:         cubic-bezier(0.4, 0, 1, 1);
+  --appkit-ease-out:        cubic-bezier(0, 0, 0.2, 1);
+}