sta/src/style.css

@import url('https://fonts.googleapis.com/css?family=Plus%20Jakarta%20Sans:700|Noto%20Sans:400');

@import "tailwindcss";


@theme {
  --font-jakarta: Plus Jakarta Sans, sans-serif;
  --font-heading: Plus Jakarta Sans, sans-serif;
  --font-noto: Noto Sans, sans-serif;
  --font-body: Noto Sans, sans-serif;
  --font-normal: 400;
  --font-bold: 700;
  --text-sm: 0.750rem;
  --text-base: 1rem;
  --text-xl: 1.333rem;
  --text-2xl: 1.777rem;
  --text-3xl: 2.369rem;
  --text-4xl: 3.158rem;
  --text-5xl: 4.210rem;

  --color-text: oklch(20.55% 0.026 159.60);
  --color-text-50: oklch(96.73% 0.012 164.80);
  --color-text-100: oklch(93.53% 0.024 163.13);
  --color-text-200: oklch(87.08% 0.048 162.29);
  --color-text-300: oklch(80.85% 0.075 161.20);
  --color-text-400: oklch(74.56% 0.099 159.20);
  --color-text-500: oklch(68.48% 0.121 157.47);
  --color-text-600: oklch(58.25% 0.101 157.47);
  --color-text-700: oklch(47.56% 0.080 158.24);
  --color-text-800: oklch(35.96% 0.056 158.77);
  --color-text-900: oklch(23.61% 0.032 159.65);
  --color-text-950: oklch(16.99% 0.020 157.52);

  --color-background: oklch(98.85% 0.003 174.49);
  --color-background-50: oklch(96.66% 0.009 179.60);
  --color-background-100: oklch(93.48% 0.020 172.77);
  --color-background-200: oklch(86.98% 0.039 173.82);
  --color-background-300: oklch(80.46% 0.058 172.26);
  --color-background-400: oklch(74.00% 0.077 170.71);
  --color-background-500: oklch(67.67% 0.094 169.62);
  --color-background-600: oklch(57.52% 0.079 169.17);
  --color-background-700: oklch(46.93% 0.062 169.68);
  --color-background-800: oklch(35.70% 0.045 170.66);
  --color-background-900: oklch(23.47% 0.026 169.60);
  --color-background-950: oklch(16.82% 0.014 169.51);

  --color-primary: oklch(70.75% 0.113 157.63);
  --color-primary-50: oklch(96.73% 0.012 164.80);
  --color-primary-100: oklch(93.53% 0.024 163.13);
  --color-primary-200: oklch(87.05% 0.049 161.02);
  --color-primary-300: oklch(80.82% 0.076 160.38);
  --color-primary-400: oklch(74.54% 0.100 158.60);
  --color-primary-500: oklch(68.46% 0.122 157.00);
  --color-primary-600: oklch(58.22% 0.102 156.89);
  --color-primary-700: oklch(47.54% 0.081 157.46);
  --color-primary-800: oklch(35.94% 0.057 157.56);
  --color-primary-900: oklch(23.61% 0.032 159.65);
  --color-primary-950: oklch(16.99% 0.020 157.52);

  --color-secondary: oklch(77.49% 0.049 254.33);
  --color-secondary-50: oklch(95.88% 0.009 247.92);
  --color-secondary-100: oklch(91.80% 0.017 250.85);
  --color-secondary-200: oklch(83.27% 0.035 253.73);
  --color-secondary-300: oklch(74.79% 0.055 252.87);
  --color-secondary-400: oklch(66.02% 0.075 253.94);
  --color-secondary-500: oklch(57.42% 0.096 253.86);
  --color-secondary-600: oklch(48.91% 0.081 254.25);
  --color-secondary-700: oklch(40.26% 0.064 253.43);
  --color-secondary-800: oklch(30.86% 0.044 254.23);
  --color-secondary-900: oklch(20.97% 0.024 251.59);
  --color-secondary-950: oklch(15.30% 0.015 257.65);

  --color-accent: oklch(62.74% 0.101 280.46);
  --color-accent-50: oklch(95.09% 0.012 281.08);
  --color-accent-100: oklch(90.22% 0.024 283.36);
  --color-accent-200: oklch(80.23% 0.051 282.68);
  --color-accent-300: oklch(69.81% 0.082 281.67);
  --color-accent-400: oklch(59.46% 0.112 280.05);
  --color-accent-500: oklch(49.09% 0.144 277.36);
  --color-accent-600: oklch(42.01% 0.120 277.54);
  --color-accent-700: oklch(34.62% 0.096 277.83);
  --color-accent-800: oklch(27.07% 0.066 278.62);
  --color-accent-900: oklch(18.71% 0.036 279.84);
  --color-accent-950: oklch(14.04% 0.022 283.20);
}

:root {
  --p-button-primary-background: var(--color-primary) !important;
  --p-button-primary-border-color: var(--color-primary) !important;
  --p-button-primary-hover-background: var(--color-primary-400) !important;
  --p-button-primary-hover-border-color: var(--color-primary-400) !important;
  --p-button-primary-active-background: var(--color-primary-300) !important;
  --p-button-primary-active-border-color: var(--color-primary-300) !important;
  --p-button-primary-color: var(--color-text) !important;
  --p-button-primary-hover-color: var(--color-text) !important;
  --p-button-primary-active-color: var(--color-text) !important;

  --p-button-secondary-background: var(--color-secondary) !important;
  --p-button-secondary-border-color: var(--color-secondary) !important;
  --p-button-secondary-hover-background: var(--color-secondary-400) !important;
  --p-button-secondary-hover-border-color: var(--color-secondary-400) !important;
  --p-button-secondary-active-background: var(--color-secondary-300) !important;
  --p-button-secondary-active-border-color: var(--color-secondary-300) !important;
  --p-button-secondary-color: var(--color-text) !important;
  --p-button-secondary-hover-color: var(--color-text) !important;
  --p-button-secondary-active-color: var(--color-text) !important;

  --p-toggleswitch-border-color: var(--color-secondary-700) !important;
  --p-toggleswitch-background: var(--color-secondary-50) !important;
  --p-toggleswitch-handle-background: var(--color-secondary-700) !important;

  --p-toggleswitch-hover-border-color: var(--color-secondary-500) !important;
  --p-toggleswitch-hover-background: var(--color-secondary-50) !important;
  --p-toggleswitch-handle-hover-background: var(--color-secondary-500) !important;

  --p-toggleswitch-checked-background: var(--color-primary-400) !important;
  --p-toggleswitch-handle-checked-background: var(--color-primary-800) !important;

  --p-toggleswitch-checked-hover-background: var(--color-primary-300) !important;
  --p-toggleswitch-handle-checked-hover-background: var(--color-primary-700) !important;

  --p-badge-primary-background: var(--color-primary) !important;
  --p-badge-primary-color: var(--color-text) !important;
  --p-badge-secondary-background: var(--color-secondary-400) !important;
  --p-badge-secondary-color: var(--color-text) !important;
}