/* Dracula Theme for Forgejo */
/* Based on https://draculatheme.com/spec */

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('../fonts/JetBrainsMono-Variable.woff2') format('woff2');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: italic;
  font-weight: 100 800;
  font-display: swap;
  src: url('../fonts/JetBrainsMono-VariableItalic.woff2') format('woff2');
}

:root {
  /* Font */
  --fonts-override: 'JetBrains Mono', monospace;
  --fonts-monospace: 'JetBrains Mono', monospace;

  /* Dracula Palette */
  --color-background: #282A36;
  --color-foreground: #F8F8F2;
  --color-selection: #44475A;
  --color-comment: #6272A4;
  --color-cyan: #8BE9FD;
  --color-green: #50FA7B;
  --color-orange: #FFB86C;
  --color-pink: #FF79C6;
  --color-purple: #BD93F9;
  --color-red: #FF5555;
  --color-yellow: #F1FA8C;

  /* Primary colors */
  --color-primary: var(--color-purple);
  --color-primary-dark-1: #A87FF0;
  --color-primary-dark-2: #9370E7;
  --color-primary-dark-3: #7E61DE;
  --color-primary-dark-4: #6952D5;
  --color-primary-dark-5: #5443CC;
  --color-primary-dark-6: #3F34C3;
  --color-primary-dark-7: #2A25BA;
  --color-primary-light-1: #C7A6FA;
  --color-primary-light-2: #D1B9FB;
  --color-primary-light-3: #DBCCFC;
  --color-primary-light-4: #E5DFFD;
  --color-primary-light-5: #EFF2FE;
  --color-primary-light-6: #F5F7FF;
  --color-primary-light-7: #FAFBFF;

  /* Secondary/body colors */
  --color-secondary: var(--color-selection);
  --color-secondary-dark-1: #3D3F4D;
  --color-secondary-dark-2: #363840;
  --color-secondary-dark-3: #2F3133;
  --color-secondary-dark-4: #282A26;
  --color-secondary-dark-5: #212319;
  --color-secondary-dark-6: #1A1C0C;
  --color-secondary-dark-7: #131500;
  --color-secondary-light-1: #575967;
  --color-secondary-light-2: #6A6D74;
  --color-secondary-light-3: #7D8181;
  --color-secondary-light-4: #90958E;
  --color-secondary-light-5: #A3A99B;
  --color-secondary-light-6: #B6BDA8;
  --color-secondary-light-7: #C9D1B5;

  /* Body */
  --color-body: var(--color-background);
  --color-box-header: #21222C;
  --color-box-body: var(--color-background);
  --color-box-body-highlight: var(--color-selection);
  --color-text-dark: var(--color-foreground);
  --color-text: var(--color-foreground);
  --color-text-light: var(--color-comment);
  --color-text-light-1: #9DA5C0;
  --color-text-light-2: #8891AC;
  --color-text-light-3: #737D98;

  /* Input */
  --color-input-text: var(--color-foreground);
  --color-input-background: #21222C;
  --color-input-border: var(--color-selection);
  --color-input-border-hover: var(--color-comment);

  /* Button */
  --color-button: var(--color-selection);

  /* Links */
  --color-link: var(--color-cyan);
  --color-link-hover: var(--color-pink);

  /* Labels / Status */
  --color-red-badge: var(--color-red);
  --color-red-badge-bg: rgba(255, 85, 85, 0.2);
  --color-red-badge-hover-bg: rgba(255, 85, 85, 0.3);
  --color-green-badge: var(--color-green);
  --color-green-badge-bg: rgba(80, 250, 123, 0.2);
  --color-green-badge-hover-bg: rgba(80, 250, 123, 0.3);
  --color-yellow-badge: var(--color-yellow);
  --color-yellow-badge-bg: rgba(241, 250, 140, 0.2);
  --color-yellow-badge-hover-bg: rgba(241, 250, 140, 0.3);
  --color-orange-badge: var(--color-orange);
  --color-orange-badge-bg: rgba(255, 184, 108, 0.2);
  --color-orange-badge-hover-bg: rgba(255, 184, 108, 0.3);

  /* Label text */
  --color-label-text: #11111b;
  --color-label-bg: var(--color-purple);

  /* Navbar */
  --color-nav-bg: #21222C;
  --color-nav-text: var(--color-foreground);
  --color-nav-hover-bg: var(--color-selection);

  /* Header */
  --color-header: #21222C;

  /* Footer */
  --color-footer: #21222C;

  /* Shadow */
  --color-shadow: rgba(0, 0, 0, 0.3);

  /* Menu */
  --color-menu: var(--color-background);
  --color-card: var(--color-background);

  /* Code / Diff */
  --color-code-bg: #21222C;
  --color-code-sidebar-bg: #1A1B26;
  --color-diff-removed-word-bg: rgba(255, 85, 85, 0.4);
  --color-diff-added-word-bg: rgba(80, 250, 123, 0.4);
  --color-diff-removed-row-bg: rgba(255, 85, 85, 0.15);
  --color-diff-moved-row-bg: rgba(139, 233, 253, 0.15);
  --color-diff-added-row-bg: rgba(80, 250, 123, 0.15);
  --color-diff-removed-row-border: var(--color-red);
  --color-diff-moved-row-border: var(--color-cyan);
  --color-diff-added-row-border: var(--color-green);

  /* Borders */
  --color-secondary-border: var(--color-selection);
  --color-border: var(--color-selection);

  /* Accent */
  --color-accent: var(--color-purple);

  /* Light/dark scheme */
  color-scheme: dark;
}

body {
  font-family: 'JetBrains Mono', monospace;
  background-color: var(--color-background);
  color: var(--color-foreground);
}

/* Code blocks */
.code-view, pre, code, .CodeMirror, .monaco-editor {
  font-family: 'JetBrains Mono', monospace !important;
}

/* Emoji readability */
.emoji {
  filter: brightness(0.9);
}

/* Selection */
::selection {
  background-color: var(--color-selection);
}