/* Aurora Viewer — Fider theme. Colours from aurora-viewer.org (docs/BRANDING.md). */

@font-face {
  font-family: "Inter";
  font-weight: 400;
  font-display: swap;
  src: url("https://aurora-viewer.org/assets/fonts/inter-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-weight: 600 800;
  font-display: swap;
  src: url("https://aurora-viewer.org/assets/fonts/inter-600.woff2") format("woff2");
}

/* Same Aurora night palette in light and dark mode, like the website.
   "html body" beats Fider's own body[data-theme=…] rules. */
html body[data-theme] {
  color-scheme: dark;

  --primary-color: #A78BFA;
  --primary-color-dark: #8B5CF6;
  --primary-color-light: #C4B5FD;
  --colors-primary-50: #1A1540;

  --colors-gray-50:  #050816;
  --colors-gray-100: #070B1F;
  --colors-white:    #0D1330;
  --colors-gray-200: #141B3D;
  --colors-gray-300: #222B57;
  --colors-gray-400: #313C6E;
  --colors-gray-500: #8A96B8;
  --colors-gray-600: #9AA6C6;
  --colors-gray-700: #B4BEDB;
  --colors-gray-800: #C9D2EC;
  --colors-gray-900: #E8EDFB;
  --colors-black:    #E8EDFB;

  --colors-blue-50:  #1A1540;
  --colors-blue-100: #251C5A;
  --colors-blue-200: #33267A;
  --colors-blue-300: #4F46E5;
  --colors-blue-400: #6D5BF2;
  --colors-blue-500: #8B5CF6;
  --colors-blue-600: #A78BFA;
  --colors-blue-700: #C4B5FD;
  --colors-blue-800: #DDD6FE;
  --colors-blue-900: #EDE9FE;
}

a:focus-visible, button:focus-visible { outline: 2px solid #5EEAD4; outline-offset: 2px; }

.c-button--primary {
  color: #fff;
  background: linear-gradient(135deg, #7C4DF0 0%, #4F46E5 100%);
  border-color: transparent;
  box-shadow: 0 8px 24px -10px rgba(124, 77, 240, .7);
}
.c-button--primary:hover {
  color: #fff;
  background: linear-gradient(135deg, #8B5CF6 0%, #5B52F0 100%);
  box-shadow: 0 12px 32px -12px rgba(124, 77, 240, .85);
}

.c-input:focus {
  box-shadow: 0 0 0 3px rgba(167, 139, 250, .18);
}

/* Fider's utility classes hard-code a hex colour per theme (white header,
   white admin menu in light mode). Point them back to the Aurora palette. */
html body[data-theme] .bg-white      { background-color: var(--colors-white); }
html body[data-theme] .bg-gray-50    { background-color: var(--colors-gray-50); }
html body[data-theme] .bg-gray-100,
html body[data-theme] .hover\:bg-gray-100:hover { background-color: var(--colors-gray-100); }
html body[data-theme] .bg-gray-200,
html body[data-theme] .hover\:bg-gray-200:hover { background-color: var(--colors-gray-200); }
html body[data-theme] .bg-blue-50    { background-color: var(--colors-blue-50); }
html body[data-theme] .bg-blue-100   { background-color: var(--colors-blue-100); }
html body[data-theme] .hover\:bg-blue-200:hover { background-color: var(--colors-blue-200); }

html body[data-theme] .text-white    { color: #fff; }
html body[data-theme] .text-gray-400 { color: var(--colors-gray-400); }
html body[data-theme] .text-gray-500 { color: var(--colors-gray-500); }
html body[data-theme] .text-gray-600 { color: var(--colors-gray-600); }
html body[data-theme] .text-gray-700 { color: var(--colors-gray-700); }
html body[data-theme] .text-gray-800 { color: var(--colors-gray-800); }
html body[data-theme] .text-gray-900 { color: var(--colors-gray-900); }
html body[data-theme] .text-blue-200,
html body[data-theme] .text-blue-600,
html body[data-theme] .text-blue-700,
html body[data-theme] .text-blue-800 { color: var(--colors-blue-700); }

html body[data-theme] .border-gray-200 { border-color: var(--colors-gray-200); }
html body[data-theme] .border-gray-400 { border-color: var(--colors-gray-400); }
html body[data-theme] .border-gray-700 { border-color: var(--colors-gray-500); }
html body[data-theme] .border-blue-200,
html body[data-theme] .border-blue-400,
html body[data-theme] .border-blue-500 { border-color: var(--colors-blue-400); }

/* Status colours: always the dark-background shades. */
html body[data-theme] .bg-green-100  { background-color: #0a3d1a; }
html body[data-theme] .bg-green-200  { background-color: #14532d; }
html body[data-theme] .bg-red-100    { background-color: #4a1a1a; }
html body[data-theme] .bg-yellow-50,
html body[data-theme] .bg-yellow-100 { background-color: #4a2c0a; }
html body[data-theme] .text-green-500,
html body[data-theme] .text-green-600 { color: #4ade80; }
html body[data-theme] .text-green-700,
html body[data-theme] .text-green-800 { color: #86efac; }
html body[data-theme] .text-red-500,
html body[data-theme] .text-red-600  { color: #f87171; }
html body[data-theme] .text-red-700,
html body[data-theme] .text-red-800  { color: #fca5a5; }
html body[data-theme] .text-yellow-500,
html body[data-theme] .text-yellow-800 { color: #fde68a; }

/* Same vote button in both modes. */
html body[data-theme] .c-vote-counter__button {
  background-color: var(--colors-blue-50);
  border-color: var(--colors-blue-100);
  color: var(--colors-primary-base);
}
html body[data-theme] .c-vote-counter__button:hover,
html body[data-theme] .c-vote-counter__button--voted {
  background-color: var(--colors-blue-100);
  border-color: var(--colors-primary-base);
  color: var(--colors-primary-base);
}
html body[data-theme] .c-vote-counter__icon { color: var(--colors-primary-base); }

/* "Discussion" comment count: readable in both modes. */
html body[data-theme] #p-show-post .p-show-post__discussion-count {
  background-color: var(--colors-blue-100);
  color: var(--colors-blue-700);
}