@menumalsuite/design-system 0.0.5 → 0.1.1

package/app/assets/css/main.css

@@ -1,476 +1,225 @@
-/* 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;
+
+  /* Cream */
+  --color-cream-50: #fbf9f7;
+  --color-cream-100: #f5f2ee;
+  --color-cream-150: #efebe6;
+  --color-cream-200: #e9e2dc;
+  --color-cream-300: #dacfc7;
+  --color-cream-400: #a99a93;
+  --color-cream-500: #736962;
+  --color-cream-600: #57514b;
+  --color-cream-700: #3b3634;
+  --color-cream-800: #2a2726;
+  --color-cream-900: #1a1919;
+  --color-cream-950: #0f0f0f;
+
+  /* Coffee */
+  --color-coffee-50: #fcf6f5;
+  --color-coffee-100: #f4ece8;
+  --color-coffee-200: #e6d9d4;
+  --color-coffee-300: #d3beb8;
+  --color-coffee-400: #ba9993;
+  --color-coffee-500: #9e7571;
+  --color-coffee-600: #805d57;
+  --color-coffee-700: #664742;
+  --color-coffee-800: #4c342f;
+  --color-coffee-900: #2f1f1d;
+  --color-coffee-950: #1b1212;
 }