/*
 * Lucky Star-ish Forgejo theme.
 * CSS-only homage: pastel school-night palette, tiny stars, no external images.
 */

:root {
  --is-dark-theme: true;
  color-scheme: dark;

  --ls-ink-950: #111322;
  --ls-ink-900: #171a2b;
  --ls-ink-850: #1d2135;
  --ls-ink-800: #242942;
  --ls-ink-750: #2b314e;
  --ls-ink-700: #343b5b;
  --ls-ink-650: #3f486b;
  --ls-ink-600: #4d577e;
  --ls-ink-550: #5e6994;
  --ls-ink-500: #707daa;
  --ls-ink-300: #aeb8df;
  --ls-ink-200: #d4dcff;
  --ls-ink-100: #f1f4ff;

  --ls-konata: #86b7ff;
  --ls-konata-bright: #a9ccff;
  --ls-kagami: #ff91bd;
  --ls-tsukasa: #c8a8ff;
  --ls-miyuki: #8fe8cb;
  --ls-star: #ffe99a;
  --ls-cream: #fff4d6;

  --steel-900: var(--ls-ink-950);
  --steel-850: var(--ls-ink-900);
  --steel-800: var(--ls-ink-850);
  --steel-750: var(--ls-ink-800);
  --steel-700: var(--ls-ink-750);
  --steel-650: var(--ls-ink-700);
  --steel-600: var(--ls-ink-650);
  --steel-550: var(--ls-ink-600);
  --steel-500: var(--ls-ink-550);
  --steel-450: var(--ls-ink-500);
  --steel-400: #8692bd;
  --steel-350: #9aa5cf;
  --steel-300: var(--ls-ink-300);
  --steel-250: #c0c9ee;
  --steel-200: var(--ls-ink-200);
  --steel-150: #e3e8ff;
  --steel-100: var(--ls-ink-100);

  --color-primary: var(--ls-konata);
  --color-primary-contrast: #15182a;
  --color-primary-dark-1: var(--ls-konata-bright);
  --color-primary-dark-2: #bdd8ff;
  --color-primary-dark-3: #d0e4ff;
  --color-primary-dark-4: #e0eeff;
  --color-primary-dark-5: #edf6ff;
  --color-primary-dark-6: #f5fbff;
  --color-primary-dark-7: #ffffff;
  --color-primary-light-1: #6fa5f4;
  --color-primary-light-2: #5a91e6;
  --color-primary-light-3: #487ed3;
  --color-primary-light-4: #3969b8;
  --color-primary-light-5: #2f589d;
  --color-primary-light-6: #284a84;
  --color-primary-light-7: #223d6d;
  --color-primary-alpha-10: #86b7ff1a;
  --color-primary-alpha-20: #86b7ff33;
  --color-primary-alpha-30: #86b7ff4d;
  --color-primary-alpha-40: #86b7ff66;
  --color-primary-alpha-50: #86b7ff80;
  --color-primary-alpha-60: #86b7ff99;
  --color-primary-alpha-70: #86b7ffb3;
  --color-primary-alpha-80: #86b7ffcc;
  --color-primary-alpha-90: #86b7ffe6;
  --color-primary-hover: var(--color-primary-dark-1);
  --color-primary-active: var(--color-primary-light-1);

  --color-secondary: var(--ls-ink-700);
  --color-secondary-dark-1: var(--ls-ink-600);
  --color-secondary-dark-2: var(--ls-ink-550);
  --color-secondary-dark-3: var(--ls-ink-500);
  --color-secondary-light-1: var(--ls-ink-750);
  --color-secondary-light-2: var(--ls-ink-800);
  --color-secondary-light-3: var(--ls-ink-850);
  --color-secondary-light-4: var(--ls-ink-900);
  --color-secondary-alpha-10: #343b5b1a;
  --color-secondary-alpha-20: #343b5b33;
  --color-secondary-alpha-30: #343b5b4d;
  --color-secondary-alpha-40: #343b5b66;
  --color-secondary-alpha-50: #343b5b80;
  --color-secondary-alpha-60: #343b5b99;
  --color-secondary-alpha-70: #343b5bb3;
  --color-secondary-alpha-80: #343b5bcc;
  --color-secondary-alpha-90: #343b5be6;

  --color-body: var(--ls-ink-850);
  --color-box-header: #313852;
  --color-box-body: #272d45;
  --color-box-body-highlight: #3a4261;
  --color-card: #303752;
  --fancy-card-bg: #38405f;
  --fancy-card-border: #4c5577;
  --color-menu: #2d344f;
  --color-nav-bg: #141728;
  --color-nav-hover-bg: #2d385d;
  --color-header-wrapper: #171a2b;
  --color-header-wrapper-transparent: #171a2b00;
  --color-footer: #111322;
  --color-timeline: #4d577e;
  --color-hover: #3a4261;
  --color-active: #455074;
  --color-button: #455074;
  --color-secondary-bg: #343b5b;

  --color-text-dark: #ffffff;
  --color-text: #eef2ff;
  --color-text-light: #d6ddff;
  --color-text-light-1: #c7d0f7;
  --color-text-light-2: #b5bfec;
  --color-text-light-3: #9ba7da;
  --color-text-focus: #ffffff;
  --color-placeholder-text: #aeb8df;
  --color-input-text: #f6f8ff;
  --color-input-background: #2d344f;
  --color-input-toggle-background: #3a4261;
  --color-input-border: #566080;
  --color-input-border-hover: var(--ls-konata);
  --color-caret: var(--ls-star);
  --color-light: #ffffff18;
  --color-light-border: #ffffff28;
  --color-shadow: #07081280;
  --color-overlay-backdrop: #080812c8;

  --color-red: #e36b8f;
  --color-orange: #ffb178;
  --color-yellow: #ffe17f;
  --color-olive: #cbe58a;
  --color-green: #8fe8cb;
  --color-teal: #7fdde7;
  --color-blue: var(--ls-konata);
  --color-violet: var(--ls-tsukasa);
  --color-purple: #d58cff;
  --color-pink: var(--ls-kagami);
  --color-brown: #d6a47e;
  --color-grey: #8792ba;
  --color-black: #121426;
  --color-red-light: #ff9ab7;
  --color-orange-light: #ffc998;
  --color-yellow-light: var(--ls-star);
  --color-green-light: #a8f2d9;
  --color-teal-light: #9cf1f0;
  --color-blue-light: var(--ls-konata-bright);
  --color-violet-light: #d7c3ff;
  --color-purple-light: #e0adff;
  --color-pink-light: #ffb0d0;

  --color-accent: var(--ls-konata);
  --color-small-accent: #345487;
  --color-highlight-fg: var(--ls-star);
  --color-highlight-bg: #ffe99a26;
  --color-selection-bg: #86b7ff55;
  --color-selection-fg: #ffffff;

  --color-markup-code-block: #1c2035;
  --color-markup-code-inline: #15192b;
  --color-markup-table-row: #ffffff08;
  --color-code-bg: #202640;
  --color-editor-line-highlight: #303956;

  --color-console-fg: #f4f6ff;
  --color-console-fg-subtle: #a8b2df;
  --color-console-bg: #171a2b;
  --color-console-border: #4b557a;
  --color-console-hover-bg: #ffffff12;
  --color-console-active-bg: #3b4567;
  --color-console-menu-bg: #2c344f;
  --color-console-menu-border: #586384;

  --color-error-border: #a94b6b;
  --color-error-bg: #512338;
  --color-error-text: #ffdce8;
  --color-success-border: #4da98e;
  --color-success-bg: #1f4b45;
  --color-success-text: #c7ffed;
  --color-warning-border: #d2ad4c;
  --color-warning-bg: #5c4824;
  --color-warning-text: #fff3b5;
  --color-info-border: #618ce4;
  --color-info-bg: #243a68;
  --color-info-text: #e6edff;

  --color-diff-removed-word-bg: #7d324f;
  --color-diff-added-word-bg: #295f52;
  --color-diff-removed-row-bg: #412234;
  --color-diff-added-row-bg: #1d382f;
  --color-diff-moved-row-bg: #55452a;
  --color-diff-removed-row-border: #99415e;
  --color-diff-added-row-border: #3d8d75;
  --color-diff-moved-row-border: #ccb060;
  --color-diff-inactive: #444c6c;

  --color-ansi-black: #171a2b;
  --color-ansi-red: #ff91bd;
  --color-ansi-green: #8fe8cb;
  --color-ansi-yellow: #ffe99a;
  --color-ansi-blue: #86b7ff;
  --color-ansi-magenta: #c8a8ff;
  --color-ansi-cyan: #7fdde7;
  --color-ansi-white: #d6ddff;
  --color-ansi-bright-black: #5e6994;
  --color-ansi-bright-red: #ffb0d0;
  --color-ansi-bright-green: #a8f2d9;
  --color-ansi-bright-yellow: #fff1b8;
  --color-ansi-bright-blue: #bdd8ff;
  --color-ansi-bright-magenta: #dbc9ff;
  --color-ansi-bright-cyan: #a1f4f2;
  --color-ansi-bright-white: #ffffff;

  accent-color: var(--color-accent);
}

html {
  min-height: 100%;
  background-image:
    linear-gradient(180deg, #070a16c2 0%, #090d1bcc 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='160' viewBox='0 0 220 160'%3E%3Cpath d='M24 8l4 12 12 4-12 4-4 12-4-12-12-4 12-4z' fill='%23ffe99a' opacity='.52'/%3E%3Cpath d='M176 28l3 9 9 3-9 3-3 9-3-9-9-3 9-3z' fill='%2386b7ff' opacity='.42'/%3E%3Cpath d='M72 116l4 12 12 4-12 4-4 12-4-12-12-4 12-4z' fill='%23ff91bd' opacity='.38'/%3E%3Cpath d='M198 126l2 7 7 2-7 2-2 7-2-7-7-2 7-2z' fill='%238fe8cb' opacity='.42'/%3E%3Ccircle cx='116' cy='60' r='2' fill='%23fff4d6' opacity='.40'/%3E%3Ccircle cx='138' cy='142' r='1.5' fill='%23c8a8ff' opacity='.46'/%3E%3C/svg%3E"),
    radial-gradient(circle at 8% 12%, #86b7ff28 0 2px, transparent 3px),
    radial-gradient(circle at 78% 18%, #ffe99a3d 0 2px, transparent 3px),
    radial-gradient(circle at 92% 42%, #ff91bd2d 0 2px, transparent 3px),
    radial-gradient(circle at 22% 86%, #c8a8ff2a 0 2px, transparent 3px),
    radial-gradient(circle at 62% 74%, #8fe8cb26 0 2px, transparent 3px),
    linear-gradient(180deg, #111424 0%, #1b2038 52%, #101322 100%) !important;
  background-position:
    0 0,
    0 0,
    8% 12%,
    78% 18%,
    92% 42%,
    22% 86%,
    62% 74%,
    0 0;
  background-size:
    auto,
    220px 160px,
    auto,
    auto,
    auto,
    auto,
    auto,
    auto;
  background-repeat: no-repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-attachment: fixed, fixed, scroll, scroll, scroll, scroll, scroll, fixed;
}

body {
  min-height: 100vh;
  position: relative;
  isolation: isolate;
  background: transparent !important;
}

body::before {
  content: "";
  position: fixed;
  z-index: 0;
  right: max(10px, 1vw);
  bottom: 0;
  width: clamp(150px, 17vw, 260px);
  height: clamp(108px, 16vw, 216px);
  pointer-events: none;
  background: url("/assets/img/mascot-konata-bg.png") center top / 100% auto no-repeat;
  filter: brightness(.72) saturate(.9);
  opacity: .76;
}

.full.height,
.page-content {
  background: transparent !important;
}

.full.height,
.page-footer,
.navbar {
  position: relative;
  z-index: 1;
}

.ui.menu,
.ui.secondary.menu,
.ui.tabular.menu,
.repository .repo-header,
.repo-title,
.dashboard-navbar {
  border-color: #586384 !important;
}

.ui.menu,
.repository .repo-header,
.page-content > .ui.container:first-child {
  box-shadow: 0 10px 32px #07081232;
}

.ui.button.primary,
.ui.primary.button,
.ui.primary.buttons .button,
.ui.basic.primary.button:hover,
.ui.basic.primary.buttons .button:hover {
  background: linear-gradient(180deg, #a9ccff, #6fa5f4) !important;
  color: #15182a !important;
  border-color: #bdd8ff !important;
  box-shadow: 0 0 0 1px #ffffff24 inset, 0 6px 18px #86b7ff22 !important;
}

.ui.button.primary:hover,
.ui.primary.button:hover {
  background: linear-gradient(180deg, #bdd8ff, #86b7ff) !important;
}

a,
.ui.breadcrumb a,
.repository.file.list #repo-files-table a {
  color: var(--ls-konata-bright);
}

a:hover,
.ui.breadcrumb a:hover,
.repository.file.list #repo-files-table a:hover {
  color: var(--ls-star);
}

.ui.label,
.ui.labels .label,
.issue.list > .item .title .labels .label {
  border-color: #ffffff20 !important;
}

.ui.primary.label,
.ui.primary.labels .label,
.ui.red.label.notification_count {
  background: #ff91bd !important;
  color: #15182a !important;
}

.ui.green.label,
.ui.green.labels .label {
  background: #8fe8cb !important;
  color: #12332e !important;
}

.ui.yellow.label,
.ui.yellow.labels .label {
  background: #ffe99a !important;
  color: #3f3210 !important;
}

.ui.segment,
.ui.card,
.ui.cards > .card,
.ui.attached.header,
.ui.attached.segment,
.ui.table,
.ui.repository.list .item {
  border-color: #4f5a7c !important;
  box-shadow: 0 6px 24px #07081220;
}

.ui.input > input,
.ui.form input,
.ui.form textarea,
.ui.dropdown,
.CodeMirror,
.markup code,
pre.code-block {
  border-color: #586384 !important;
}

.ui.input > input:focus,
.ui.form input:focus,
.ui.form textarea:focus,
.ui.dropdown.active,
.ui.dropdown:focus {
  border-color: var(--ls-konata) !important;
  box-shadow: 0 0 0 2px #86b7ff22 !important;
}

.repository .diff-file-box .file-header,
.repository.file.list #repo-files-table thead,
.ui.table thead th {
  background: linear-gradient(180deg, #343b5b, #2b314e) !important;
  color: #f4f6ff !important;
}

.chroma .k,
.chroma .kd,
.chroma .kr,
.chroma .nt,
.CodeMirror.cm-s-default .cm-keyword,
.CodeMirror.cm-s-paper .cm-keyword {
  color: #ff91bd;
}

.chroma .s,
.chroma .s1,
.chroma .s2,
.CodeMirror.cm-s-default .cm-string,
.CodeMirror.cm-s-paper .cm-string {
  color: #ffe99a;
}

.chroma .nf,
.chroma .nc,
.chroma .na,
.CodeMirror.cm-s-default .cm-def,
.CodeMirror.cm-s-paper .cm-def {
  color: #86b7ff;
}

.chroma .c,
.chroma .c1,
.chroma .cm,
.CodeMirror.cm-s-default .cm-comment,
.CodeMirror.cm-s-paper .cm-comment {
  color: #9ba7da;
  font-style: italic;
}

.repository .header-wrapper,
.navbar,
.following.bar.light {
  background:
    radial-gradient(circle at 18px 13px, #ffe99a66 0 1px, transparent 2px),
    radial-gradient(circle at 112px 31px, #86b7ff55 0 1px, transparent 2px),
    linear-gradient(180deg, #171a2b, #141728) !important;
  background-size: 150px 52px, 180px 52px, auto;
}

.repository .repo-title .repo-icon,
.octicon-repo,
.octicon-star,
.octicon-git-branch,
.octicon-tag {
  color: var(--ls-star) !important;
}

.footer,
.page-footer {
  background:
    radial-gradient(circle at 18% 45%, #ff91bd18 0 2px, transparent 3px),
    radial-gradient(circle at 82% 35%, #86b7ff18 0 2px, transparent 3px),
    linear-gradient(180deg, #111526, #0c1020) !important;
  border-top-color: #586384 !important;
}

@media (max-width: 900px) {
  html {
    background-position:
      0 0,
      0 0,
      8% 12%,
      78% 18%,
      92% 42%,
      22% 86%,
      62% 74%,
      0 0;
    background-size:
      auto,
      220px 160px,
      auto,
      auto,
      auto,
      auto,
      auto,
      auto;
  }

  body::before {
    width: clamp(150px, 18vw, 170px);
    height: clamp(108px, 16vw, 216px);
  }
}

@media (max-width: 770px) {
  html {
    background-position:
      0 0,
      0 0,
      8% 12%,
      78% 18%,
      92% 42%,
      22% 86%,
      62% 74%,
      0 0;
    background-size:
      auto,
      220px 160px,
      auto,
      auto,
      auto,
      auto,
      auto,
      auto;
    background-attachment: fixed, fixed, scroll, scroll, scroll, scroll, scroll, fixed;
  }

  body::before {
    width: 132px;
    height: 96px;
  }
}

@media (max-width: 880px) {
  body::before {
    width: 200px;
    height: 162px;
  }
}

@media (max-width: 520px) {
  html {
    background-position:
      0 0,
      0 0,
      8% 12%,
      78% 18%,
      92% 42%,
      22% 86%,
      62% 74%,
      0 0;
    background-size:
      auto,
      220px 160px,
      auto,
      auto,
      auto,
      auto,
      auto,
      auto;
  }

  body::before {
    right: -40px;
    bottom: -10px;
    width: 211px;
    height: 183px;
  }
}