/* git404 — 404-ecosystem theme · DARK
   Matches ai404.site + claude404.site: navy surfaces, terracotta accent,
   Space/JetBrains/Geist Mono. Builds on Gitea's built-in dark theme and remaps
   every core color + the interior chrome. Served live (no rebuild for CSS). */
@import url("https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=JetBrains+Mono:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap");
@import url("./theme-gitea-dark.css");

:root {
  /* ---- accent ramp — terracotta #d97757 (ai404). dark-N = lighter, light-N = darker ---- */
  --color-primary: #d97757;
  --color-primary-contrast: #1a1106;
  --color-primary-dark-1: #e08a6c;
  --color-primary-dark-2: #e69a80;
  --color-primary-dark-3: #ecab94;
  --color-primary-dark-4: #f1bda9;
  --color-primary-dark-5: #f5cfc3;
  --color-primary-dark-6: #f9e2db;
  --color-primary-dark-7: #fcf3ef;
  --color-primary-light-1: #c25636;
  --color-primary-light-2: #a8452a;
  --color-primary-light-3: #883922;
  --color-primary-light-4: #682c1b;
  --color-primary-light-5: #491f13;
  --color-primary-light-6: #2a120b;
  --color-primary-light-7: #0c0604;
  --color-primary-alpha-30: #d977574d;
  --color-primary-alpha-40: #d9775766;
  --color-primary-alpha-50: #d9775780;
  --color-primary-alpha-60: #d9775799;
  --color-primary-alpha-70: #d97757b3;
  --color-primary-alpha-80: #d97757cc;
  --color-primary-alpha-90: #d97757e6;
  --color-accent: #e08a6c;
  --color-small-accent: #2a120b;

  /* ---- neutral surfaces — ai404 navy ---- */
  --color-secondary: #1b2336;
  --color-secondary-dark-1: #222b42;
  --color-secondary-dark-2: #28324c;
  --color-secondary-dark-3: #2e3a57;
  --color-secondary-dark-4: #354161;
  --color-secondary-dark-5: #3c4a6c;
  --color-secondary-dark-6: #445277;
  --color-secondary-dark-7: #4d5b82;
  --color-secondary-dark-8: #56648d;
  --color-secondary-dark-9: #5f6d97;
  --color-secondary-dark-10: #6976a1;
  --color-secondary-dark-11: #7380ab;
  --color-secondary-dark-12: #7e8ab4;
  --color-secondary-dark-13: #8894bd;
  --color-secondary-light-1: #161d2e;
  --color-secondary-light-2: #111726;
  --color-secondary-light-3: #0e121c;
  --color-secondary-light-4: #0a0d14;
  --color-secondary-alpha-50: #1b233680;
  --color-secondary-alpha-60: #1b233699;
  --color-secondary-alpha-70: #1b2336b3;
  --color-secondary-alpha-80: #1b2336cc;
  --color-secondary-alpha-90: #1b2336e6;
  --color-secondary-bg: #111726;
  --color-secondary-nav-bg: #0e121c;

  /* ---- page + boxes ---- */
  --color-body: #0a0d14;
  --color-box-body: #111726;
  --color-box-body-highlight: #161d2e;
  --color-box-header: #161d2e;
  --color-card: #111726;
  --color-menu: #111726;
  --color-footer: #0e121c;

  /* ---- navbar ---- */
  --color-nav-bg: #0e121c;
  --color-nav-hover-bg: #161d2e;
  --color-nav-text: #e7e9ee;

  /* ---- text ---- */
  --color-text: #e7e9ee;
  --color-text-dark: #ffffff;
  --color-text-light: #c8ccd6;
  --color-text-light-1: #99a0b0;
  --color-text-light-2: #7c8496;
  --color-text-light-3: #5b6273;
  --color-placeholder-text: #5b6273;

  /* ---- inputs ---- */
  --color-input-background: #0e121c;
  --color-input-text: #e7e9ee;
  --color-input-border: #2a3346;
  --color-input-border-hover: #d97757;

  /* ---- interaction states ---- */
  --color-hover: #ffffff0c;
  --color-active: #ffffff14;
  --color-light-border: rgba(255,255,255,0.08);
  --color-shadow: #00000070;
  --color-shadow-opaque: #05070c;
  --color-overlay-backdrop: #0008;

  /* ---- code ---- */
  --color-code-bg: #0a0d14;
  --color-markup-code-block: #0a0d14;
  --color-markup-code-inline: #161d2e;
  --color-highlight-bg: #d9775726;
  --color-highlight-fg: #f5cfc3;
  --color-editor-line-highlight: #ffffff0a;

  /* ---- brand ---- */
  --color-brand: #d97757;

  /* ---- ai404 font stack ---- */
  --fonts-proportional: "JetBrains Mono", ui-monospace, "Space Mono", monospace;
  --fonts-monospace: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
}

/* apply the ai404 font system */
body { font-family: var(--fonts-proportional); }
h1, h2, h3, h4, h5, .ui.header, .repository .header-wrapper .flex-item-title,
.brand-name, .item.brand { font-family: "Space Mono", ui-monospace, monospace; letter-spacing: -0.01em; }
.ui.button, .ui.label, .ui.menu, .ui.tabular.menu .item, .breadcrumb,
.ui.dropdown .menu > .item { font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace; }
code, pre, .file-view, .lines-code, tt { font-family: "Geist Mono", ui-monospace, monospace; }

/* =========================================================================
   Interior chrome — make it unmistakably the 404 ecosystem (ai404 look)
   ========================================================================= */

/* top navbar = slim navy bar with a terracotta brand line */
#navbar, .ui.secondary.menu.navbar {
  background: var(--color-nav-bg) !important;
  border-bottom: 2px solid var(--color-brand) !important;
}

/* active tabs / selected nav items → terracotta underline */
.ui.tabular.menu .active.item,
.ui.secondary.pointing.menu .active.item,
.repository .ui.tabular.menu .active.item,
.page-content .overflow-menu .active.item {
  border-color: var(--color-primary) !important;
  color: var(--color-text-dark) !important;
}

/* primary + stock-green buttons + the repo "Code"/clone button → terracotta */
.ui.primary.button,
.ui.primary.buttons .button,
.ui.green.button,
.ui.green.buttons .button,
.clone-panel .ui.button.primary,
.ui.basic.green.button {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-primary-contrast) !important;
}
.ui.primary.button:hover,
.ui.green.button:hover,
.ui.green.buttons .button:hover,
.ui.primary.buttons .button:hover { background: var(--color-primary-dark-1) !important; border-color: var(--color-primary-dark-1) !important; }

/* links use a readable lighter terracotta */
a { color: var(--color-primary-dark-2); }
a:hover { color: var(--color-primary-dark-3); }

/* labels/kickers feel like ai404 eyebrows */
.repository .ui.tabular.menu .item,
.ui.tabular.menu .item { letter-spacing: 0.02em; }

/* =========================================================================
   Layout — ai404 wide column. nav, banner, content, footer ALL align to the
   same 90vw / max 2400px column (gutter = (100% - 2400px)/2, min 5vw). This
   removes the "some bars full-width, content only 1/3" mismatch.
   ========================================================================= */
:root { --g404-gutter: max(5vw, calc((100% - 2400px) / 2)); }

/* full-bleed bars: keep their background edge-to-edge, push inner content to
   the shared column so nav items line up with the page content below */
.eco-banner { padding-left: var(--g404-gutter) !important; padding-right: var(--g404-gutter) !important; }
#navbar { padding-left: var(--g404-gutter) !important; padding-right: var(--g404-gutter) !important; }

/* main content, repo chrome and footer share the exact same wide column */
.page-content > .ui.container,
.page-content > .ui.container.fluid,
.repository > .ui.container,
.dashboard > .ui.container,
.dashboard.feeds .ui.container,
.dashboard.issues .ui.container,
.ui.main.container,
.full.height > .ui.container,
.page-footer .ui.container,
footer .ui.container {
  width: auto !important;
  max-width: 2400px !important;
  margin-left: var(--g404-gutter) !important;
  margin-right: var(--g404-gutter) !important;
}

/* the repository sub-header bar (clone/branch row) also spans the column */
.repository .header-wrapper { width: 100% !important; }