/*
 * custom.css — HLabs Git theme
 *
 * Restyles Gitea's dark theme to match the Dashboard (internal/frontend):
 * charcoal neutral ramp + electric-azure accent, Inter / JetBrains Mono,
 * subtle grid texture, glow on primary actions.
 *
 * Palette source: internal/frontend/tailwind.config.js
 *   slate 950 #070709 · 900 #0d0e10 · 800 #17181b · 700 #26272c · 600 #3b3d43
 *   slate 500 #74777f · 400 #8e9099 · 300 #b1b3bb · 100 #e9eaed · 50 #f7f7f9
 *   blue  600 #1878f0 (primary) · 500 #2a8bff (ring) · 400 #4a9dff (accent text)
 *
 * Deployed to: /opt/gitea/gitea/gitea/public/assets/css/custom.css
 * Loaded via:  templates/custom/header.tmpl
 */

:root {
  /* Fonts — same stacks as the Dashboard */
  --fonts-override: "Inter";
  --fonts-proportional: "Inter", system-ui, sans-serif;
  --fonts-monospace: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Accent — electric azure */
  --color-primary: #1878f0;
  --color-primary-contrast: #ffffff;
  --color-primary-light-1: #2a8bff;
  --color-primary-light-2: #4a9dff;
  --color-primary-light-3: #73b5ff;
  --color-primary-light-4: #a6d1ff;
  --color-primary-light-5: #d0e7ff;
  --color-primary-light-6: #e8f3ff;
  --color-primary-light-7: #f4f9ff;
  --color-primary-dark-1: #1263cc;
  --color-primary-dark-2: #0f50a3;
  --color-primary-dark-3: #123f7d;
  --color-primary-dark-4: #0c2749;
  --color-primary-dark-5: #0a1f3a;
  --color-primary-dark-6: #08182d;
  --color-primary-dark-7: #051020;
  --color-primary-alpha-30: rgba(24, 120, 240, 0.3);
  --color-primary-alpha-40: rgba(24, 120, 240, 0.4);
  --color-primary-alpha-50: rgba(24, 120, 240, 0.5);
  --color-primary-alpha-60: rgba(24, 120, 240, 0.6);
  --color-primary-alpha-70: rgba(24, 120, 240, 0.7);
  --color-primary-alpha-80: rgba(24, 120, 240, 0.8);
  --color-primary-alpha-90: rgba(24, 120, 240, 0.9);
  --color-accent: rgba(42, 139, 255, 0.35);
  --color-small-accent: rgba(42, 139, 255, 0.35);

  /* Surfaces — charcoal ramp */
  --color-body: #0d0e10;              /* page background (slate-900) */
  --color-box-body: #17181b;          /* cards / boxes (slate-800) */
  --color-box-body-highlight: #1c1d21;
  --color-box-header: #131417;
  --color-header-wrapper: #070709;    /* top chrome (slate-950) */
  --color-nav-bg: #070709;
  --color-nav-hover-bg: #17181b;
  --color-navbar: #070709;
  --color-navbar-hover: #17181b;
  --color-menu: #101114;
  --color-card: #17181b;
  --color-secondary-bg: #101114;
  --color-footer: transparent;
  --color-timeline: #26272c;
  --color-teal-timeline: #26272c;
  --color-console-bg: #070709;
  --color-console-border: #26272c;
  --color-markup-code-block: #101114;
  --color-markup-table-row: rgba(255, 255, 255, 0.02);
  --color-code-bg: #101114;
  --color-project-column-bg: #101114;
  --color-overlay-backdrop: rgba(7, 7, 9, 0.6);

  /* Borders / separators */
  --color-secondary: #26272c;         /* slate-700 hairlines */
  --color-secondary-dark-1: #2c2d33;
  --color-secondary-dark-2: #33343a;
  --color-secondary-dark-3: #3b3d43;
  --color-secondary-light-1: #202126;
  --color-secondary-light-2: #1b1c20;
  --color-secondary-alpha-30: rgba(59, 61, 67, 0.3);
  --color-secondary-alpha-40: rgba(59, 61, 67, 0.4);
  --color-secondary-alpha-50: rgba(59, 61, 67, 0.5);
  --color-light-border: rgba(255, 255, 255, 0.08);

  /* Text ramp */
  --color-text-dark: #f7f7f9;
  --color-text: #e9eaed;
  --color-text-light: #b1b3bb;
  --color-text-light-1: #8e9099;
  --color-text-light-2: #74777f;
  --color-text-light-3: #5a5c63;
  --color-placeholder-text: #74777f;
  --color-caret: #e9eaed;

  /* Inputs */
  --color-input-text: #e9eaed;
  --color-input-background: #0d0e10;
  --color-input-border: #26272c;
  --color-input-border-hover: #3b3d43;
  --color-input-toggle-background: #26272c;

  /* Interaction states */
  --color-hover: rgba(255, 255, 255, 0.04);
  --color-hover-opaque: #1c1d21;
  --color-active: rgba(255, 255, 255, 0.07);
  --color-active-opaque: #202126;
  --color-light: rgba(255, 255, 255, 0.04);
  --color-light-mimic-enabled: rgba(255, 255, 255, 0.04);
  --color-button: #17181b;
  --color-shadow: rgba(0, 0, 0, 0.6);

  /* Labels */
  --color-label-text: #b1b3bb;
  --color-label-bg: #26272c;
  --color-label-hover-bg: #3b3d43;
  --color-label-active-bg: #3b3d43;

  /* Softer corners, like the Dashboard's rounded-lg */
  --border-radius: 8px;
  --border-radius-medium: 10px;
}

/* Brand grid texture — same as the Dashboard login backdrop, kept faint */
body {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* Primary actions get the Dashboard's glow-on-hover sheen */
.ui.primary.button:hover,
.ui.primary.button:focus {
  box-shadow:
    0 0 0 1px rgba(42, 139, 255, 0.25),
    0 0 22px -6px rgba(42, 139, 255, 0.55);
}

/* Minimal branded landing page (templates/home.tmpl) */
.hlabs-home {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: calc(100vh - 220px);
}
.hlabs-home-title {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #e9eaed;
  margin: 1rem 0 0.25rem;
}
.hlabs-home-sub {
  color: #8e9099;
  font-size: 0.875rem;
  margin-bottom: 1.5rem;
}

/* Login / register: card look — slate-800 panel, 16px radius, deep shadow */
.page-content.user.signin .ui.container,
.page-content.user.signup .ui.container {
  max-width: 24rem !important;
}
.page-content.user.signin .ui.form,
.page-content.user.signup .ui.form {
  background: #17181b;
  border: 1px solid #26272c;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}