@menumalsuite/design-system 0.0.5 → 0.1.0

package/app/assets/css/main.css

@@ -1,476 +1,198 @@
-/* AUTO-GENERATED — non editare manualmente. Usa: node scripts/generate-theme.js */
 @import "tailwindcss";
 @import "@nuxt/ui";
 
-/*
- * AUTO-GENERATED — DO NOT EDIT MANUALLY
- *
- * Bidirectional sync via GitFig:
- *   Figma → GitHub: designer edits variables in Figma, GitFig pushes tokens/,
- *                   GitHub Action regenerates this file automatically.
- *   GitHub → Figma: developer edits tokens/*.json, pushes to main,
- *                   designer opens GitFig in Figma → Pull to sync variables.
- *
- * To regenerate manually: node scripts/generate-theme.js
- * Source of truth: tokens/ (W3C DTCG format)
- * Last updated: 2026-05-18T07:55:55.828Z
- */
-
 @theme {
-  /* ================================================
-     FONTS & TYPOGRAPHY
-     ================================================ */
-  /* --- Font Sizes --- */
-  --text-lg: 1.125rem;
-  --text-sm: 0.875rem;
-  --text-xl: 1.25rem;
-  --text-xs: 0.75rem;
-  --text-2xl: 1.5rem;
-  --text-3xl: 1.875rem;
-  --text-4xl: 2.25rem;
-  --text-5xl: 3rem;
-  --text-6xl: 3.75rem;
-  --text-7xl: 4.5rem;
-  --text-8xl: 6rem;
-  --text-9xl: 8rem;
-  --text-base: 1rem;
-
   /* --- Fonts --- */
-  --font-mono: 'Roboto Mono', monospace;
-  --font-sans: 'Inter', sans-serif;
-  --font-serif: 'Georgia', serif;
-
-  /* --- Font Weights --- */
-  --font-weight-bold: 700;
-  --font-weight-thin: 100;
-  --font-weight-black: 900;
-  --font-weight-light: 300;
-  --font-weight-medium: 500;
-  --font-weight-normal: 400;
-  --font-weight-semibold: 600;
-  --font-weight-extrabold: 800;
-  --font-weight-extralight: 200;
-
-  /* --- Line Heights --- */
-  --leading-1: 1rem;
-  --leading-2: 1.25rem;
-  --leading-3: 1.5rem;
-  --leading-4: 1.75rem;
-  --leading-5: 2rem;
-  --leading-6: 2.25rem;
-  --leading-7: 2.5rem;
-  --leading-8: 3rem;
-  --leading-9: 3rem;
-  --leading-10: 3.75rem;
-  --leading-11: 4.5rem;
-  --leading-12: 6rem;
-  --leading-13: 8rem;
-
-  /* --- Letter Spacing --- */
-  --tracking-wide: 0.02500000037252903em;
-  --tracking-tight: -0.02500000037252903em;
-  --tracking-wider: 0.05000000074505806em;
-  --tracking-normal: 0em;
-  --tracking-widest: 0.10000000149011612em;
-  --tracking-tighter: -0.05000000074505806em;
-
-  /* ================================================
-     SPACING
-     ================================================ */
-  --spacing-0: 0px;
-  --spacing-1: 0.25rem;
-  --spacing-2: 0.5rem;
-  --spacing-3: 0.75rem;
-  --spacing-4: 1rem;
-  --spacing-5: 1.25rem;
-  --spacing-6: 1.5rem;
-  --spacing-7: 1.75rem;
-  --spacing-8: 2rem;
-  --spacing-9: 2.25rem;
-  --spacing-10: 2.5rem;
-  --spacing-11: 2.75rem;
-  --spacing-12: 3rem;
-  --spacing-14: 3.5rem;
-  --spacing-16: 4rem;
-  --spacing-20: 5rem;
-  --spacing-24: 6rem;
-  --spacing-28: 7rem;
-  --spacing-32: 8rem;
-  --spacing-36: 9rem;
-  --spacing-40: 10rem;
-  --spacing-44: 11rem;
-  --spacing-48: 12rem;
-  --spacing-52: 13rem;
-  --spacing-56: 14rem;
-  --spacing-60: 15rem;
-  --spacing-64: 16rem;
-  --spacing-72: 18rem;
-  --spacing-80: 20rem;
-  --spacing-96: 24rem;
-  --spacing-0-5: 0.125rem;
-  --spacing-1-5: 0.375rem;
-  --spacing-2-5: 0.625rem;
-  --spacing-3-5: 0.875rem;
-
-  /* ================================================
-     BORDER RADIUS
-     ================================================ */
-  --radius-lg: 0.5rem;
-  --radius-md: 0.375rem;
-  --radius-sm: 0.125rem;
-  --radius-xl: 0.75rem;
-  --radius-2xl: 1rem;
-  --radius-3xl: 1.5rem;
-  --radius-full: 9999px;
-  --radius-none: 0px;
-  --radius: 0.25rem;
-
-  /* ================================================
-     LAYOUT
-     ================================================ */
-  /* --- Container --- */
-  --container-lg: 32rem;
-  --container-md: 28rem;
-  --container-sm: 24rem;
-  --container-xl: 36rem;
-  --container-xs: 20rem;
-  --container-2xl: 42rem;
-  --container-3xl: 48rem;
-  --container-4xl: 56rem;
-  --container-5xl: 64rem;
-  --container-6xl: 72rem;
-  --container-7xl: 80rem;
-
-  /* --- Breakpoint --- */
-  --breakpoint-lg: 1024px;
-  --breakpoint-md: 768px;
-  --breakpoint-sm: 630px;
-  --breakpoint-xl: 1280px;
-  --breakpoint-2xl: 1536px;
-
-  /* ================================================
-     SHADOWS
-     ================================================ */
-  --shadow-lg: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
-  --shadow-md: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
-  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
-  --shadow-2xs: 0 1px 0 0 rgb(0 0 0 / 0.05);
-  --shadow-none: none;
-  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
-  --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-
-  /* ================================================
-     BLUR
-     ================================================ */
-  --blur-lg: 16px;
-  --blur-md: 12px;
-  --blur-sm: 4px;
-  --blur-xl: 24px;
-  --blur-2xl: 40px;
-  --blur-3xl: 64px;
-  --blur-none: 0px;
-  --blur: 8px;
+  --font-mono: "JetBrains Mono", monospace;
+  --font-sans: "Manrope", sans-serif;
+  --font-serif: "Georgia", serif;
 
   /* ================================================
-     BORDER WIDTH
+     STATUS COLORS (semantic overrides)
      ================================================ */
-  --border-width-0: 0px;
-  --border-width-2: 2px;
-  --border-width-4: 4px;
-  --border-width-8: 8px;
-  --border-width: 1px;
+  /* Error */
+  --color-error-50: #ffe4de;
+  --color-error-100: #feccc3;
+  --color-error-200: #eda497;
+  --color-error-300: #d87464;
+  --color-error-400: #c44c3b;
+  --color-error-450: #b23f2e;
+  --color-error-500: #af1c0e;
+  --color-error-600: #8e1409;
+  --color-error-700: #6f0c05;
+  --color-error-800: #510502;
+  --color-error-900: #350101;
+  --color-error-950: #1b0000;
+
+  /* Success */
+  --color-success-50: #daf1de;
+  --color-success-100: #c8e2cc;
+  --color-success-200: #93ca99;
+  --color-success-300: #67a96c;
+  --color-success-400: #3b863e;
+  --color-success-500: #006800;
+  --color-success-600: #005700;
+  --color-success-700: #004700;
+  --color-success-800: #003700;
+  --color-success-900: #002800;
+  --color-success-950: #001a00;
+
+  /* Warning */
+  --color-warning-50: #faf0d1;
+  --color-warning-100: #f4e8c3;
+  --color-warning-200: #decb90;
+  --color-warning-300: #c5ac63;
+  --color-warning-400: #977a20;
+  --color-warning-500: #7d5d00;
+  --color-warning-600: #755800;
+  --color-warning-700: #5a4400;
+  --color-warning-800: #403000;
+  --color-warning-900: #271d00;
+  --color-warning-950: #110d00;
+
+  /* Info */
+  --color-info-50: #e8f0f3;
+  --color-info-100: #d7e5ea;
+  --color-info-200: #afc7cf;
+  --color-info-300: #658a97;
+  --color-info-400: #3b626d;
+  --color-info-500: #355762;
+  --color-info-600: #2b4650;
+  --color-info-700: #26343a;
+  --color-info-800: #1d2428;
+  --color-info-900: #131719;
+  --color-info-950: #090b0d;
+
+  /* Focus */
+  --color-focus-50: #dff5fb;
+  --color-focus-100: #c8ecf9;
+  --color-focus-200: #99d2e6;
+  --color-focus-300: #409bbb;
+  --color-focus-400: #157793;
+  --color-focus-500: #0f6a88;
+  --color-focus-600: #0c546f;
+  --color-focus-700: #084058;
+  --color-focus-800: #042d41;
+  --color-focus-900: #011b2b;
+  --color-focus-950: #000b16;
 
   /* ================================================
-     COLORS
+     FLAVOUR COLORS (extra palettes)
      ================================================ */
-  /* Red */
-  --color-red-50: #fef2f2;
-  --color-red-100: #fee2e2;
-  --color-red-200: #fecaca;
-  --color-red-300: #fca5a5;
-  --color-red-400: #f87171;
-  --color-red-500: #ef4444;
-  --color-red-600: #dc2626;
-  --color-red-700: #b91c1c;
-  --color-red-800: #991b1b;
-  --color-red-900: #7f1d1d;
-  --color-red-950: #450a0a;
-
-  /* Sky */
-  --color-sky-50: #f0f9ff;
-  --color-sky-100: #e0f2fe;
-  --color-sky-200: #bae6fd;
-  --color-sky-300: #7dd3fc;
-  --color-sky-400: #38bdf8;
-  --color-sky-500: #0ea5e9;
-  --color-sky-600: #0284c7;
-  --color-sky-700: #0369a1;
-  --color-sky-800: #075985;
-  --color-sky-900: #0c4a6e;
-  --color-sky-950: #082f49;
-
-  /* Blue */
-  --color-blue-50: #eff6ff;
-  --color-blue-100: #dbeafe;
-  --color-blue-200: #bfdbfe;
-  --color-blue-300: #93c5fd;
-  --color-blue-400: #60a5fa;
-  --color-blue-500: #3b82f6;
-  --color-blue-600: #2563eb;
-  --color-blue-700: #1d4ed8;
-  --color-blue-800: #1e40af;
-  --color-blue-900: #1e3a8a;
-  --color-blue-950: #172554;
-
-  /* Cyan */
-  --color-cyan-50: #ecfeff;
-  --color-cyan-100: #cffafe;
-  --color-cyan-200: #a5f3fc;
-  --color-cyan-300: #67e8f9;
-  --color-cyan-400: #22d3ee;
-  --color-cyan-500: #06b6d4;
-  --color-cyan-600: #0891b2;
-  --color-cyan-700: #0e7490;
-  --color-cyan-800: #155e75;
-  --color-cyan-900: #164e63;
-  --color-cyan-950: #083344;
-
-  /* Gray */
-  --color-gray-50: #f9fafb;
-  --color-gray-100: #f3f4f6;
-  --color-gray-200: #e5e7eb;
-  --color-gray-300: #d1d5db;
-  --color-gray-400: #9ca3af;
-  --color-gray-500: #6b7280;
-  --color-gray-600: #4b5563;
-  --color-gray-700: #374151;
-  --color-gray-800: #1f2937;
-  --color-gray-900: #111827;
-  --color-gray-950: #030712;
-
-  /* Lime */
-  --color-lime-50: #f7fee7;
-  --color-lime-100: #ecfccb;
-  --color-lime-200: #d9f99d;
-  --color-lime-300: #bef264;
-  --color-lime-400: #a3e635;
-  --color-lime-500: #84cc16;
-  --color-lime-600: #65a30d;
-  --color-lime-700: #4d7c0f;
-  --color-lime-800: #3f6212;
-  --color-lime-900: #365314;
-  --color-lime-950: #1a2e05;
-
-  /* Pink */
-  --color-pink-50: #fdf2f8;
-  --color-pink-100: #fce7f3;
-  --color-pink-200: #fbcfe8;
-  --color-pink-300: #f9a8d4;
-  --color-pink-400: #f472b6;
-  --color-pink-500: #ec4899;
-  --color-pink-600: #db2777;
-  --color-pink-700: #be185d;
-  --color-pink-800: #9d174d;
-  --color-pink-900: #831843;
-  --color-pink-950: #500724;
-
-  /* Rose */
-  --color-rose-50: #fff1f2;
-  --color-rose-100: #ffe4e6;
-  --color-rose-200: #fecdd3;
-  --color-rose-300: #fda4af;
-  --color-rose-400: #fb7185;
-  --color-rose-500: #f43f5e;
-  --color-rose-600: #e11d48;
-  --color-rose-700: #be123c;
-  --color-rose-800: #9f1239;
-  --color-rose-900: #881337;
-  --color-rose-950: #4c0519;
-
-  /* Teal */
-  --color-teal-50: #f0fdfa;
-  --color-teal-100: #ccfbf1;
-  --color-teal-200: #99f6e4;
-  --color-teal-300: #5eead4;
-  --color-teal-400: #2dd4bf;
-  --color-teal-500: #14b8a6;
-  --color-teal-600: #0d9488;
-  --color-teal-700: #0f766e;
-  --color-teal-800: #115e59;
-  --color-teal-900: #134e4a;
-  --color-teal-950: #042f2e;
-
-  /* Zinc */
-  --color-zinc-50: #fafafa;
-  --color-zinc-100: #f4f4f5;
-  --color-zinc-200: #e4e4e7;
-  --color-zinc-300: #d4d4d8;
-  --color-zinc-400: #a1a1aa;
-  --color-zinc-500: #71717a;
-  --color-zinc-600: #52525b;
-  --color-zinc-700: #3f3f46;
-  --color-zinc-800: #27272a;
-  --color-zinc-900: #18181b;
-  --color-zinc-950: #09090b;
-
-  /* Amber */
-  --color-amber-50: #fffbeb;
-  --color-amber-100: #fef3c7;
-  --color-amber-200: #fde68a;
-  --color-amber-300: #fcd34d;
-  --color-amber-400: #fbbf24;
-  --color-amber-500: #f59e0b;
-  --color-amber-600: #d97706;
-  --color-amber-700: #b45309;
-  --color-amber-800: #92400e;
-  --color-amber-900: #78350f;
-  --color-amber-950: #451a03;
-  --color-black: #000002;
-  --color-white: #ffffff;
-
-  /* Green */
-  --color-green-50: #f0fdf4;
-  --color-green-100: #dcfce7;
-  --color-green-200: #bbf7d0;
-  --color-green-300: #86efac;
-  --color-green-400: #4ade80;
-  --color-green-500: #22c55e;
-  --color-green-600: #16a34a;
-  --color-green-700: #15803d;
-  --color-green-800: #166534;
-  --color-green-900: #14532d;
-  --color-green-950: #052e16;
-
-  /* Slate */
-  --color-slate-50: #f8fafc;
-  --color-slate-100: #f1f5f9;
-  --color-slate-200: #e2e8f0;
-  --color-slate-300: #cbd5e1;
-  --color-slate-400: #94a3b8;
-  --color-slate-500: #64748b;
-  --color-slate-600: #475569;
-  --color-slate-700: #334155;
-  --color-slate-800: #1e293b;
-  --color-slate-900: #0f172a;
-  --color-slate-950: #020617;
-
-  /* Stone */
-  --color-stone-50: #fafaf9;
-  --color-stone-100: #f5f5f4;
-  --color-stone-200: #e7e5e4;
-  --color-stone-300: #d6d3d1;
-  --color-stone-400: #a8a29e;
-  --color-stone-500: #78716c;
-  --color-stone-600: #57534e;
-  --color-stone-700: #44403c;
-  --color-stone-800: #292524;
-  --color-stone-900: #1c1917;
-  --color-stone-950: #0c0a09;
-
-  /* Indigo */
-  --color-indigo-50: #eef2ff;
-  --color-indigo-100: #e0e7ff;
-  --color-indigo-200: #c7d2fe;
-  --color-indigo-300: #a5b4fc;
-  --color-indigo-400: #818cf8;
-  --color-indigo-500: #6366f1;
-  --color-indigo-600: #4f46e5;
-  --color-indigo-700: #4338ca;
-  --color-indigo-800: #3730a3;
-  --color-indigo-900: #312e81;
-  --color-indigo-950: #1e1b4b;
-
-  /* Orange */
-  --color-orange-50: #fff7ed;
-  --color-orange-100: #ffedd5;
-  --color-orange-200: #fed7aa;
-  --color-orange-300: #fdba74;
-  --color-orange-400: #fb923c;
-  --color-orange-500: #f97316;
-  --color-orange-600: #ea580c;
-  --color-orange-700: #c2410c;
-  --color-orange-800: #9a3412;
-  --color-orange-900: #7c2d12;
-  --color-orange-950: #431407;
-
-  /* Purple */
-  --color-purple-50: #faf5ff;
-  --color-purple-100: #f3e8ff;
-  --color-purple-200: #e9d5ff;
-  --color-purple-300: #d8b4fe;
-  --color-purple-400: #c084fc;
-  --color-purple-500: #a855f7;
-  --color-purple-600: #9333ea;
-  --color-purple-700: #7e22ce;
-  --color-purple-800: #6b21a8;
-  --color-purple-900: #581c87;
-  --color-purple-950: #3b0764;
-
-  /* Violet */
-  --color-violet-50: #f5f3ff;
-  --color-violet-100: #ede9fe;
-  --color-violet-200: #ddd6fe;
-  --color-violet-300: #c4b5fd;
-  --color-violet-400: #a78bfa;
-  --color-violet-500: #8b5cf6;
-  --color-violet-600: #7c3aed;
-  --color-violet-700: #6d28d9;
-  --color-violet-800: #5b21b6;
-  --color-violet-900: #4c1d95;
-  --color-violet-950: #2e1065;
-
-  /* Yellow */
-  --color-yellow-50: #fefce8;
-  --color-yellow-100: #fef9c3;
-  --color-yellow-200: #fef08a;
-  --color-yellow-300: #fde047;
-  --color-yellow-400: #facc15;
-  --color-yellow-500: #eab308;
-  --color-yellow-600: #ca8a04;
-  --color-yellow-700: #a16207;
-  --color-yellow-800: #854d0e;
-  --color-yellow-900: #713f12;
-  --color-yellow-950: #422006;
-
-  /* Emerald */
-  --color-emerald-50: #ecfdf5;
-  --color-emerald-100: #d1fae5;
-  --color-emerald-200: #a7f3d0;
-  --color-emerald-300: #6ee7b7;
-  --color-emerald-400: #34d399;
-  --color-emerald-500: #10b981;
-  --color-emerald-600: #059669;
-  --color-emerald-700: #047857;
-  --color-emerald-800: #065f46;
-  --color-emerald-900: #064e3b;
-  --color-emerald-950: #022c22;
-
-  /* Fuchsia */
-  --color-fuchsia-50: #fdf4ff;
-  --color-fuchsia-100: #fae8ff;
-  --color-fuchsia-200: #f5d0fe;
-  --color-fuchsia-300: #f0abfc;
-  --color-fuchsia-400: #e879f9;
-  --color-fuchsia-500: #d946ef;
-  --color-fuchsia-600: #c026d3;
-  --color-fuchsia-700: #a21caf;
-  --color-fuchsia-800: #86198f;
-  --color-fuchsia-900: #701a75;
-  --color-fuchsia-950: #4a044e;
-
-  /* Neutral */
-  --color-neutral-50: #fafafa;
-  --color-neutral-100: #f5f5f5;
-  --color-neutral-200: #e5e5e5;
-  --color-neutral-300: #d4d4d4;
-  --color-neutral-400: #a3a3a3;
-  --color-neutral-500: #737373;
-  --color-neutral-600: #525252;
-  --color-neutral-700: #404040;
-  --color-neutral-800: #262626;
-  --color-neutral-900: #171717;
-  --color-neutral-950: #0a0a0a;
+  /* Mustard */
+  --color-mustard-50: #f7f5ed;
+  --color-mustard-100: #efe8d6;
+  --color-mustard-200: #dccfa7;
+  --color-mustard-300: #ccb778;
+  --color-mustard-400: #bea65c;
+  --color-mustard-500: #a89046;
+  --color-mustard-600: #88753c;
+  --color-mustard-700: #6a5c2f;
+  --color-mustard-800: #4d4222;
+  --color-mustard-900: #2f2815;
+  --color-mustard-950: #120f07;
+
+  /* Apricot */
+  --color-apricot-50: #fbf2ef;
+  --color-apricot-100: #f1d4ca;
+  --color-apricot-200: #e8b6a6;
+  --color-apricot-300: #e09981;
+  --color-apricot-400: #d37c5f;
+  --color-apricot-500: #c36141;
+  --color-apricot-600: #9e5037;
+  --color-apricot-700: #7a402c;
+  --color-apricot-800: #582e20;
+  --color-apricot-900: #351c13;
+  --color-apricot-950: #130a06;
+
+  /* Beet */
+  --color-beet-50: #f8eef5;
+  --color-beet-100: #f3deec;
+  --color-beet-200: #e7b9d7;
+  --color-beet-300: #dc94c4;
+  --color-beet-400: #c07faa;
+  --color-beet-500: #ac6293;
+  --color-beet-600: #8e4f79;
+  --color-beet-700: #6e3e5e;
+  --color-beet-800: #4f2c44;
+  --color-beet-900: #301a28;
+  --color-beet-950: #100a0f;
+
+  /* Blueberry */
+  --color-blueberry-50: #efeef9;
+  --color-blueberry-100: #dfddf3;
+  --color-blueberry-200: #bebae8;
+  --color-blueberry-300: #9892db;
+  --color-blueberry-400: #817cc0;
+  --color-blueberry-500: #6862a9;
+  --color-blueberry-600: #56518a;
+  --color-blueberry-700: #43406a;
+  --color-blueberry-800: #312e4d;
+  --color-blueberry-900: #1d1c2e;
+  --color-blueberry-950: #090911;
+
+  /* Juniper */
+  --color-juniper-50: #eef2f7;
+  --color-juniper-100: #dae6f2;
+  --color-juniper-200: #aec9e4;
+  --color-juniper-300: #83acd6;
+  --color-juniper-400: #6696c5;
+  --color-juniper-500: #4c7fb1;
+  --color-juniper-600: #44688c;
+  --color-juniper-700: #37516b;
+  --color-juniper-800: #283a4d;
+  --color-juniper-900: #19242f;
+  --color-juniper-950: #080d11;
+
+  /* Mint */
+  --color-mint-50: #edf8f6;
+  --color-mint-100: #d9ece9;
+  --color-mint-200: #accec8;
+  --color-mint-300: #7fb2aa;
+  --color-mint-400: #62a79b;
+  --color-mint-500: #4e9387;
+  --color-mint-600: #3e7b71;
+  --color-mint-700: #306159;
+  --color-mint-800: #234740;
+  --color-mint-900: #162b28;
+  --color-mint-950: #081110;
+
+  /* Pistachio */
+  --color-pistachio-50: #f3f6ec;
+  --color-pistachio-100: #e3e8d7;
+  --color-pistachio-200: #bfcba7;
+  --color-pistachio-300: #9daf79;
+  --color-pistachio-400: #8ca35e;
+  --color-pistachio-500: #788e4d;
+  --color-pistachio-600: #63773d;
+  --color-pistachio-700: #4e5e2f;
+  --color-pistachio-800: #394522;
+  --color-pistachio-900: #242b16;
+  --color-pistachio-950: #0e1108;
+
+  /* Plum */
+  --color-plum-50: #f5eef8;
+  --color-plum-100: #f0dcf6;
+  --color-plum-200: #e0beeb;
+  --color-plum-300: #ca95dc;
+  --color-plum-400: #b07fc1;
+  --color-plum-500: #9964ab;
+  --color-plum-600: #7e528c;
+  --color-plum-700: #62406d;
+  --color-plum-800: #462d4f;
+  --color-plum-900: #2a1b2f;
+  --color-plum-950: #0f0a10;
+
+  /* Radish */
+  --color-radish-50: #f9edee;
+  --color-radish-100: #f3dbdd;
+  --color-radish-200: #e7b2b7;
+  --color-radish-300: #d88990;
+  --color-radish-400: #ca6870;
+  --color-radish-500: #bc4751;
+  --color-radish-600: #9a3a42;
+  --color-radish-700: #782e35;
+  --color-radish-800: #562126;
+  --color-radish-900: #341417;
+  --color-radish-950: #130708;
 }

package/app/assets/icons/bean-bold.svg

@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.76012 18.8445C2.09724 17.2208 2.87656 16.0572 3.9786 15.3495C5.03817 14.6691 6.24188 14.5092 7.28499 14.548C8.33626 14.5871 9.33917 14.8322 10.1064 15.0821C10.8582 15.3271 11.4733 15.6068 11.7539 15.7742C13.3896 16.7505 14.6082 16.9807 15.4031 16.7224C16.08 16.5023 16.9459 15.7433 17.4466 13.3064C18.0003 10.6112 19.0172 8.64024 20.3586 7.40687C21.7269 6.14884 23.3746 5.72254 24.9248 6.0742C27.9921 6.77013 30.0469 10.2477 29.3426 14.3504C28.09 21.6478 24.6885 25.467 21.0633 27.3644C17.5222 29.2177 13.9603 29.135 12.4979 29.0476C9.2921 28.856 6.44007 27.7607 4.45438 25.9966C2.44938 24.2153 1.31321 21.7188 1.74741 18.9138L1.75317 18.8793L1.76012 18.8445ZM5.37852 17.6424C4.9858 17.8947 4.57979 18.3612 4.36759 19.3445C4.11271 21.0594 4.76934 22.664 6.20918 23.9431C7.67669 25.2468 9.93898 26.1756 12.6768 26.3392L12.6775 26.3396C14.0014 26.4187 16.976 26.4663 19.8681 24.9527C22.6761 23.483 25.6046 20.4367 26.7257 13.9052C27.2479 10.8628 25.6924 9.03311 24.326 8.7231C23.6595 8.57198 22.8851 8.71824 22.1268 9.41542C21.3414 10.1376 20.5265 11.5055 20.0468 13.84C19.4608 16.6924 18.2144 18.6486 16.189 19.3071C14.2814 19.9272 12.2075 19.1995 10.3971 18.119C10.3939 18.1172 10.365 18.101 10.3038 18.0711C10.2418 18.0408 10.1593 18.0022 10.0578 17.9586C9.85453 17.8713 9.58727 17.7679 9.27778 17.6671C8.64973 17.4625 7.89594 17.2863 7.16443 17.2591C6.42475 17.2315 5.81896 17.3596 5.37852 17.6424Z" fill="currentColor"/>
+</svg>

package/app/assets/icons/bean-duotone.svg

@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.0474 27.488C7.05762 27.0741 2.72399 23.0532 3.41048 18.1488C4.48904 12.4481 10.7943 15.4013 11.4761 15.8409C14.9571 18.0858 18.1182 17.9488 19.1894 12.2253C21.2268 1.33988 29.7523 5.13912 28.5484 12.872C26.2184 27.8384 15.855 27.6821 13.0474 27.488Z" fill="currentColor" fill-opacity="0.2"/>
+<path d="M2.09999 17.8503C2.4324 16.0934 3.21234 14.837 4.31942 14.076C5.38383 13.3443 6.59577 13.177 7.6468 13.2242C8.70604 13.2718 9.71749 13.5422 10.4915 13.8167C11.25 14.0857 11.8709 14.3917 12.1543 14.5745C13.8065 15.6399 15.0352 15.8953 15.8348 15.6194C16.5158 15.3844 17.3848 14.5667 17.8783 11.9298C18.4242 9.01336 19.4399 6.88372 20.7857 5.55451C22.1586 4.19874 23.8167 3.74517 25.3799 4.13373C28.4731 4.90267 30.5586 8.67932 29.8673 13.1195C28.6378 21.017 25.228 25.1366 21.5843 27.1737C18.0251 29.1635 14.4364 29.0563 12.9628 28.9543C9.73236 28.731 6.85429 27.5305 4.84603 25.61C2.81822 23.6708 1.66253 20.9613 2.08749 17.9253L2.09315 17.888L2.09999 17.8503ZM5.73992 16.5663C5.3454 16.8376 4.93845 17.3409 4.72904 18.4048C4.47989 20.2609 5.14852 22.0021 6.60473 23.3946C8.08892 24.8139 10.3721 25.8311 13.131 26.0218C14.4651 26.114 17.4627 26.1808 20.3695 24.5557C23.1918 22.9778 26.1285 19.6929 27.229 12.6243C27.7415 9.3317 26.1663 7.34228 24.7884 6.99975C24.1163 6.83277 23.3368 6.98735 22.576 7.7387C21.7879 8.51699 20.9731 9.99451 20.5002 12.5207C19.9226 15.6071 18.6756 17.7196 16.638 18.4228C14.7191 19.085 12.6265 18.2866 10.7979 17.1073C10.7947 17.1054 10.7655 17.0877 10.7037 17.055C10.6411 17.0219 10.5578 16.9797 10.4554 16.932C10.2502 16.8364 9.98047 16.723 9.66823 16.6123C9.03461 16.3876 8.27444 16.193 7.53738 16.1599C6.79208 16.1265 6.18237 16.2622 5.73992 16.5663Z" fill="currentColor"/>
+</svg>

package/app/assets/icons/bean-fill.svg

@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.0474 27.488C7.05762 27.0741 2.72399 23.0532 3.41048 18.1488C4.48904 12.4481 10.7943 15.4013 11.4761 15.8409C14.9571 18.0858 18.1182 17.9488 19.1894 12.2253C21.2268 1.33988 29.7523 5.13912 28.5484 12.872C26.2184 27.8384 15.855 27.6821 13.0474 27.488Z" fill="currentColor"/>
+<path d="M2.09999 17.8503C2.4324 16.0934 3.21234 14.837 4.31942 14.076C5.38383 13.3443 6.59577 13.177 7.6468 13.2242C8.70604 13.2718 9.71749 13.5422 10.4915 13.8167C11.25 14.0857 11.8709 14.3917 12.1543 14.5745C13.8065 15.6399 15.0352 15.8953 15.8348 15.6194C16.5158 15.3844 17.3848 14.5667 17.8783 11.9298C18.4242 9.01336 19.4399 6.88372 20.7857 5.55451C22.1586 4.19874 23.8167 3.74517 25.3799 4.13373C28.4731 4.90267 30.5586 8.67933 29.8673 13.1195C28.6378 21.017 25.228 25.1366 21.5843 27.1737C18.0251 29.1635 14.4364 29.0563 12.9628 28.9543C9.73236 28.731 6.85429 27.5305 4.84603 25.61C2.81822 23.6708 1.66253 20.9613 2.08749 17.9253L2.09315 17.888L2.09999 17.8503ZM5.73992 16.5663C5.3454 16.8376 4.93845 17.3409 4.72904 18.4048C4.47989 20.2609 5.14852 22.0021 6.60473 23.3946C8.08892 24.8139 10.3721 25.8311 13.131 26.0218C14.4651 26.114 17.4627 26.1808 20.3695 24.5557C23.1918 22.9778 26.1285 19.6929 27.229 12.6243C27.7415 9.3317 26.1663 7.34228 24.7884 6.99975C24.1163 6.83277 23.3368 6.98735 22.576 7.7387C21.7879 8.51699 20.9731 9.99451 20.5002 12.5207C19.9226 15.6071 18.6756 17.7196 16.638 18.4228C14.7191 19.0851 12.6265 18.2866 10.7979 17.1073C10.7947 17.1054 10.7655 17.0877 10.7037 17.055C10.6411 17.0219 10.5578 16.9797 10.4554 16.932C10.2502 16.8364 9.98047 16.723 9.66823 16.6123C9.03461 16.3876 8.27444 16.193 7.53738 16.1599C6.79208 16.1265 6.18237 16.2622 5.73992 16.5663Z" fill="currentColor"/>
+</svg>