@import 'tailwindcss';

@theme {
  --color-bg-primary: #312F45;
  --color-bg-secondary: #181721;
  --color-bg-elevated: #111118;
  --color-accent: #9592B5;
  --color-accent-hover: #7D7AA4;
  --color-text-primary: #f0f0f0;
  --color-text-muted: #9999AD;
  --color-danger: #DB6060;
  --color-info: #4DC7ED;
  --color-warning: #F5E872;
  --color-tag-default: #444455;
  --color-nav-bg: rgba(0, 0, 0, 0.45);
  --color-nav-active: rgba(52, 50, 73, 0.72);

  --font-sans: 'Epilogue', sans-serif;
}

:root[data-theme="light"] {
  --color-bg-primary: #f5f5f5;
  --color-bg-secondary: #ffffff;
  --color-bg-elevated: #e8e8ec;
  --color-accent: #6B68A0;
  --color-accent-hover: #5A578F;
  --color-text-primary: #111118;
  --color-text-muted: #555566;
  --color-tag-default: #ccccdd;
  --color-nav-bg: rgba(240, 240, 245, 0.85);
  --color-nav-active: rgba(90, 87, 143, 0.22);
}

@font-face {
  font-family: 'Epilogue';
  src: url('/fonts/Epilogue-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
}
