/* "Hickling Core" -- Environment A (home lab & docs) of brandGuidelines.md:
   Deep Slate canvas, Matte Slate panels, Electric Teal accent, Inter for UI
   text, JetBrains Mono for code, thin slate-700/50 borders, 12px corners on
   cards, white-to-silver gradient on large headings. Built on Gitea's own
   dark theme (hickling-dark-base.css) so everything not overridden here
   still has a sensible dark value. */
@import url("./hickling-dark-base.css");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap");

gitea-theme-meta-info {
  --theme-display-name: "Hickling Core";
  --theme-color-scheme: "dark";
}

:root {
  --hk-canvas: #0F172A;      /* slate-900 */
  --hk-panel: #1E293B;       /* slate-800 */
  --hk-panel-raised: #273549;
  --hk-border: #33415580;    /* slate-700 / 50% */
  --hk-teal: #0D9488;        /* teal-600 */
  --hk-silver: #94A3B8;      /* slate-400 */

  --fonts-proportional: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fonts-monospace: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, monospace, var(--fonts-emoji);

  /* Electric Teal primary. In dark themes Gitea's -dark-N steps get
     lighter and -light-N steps get darker. */
  --color-primary: var(--hk-teal);
  --color-primary-contrast: #ffffff;
  --color-primary-dark-1: #14b8a6;
  --color-primary-dark-2: #2dd4bf;
  --color-primary-dark-3: #5eead4;
  --color-primary-dark-4: #99f6e4;
  --color-primary-dark-5: #ccfbf1;
  --color-primary-dark-6: #e6fdf8;
  --color-primary-dark-7: #f0fdfa;
  --color-primary-light-1: #0f766e;
  --color-primary-light-2: #115e59;
  --color-primary-light-3: #134e4a;
  --color-primary-light-4: #10403d;
  --color-primary-light-5: #0c2f2e;
  --color-primary-light-6: #081f1f;
  --color-primary-light-7: #041010;
  --color-primary-alpha-10: #0d948819;
  --color-primary-alpha-20: #0d948833;
  --color-primary-alpha-30: #0d94884b;
  --color-primary-alpha-40: #0d948866;
  --color-primary-alpha-50: #0d948880;
  --color-primary-alpha-60: #0d948899;
  --color-primary-alpha-70: #0d9488b3;
  --color-primary-alpha-80: #0d9488cc;
  --color-primary-alpha-90: #0d9488e1;
  --color-primary-hover: var(--color-primary-light-1);
  --color-primary-active: var(--color-primary-light-2);
  --color-accent: var(--hk-teal);
  --color-small-accent: var(--color-primary-light-5);

  /* Slate greys for Gitea's secondary (border / button) scale. */
  --color-secondary: #334155;
  --color-secondary-dark-1: #3b4a5f;
  --color-secondary-dark-2: #475569;
  --color-secondary-dark-3: #526177;
  --color-secondary-dark-4: #64748b;
  --color-secondary-dark-5: #717f93;
  --color-secondary-dark-6: #7d8aa0;
  --color-secondary-dark-7: #8a96aa;
  --color-secondary-dark-8: #94a3b8;
  --color-secondary-dark-9: #a3b0c2;
  --color-secondary-dark-10: #b4bfcd;
  --color-secondary-dark-11: #cbd5e1;
  --color-secondary-dark-12: #d8e0ea;
  --color-secondary-dark-13: #e2e8f0;
  --color-secondary-light-1: #2a3649;
  --color-secondary-light-2: #243044;
  --color-secondary-light-3: #1a2436;
  --color-secondary-light-4: #141d2e;
  --color-secondary-bg: #243044;
  --color-secondary-nav-bg: var(--hk-canvas);

  /* Canvas and panels. */
  --color-body: var(--hk-canvas);
  --color-box-header: var(--hk-panel-raised);
  --color-box-body: var(--hk-panel);
  --color-box-body-highlight: #243247;
  --color-nav-bg: #0b1222;
  --color-nav-hover-bg: var(--color-secondary-light-1);
  --color-footer: #0b1222;
  --color-menu: var(--hk-panel);
  --color-card: var(--hk-panel);
  --color-button: var(--hk-panel);
  --color-input-background: #131c30;
  --color-input-toggle-background: #334155;
  --color-code-bg: #131c30;
  --color-console-bg: #0b1222;
  --color-console-border: #334155;
  --color-console-menu-bg: var(--hk-panel);
  --color-expand-button: #2a3649;
  --color-hover-opaque: #243044;
  --color-timeline: #334155;
  --color-diff-inactive: #1a2436;
  --color-tooltip-bg: #0b1222f0;
  --color-overlay-backdrop: #020617c0;

  /* Slate text. */
  --color-text-dark: #f8fafc;
  --color-text: #e2e8f0;
  --color-text-light: #cbd5e1;
  --color-text-light-1: #b4bfcd;
  --color-text-light-2: #94a3b8;
  --color-text-light-3: #7d8aa0;
}

/* Links: teal-400 rather than teal-600 so they stay readable on the slate
   panels (teal-600 is under 4.5:1 there). Buttons keep Electric Teal. */
a {
  color: #2dd4bf;
}
a:hover {
  color: #5eead4;
}

/* Thin slate-700/50 borders and 12px corners on cards and panels. */
.ui.segment,
.ui.segments,
.ui.attached.segment,
.ui.card,
.ui.cards > .card,
.repository.file.list #repo-files-table,
.flex-list,
.ui.menu:not(.secondary):not(.text) {
  border-color: var(--hk-border);
}
.ui.segment:not(.attached),
.ui.segments,
.ui.card,
.ui.cards > .card {
  border-radius: 12px;
}
.ui.top.attached.header,
.ui.attached.segment.top,
.ui.top.attached.segment {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}
.ui.bottom.attached.segment,
.ui.bottom.attached.header {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

/* Large headings: white to silver gradient. */
.markup h1,
.markup h2,
.page-content h1.ui.header,
.home .ui.header,
.dashboard .ui.header.dashboard-title {
  background: linear-gradient(90deg, #ffffff, var(--hk-silver));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 700;
}

.navbar-logo img {
  width: 30px;
  height: 30px;
}