canvas_frontend_dev/src/index.css

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

:root {
  --primary-50: 327.3 73.3% 97.1%;
  --primary-100: 325.7 77.8% 94.7%;
  --primary-200: 325.9 84.6% 89.8%;
  --primary-300: 327.4 87.1% 81.8%;
  --primary-400: 328.6 85.5% 70.2%;
  --primary-500: 330.4 81.2% 60.4%;
  --primary-600: 333.3 71.4% 50.6%;
  --primary-700: 335.1 77.6% 42%;
  --primary-800: 335.8 74.4% 35.3%;
  --primary-900: 335.9 69% 30.4%;
  --primary-950: 336.2 83.9% 17.1%;

  --secondary-50: 280 60% 98%;
  --secondary-100: 282 55% 94%;
  --secondary-200: 280 57% 92%;
  --secondary-300: 282 53% 85%;
  --secondary-400: 284 52% 75%;
  --secondary-500: 284 49% 65%;
  --secondary-600: 285 45% 56%;
  --secondary-700: 285 39% 47%;
  --secondary-800: 286 37% 39%;
  --secondary-900: 287 36% 32%;
  --secondary-950: 288 48% 21%;

  --destructive-50: 0 85.7% 97.3%;
  --destructive-100: 0 93.3% 94.1%;
  --destructive-200: 0 96.3% 89.4%;
  --destructive-300: 0 93.5% 81.8%;
  --destructive-400: 0 90.6% 70.8%;
  --destructive-500: 0 84.2% 60.2%;
  --destructive-600: 0 72.2% 50.6%;
  --destructive-700: 0 73.7% 41.8%;
  --destructive-800: 0 70% 35.3%;
  --destructive-900: 0 62.8% 30.6%;
  --destructive-950: 0 74.7% 15.5%;
}

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: var(--secondary-950);

    --card: 0 0% 100%;
    --card-foreground: var(--secondary-950);

    --popover: 0 0% 100%;
    --popover-foreground: var(--secondary-950);

    --primary: var(--primary-600);
    --primary-foreground: 0 0% 100%;
    --primary-text: 335.1 77.6% 42%;
    /* Primary text color with good contrast when standing alone, directly over background color */

    --secondary: var(--secondary-100);
    --secondary-foreground: var(--secondary-900);

    --muted: var(--secondary-100);
    --muted-foreground: var(--secondary-500);

    --accent: var(--secondary-100);
    --accent-foreground: var(--secondary-900);

    --destructive: var(--destructive-500);
    --destructive-foreground: var(--destructive-50);

    --border: var(--secondary-200);

    --input: var(--secondary-200);

    --ring: var(--primary-600);

    --radius: 0.5rem;

    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;

    --selection: var(--primary-200);
    --selection-foreground: var(--primary-950);

    input:is(:-webkit-autofill, :autofill),
    input:is(:-webkit-autofill, :autofill):hover,
    input:is(:-webkit-autofill, :autofill):focus,
    input:is(:-webkit-autofill, :autofill):active {
      -webkit-background-clip: text;
      -webkit-text-fill-color: hsl(var(--foreground));
      color: hsl(var(--foreground));
      caret-color: hsl(var(--foreground));
      box-shadow: inset 0 0 20px 20px hsl(var(--background) / 50%);
    }

    input:is(:-webkit-autofill, :autofill) {
      border-color: hsl(var(--border));
    }

    input:is(:-webkit-autofill, :autofill):focus {
      border-color: hsl(var(--primary));
    }
  }

  .dark {
    --background: 288 48% 11%;
    --foreground: var(--secondary-50);

    --card: 288 48% 16%;
    --card-foreground: var(--secondary-50);

    --popover: 288 48% 16%;
    --popover-foreground: var(--secondary-50);

    --primary: var(--primary-500);
    --primary-foreground: 336 84% 12%;
    --primary-text: 328.6 85.5% 70.2%;
    /* Primary text color with good contrast when standing alone, directly over background color */

    --secondary: 286 37% 29%;
    --secondary-foreground: var(--secondary-50);

    --muted: 286 37% 29%;
    --muted-foreground: var(--secondary-400);

    --accent: 286 37% 29%;
    --accent-foreground: var(--secondary-50);

    --destructive: var(--destructive-900);
    --destructive-foreground: var(--destructive-50);

    --border: var(--secondary-800);

    --input: var(--secondary-800);

    --ring: var(--primary-500);

    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
  }

  * {
    @apply border-border;
  }

  body {
    @apply bg-[#f5f0ff] text-foreground;
  }
}

::-webkit-scrollbar {
  width: 0px;
  height: 5px;
  border-radius: 5px;
  cursor: pointer;
  /* background-color: var(--primary-600); */
  @apply bg-red-50
}

::-webkit-scrollbar-track {
  background-color: var(--primary-500);
}

::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  width: 5px;
  background-color: red;
  border-radius: 5px;
}



@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}