flexoki shadcn/ui

/* globals.css */

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 48 100% 97%;
    --foreground: 0 3% 6%;
    --card: 48 100% 97%;
    --card-foreground: 0 3% 6%;
    --popover: 48 100% 97%;
    --popover-foreground: 0 3% 6%;
    --primary: 0 3% 6%;
    --primary-foreground: 48 100% 97%;
    --secondary: 51 33% 92%;
    --secondary-foreground: 0 3% 6%;
    --muted: 51 33% 92%;
    --muted-foreground: 50 3% 42%;
    --accent: 51 33% 92%;
    --accent-foreground: 0 3% 6%;
    --destructive: 3 62% 42%;
    --destructive-foreground: 48 100% 97%;
    --border: 51 21% 88%;
    --input: 51 21% 88%;
    --ring: 55 10% 79%;
    --radius: 0.5rem;

    --red-primary: 3 62% 42%;
    --red-secondary: 5 61% 54%;
    --orange-primary: 22 80% 41%;
    --orange-secondary: 23 70% 51%;
    --yellow-primary: 45 99% 34%;
    --yellow-secondary: 45 82% 45%;
    --green-primary: 73 84% 27%;
    --green-secondary: 72 46% 41%;
    --cyan-primary: 175 57% 33%;
    --cyan-secondary: 175 49% 45%;
    --blue-primary: 212 68% 39%;
    --blue-secondary: 208 49% 50%;
    --purple-primary: 259 42% 43%;
    --purple-secondary: 251 40% 64%;
    --magenta-primary: 326 55% 41%;
    --magenta-secondary: 329 54% 59%;
  }

  .dark {
    --background: 0 3% 6%;
    --foreground: 55 10% 79%;
    --card: 0 3% 6%;
    --card-foreground: 55 10% 79%;
    --popover: 0 3% 6%;
    --popover-foreground: 55 10% 79%;
    --primary: 55 10% 79%;
    --primary-foreground: 0 3% 6%;
    --secondary: 30 4% 11%;
    --secondary-foreground: 55 10% 79%;
    --muted: 30 4% 11%;
    --muted-foreground: 43 3% 52%;
    --accent: 30 4% 11%;
    --accent-foreground: 55 10% 79%;
    --destructive: 5 61% 54%;
    --destructive-foreground: 0 3% 6%;
    --border: 30 3% 15%;
    --input: 30 3% 15%;
    --ring: 30 3% 24%;

    --red-primary: 5 61% 54%;
    --red-secondary: 3 62% 42%;
    --orange-primary: 23 70% 51%;
    --orange-secondary: 22 80% 41%;
    --yellow-primary: 45 82% 45%;
    --yellow-secondary: 45 99% 34%;
    --green-primary: 72 46% 41%;
    --green-secondary: 73 84% 27%;
    --cyan-primary: 175 49% 45%;
    --cyan-secondary: 175 57% 33%;
    --blue-primary: 208 49% 50%;
    --blue-secondary: 212 68% 39%;
    --purple-primary: 251 40% 64%;
    --purple-secondary: 259 42% 43%;
    --magenta-primary: 329 54% 59%;
    --magenta-secondary: 326 55% 41%;
  }
}

// tailwind.config.ts

  theme: {
    extend: {
      colors: {
        "red-primary": "hsl(var(--red-primary))",
        "red-secondary": "hsl(var(--red-secondary))",
        "orange-primary": "hsl(var(--orange-primary))",
        "orange-secondary": "hsl(var(--orange-secondary))",
        "yellow-primary": "hsl(var(--yellow-primary))",
        "yellow-secondary": "hsl(var(--yellow-secondary))",
        "green-primary": "hsl(var(--green-primary))",
        "green-secondary": "hsl(var(--green-secondary))",
        "cyan-primary": "hsl(var(--cyan-primary))",
        "cyan-secondary": "hsl(var(--cyan-secondary))",
        "blue-primary": "hsl(var(--blue-primary))",
        "blue-secondary": "hsl(var(--blue-secondary))",
        "purple-primary": "hsl(var(--purple-primary))",
        "purple-secondary": "hsl(var(--purple-secondary))",
        "magenta-primary": "hsl(var(--magenta-primary))",
        "magenta-secondary": "hsl(var(--magenta-secondary))",

// ... rest of the code