@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;800&family=Rajdhani:wght@400;500;600;700&family=Share+Tech+Mono&display=swap");

/*
  Upskill theme for Gitea.
  Layers on top of the built-in dark theme, so remove header.tmpl to undo it.
  Palette and type match christhompson.us:
    background #03060e, panel #09142c, line #1c2c4d, text #c9d6ee,
    cyan #35d6ff, pink #e48bc3, button blue #3276dc.
*/

html:root {
  color-scheme: dark;
  --fonts-regular: Rajdhani, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";

  --color-body: #03060e;
  --color-box-header: #07112a;
  --color-box-body: #09142c;
  --color-card: #09142c;
  --color-menu: #07112a;
  --color-button: #09142c;
  --color-nav-bg: #03060e;
  --color-header-wrapper: #03060e;
  --color-footer: #03060e;
  --color-code-bg: #07112a;

  --color-secondary: #1c2c4d;
  --color-secondary-dark-1: #24396a;
  --color-secondary-dark-2: #2b4580;
  --color-input-background: #07112a;
  --color-input-border: #24396a;

  --color-text-dark: #ffffff;
  --color-text: #c9d6ee;
  --color-text-light: #9db0d4;
  --color-text-light-1: #8b9fc6;
  --color-text-light-2: #7186ad;
  --color-text-light-3: #5d7199;

  --color-primary: #3276dc;
  --color-primary-hover: #2f6bc9;
  --color-primary-active: #2459b8;
  --color-primary-light-1: #2f6bc9;
  --color-primary-light-2: #2459b8;
  --color-primary-dark-1: #4d8ae6;
  --color-primary-dark-2: #6a9fee;

  --color-shadow: #00000066;
}

/* page background: faint grid and soft glows, like the main site */
html:root body {
  background:
    radial-gradient(700px 320px at 88% 6%, rgba(228, 139, 195, 0.10), transparent 70%),
    radial-gradient(600px 300px at 8% 0%, rgba(53, 214, 255, 0.06), transparent 70%),
    linear-gradient(rgba(53, 214, 255, 0.035) 1px, transparent 1px) 0 0 / 42px 42px,
    linear-gradient(90deg, rgba(53, 214, 255, 0.035) 1px, transparent 1px) 0 0 / 42px 42px,
    #03060e;
  background-attachment: fixed;
  font-weight: 500;
  font-size: 15px;
}

/* top bar */
html:root #navbar {
  background: rgba(3, 6, 14, 0.85);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #1c2c4d;
  box-shadow: none;
}

/* headings */
html:root h1,
html:root h2,
html:root .ui.huge.header,
html:root .ui.large.header {
  font-family: Orbitron, var(--fonts-regular);
  letter-spacing: 0.02em;
  color: #ffffff;
}

/* primary buttons */
html:root .ui.primary.button,
html:root .ui.primary.buttons .button {
  background-image: linear-gradient(#3276dc, #2459b8);
  border: 1px solid rgba(120, 170, 255, 0.35);
  color: #f2f7ff;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
html:root .ui.primary.button:hover,
html:root .ui.primary.buttons .button:hover {
  filter: brightness(1.12);
}

/* boxes and inputs: slightly squarer, like the calendar cards */
html:root .ui.segment,
html:root .ui.attached.segment,
html:root .ui.top.attached.header {
  border-color: #1c2c4d;
}
html:root .ui.input input,
html:root .ui.form input,
html:root .ui.form textarea,
html:root .ui.selection.dropdown {
  border-radius: 4px;
}

/* sign-in page: eyebrow line and a display-style title */
html:root .page-content.user.signin::before {
  content: "UPSKILL LABS  \00B7  TEAM ACCESS";
  display: block;
  text-align: center;
  font-family: "Share Tech Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: #35d6ff;
  margin: 36px 0 -6px;
}
html:root .page-content.user.signin .ui.top.attached.header {
  font-family: Orbitron, var(--fonts-regular);
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* links inside content stay readable on the dark panels */
html:root .markup a,
html:root .ui.breadcrumb a {
  color: #35d6ff;
}