@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Roboto+Slab:wght@400;500;600;700&display=swap");

:root {
  /* Font */
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-heading: "Roboto Slab", serif;

  /* Primary colors */
  --primaryBlue: oklch(54.1% .226 279.4);
  --secondaryBlue: #1f1b5e;
  --quaternaryBlue: oklch(55.1% 0.027 264.364);
  --inactiveBlue: #deddf5;

  /* Background colors */
  --primaryGray: oklch(96.377% 0 0);
  --secondaryGray: oklch(93% 0 0);
  --tertiaryGray: oklch(78.261% 0 0);
  --quaternaryGray: #ffffff;

  /* Text colors */
  --darkText: oklch(21% 0 0);
  --mutedText: oklch(55.1% 0 0);

  /* Border */
  --borderColor: oklch(87.2% 0 0);

  /* Semantic colors */
  --red: oklch(63.7% 0.237 25.331);
  --darkRed: oklch(57.7% 0.245 27.325);
  --green: oklch(59.8% 0.154 142.5);
  --white: #ffffff;
  --black: #000000;

  /* VH Design Colors */
  --vhPrimary: #29246B;
  --vhAccent: #43BAB4;
  --vhWarning: #FD9C04;
  --vhDanger: #ba4349;
  --vhSuccess: #556b2f;

  /* Shadows */
  --shadow-sm: 1px 2px 2px 1px rgb(0 0 0 / 0.3);
  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

  /* Border radius */
  --radius: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
}

/* Dark Mode */
.dark {
  --primaryBlue: oklch(71.8% 0.105 190.3);
  --secondaryBlue: oklch(100% 0.00011 271.152);
  --quaternaryBlue: oklch(71.1% 0.035 256.8);
  --inactiveBlue: oklch(28% 0.037 260);

  --primaryGray: oklch(21.923% 0.02677 267.961);
  --secondaryGray: oklch(0.2 0.015 265);
  --tertiaryGray: oklch(0.3 0.03 265);
  --quaternaryGray: oklch(0% 0 0);

  --darkText: oklch(98.4% 0.003 247.9);
  --mutedText: oklch(71.1% 0.027 264.364);

  --borderColor: oklch(0.3 0.03 265);

  --red: oklch(70% 0.25 25);
  --darkRed: oklch(70% 0.25 25);
  --white: oklch(0.2 0.015 265);
  --black: oklch(98.4% 0.003 247.9);

  /* VH Design Colors (dark) */
  --vhPrimary: #4a45a0;
  --vhAccent: #5dd4ce;
  --vhWarning: #ffb740;
  --vhDanger: #e06066;
  --vhSuccess: #7a9945;
}