/* Magentic Fusion — Gitea theme
   Reusa la paleta del theme Keycloak (infra/keycloak/themes/magentic-fusion/).
   - Magenta : #E20074  (T-Systems)
   - Purple  : #8B00C8
   - Ink     : #141414
*/

:root,
:root[data-theme="magentic-fusion"] {
  --mf-magenta: #E20074;
  --mf-magenta-hover: #ff1a8a;
  --mf-purple:  #8B00C8;
  --mf-purple-hover: #a31fe0;
  --mf-ink:     #141414;
  --mf-ink-2:   #1c1c1f;
  --mf-ink-3:   #25252a;
  --mf-fg:      #f5f5f7;
  --mf-muted:   #9a9aa2;
  --mf-border:  rgba(255, 255, 255, 0.08);
  --mf-border-strong: rgba(255, 255, 255, 0.14);
  --mf-radius:  12px;

  /* Gitea design tokens */
  --is-dark-theme: true;
  color-scheme: dark;

  /* Primary (links, buttons primarios) */
  --color-primary: var(--mf-magenta);
  --color-primary-contrast: #ffffff;
  --color-primary-dark-1: #c70066;
  --color-primary-dark-2: #a80056;
  --color-primary-dark-3: #8a0046;
  --color-primary-dark-4: #6b0037;
  --color-primary-dark-5: #4d0027;
  --color-primary-dark-6: #2e0017;
  --color-primary-dark-7: #100008;
  --color-primary-light-1: var(--mf-magenta-hover);
  --color-primary-light-2: #ff4da0;
  --color-primary-light-3: #ff80bb;
  --color-primary-light-4: #ffb3d6;
  --color-primary-light-5: #ffd9eb;
  --color-primary-light-6: #ffe6f2;
  --color-primary-light-7: #fff0f7;
  --color-primary-alpha-10: rgba(226, 0, 116, 0.10);
  --color-primary-alpha-20: rgba(226, 0, 116, 0.20);
  --color-primary-alpha-30: rgba(226, 0, 116, 0.30);
  --color-primary-alpha-40: rgba(226, 0, 116, 0.40);
  --color-primary-alpha-50: rgba(226, 0, 116, 0.50);
  --color-primary-alpha-60: rgba(226, 0, 116, 0.60);
  --color-primary-alpha-70: rgba(226, 0, 116, 0.70);
  --color-primary-alpha-80: rgba(226, 0, 116, 0.80);
  --color-primary-alpha-90: rgba(226, 0, 116, 0.90);
  --color-primary-hover: var(--mf-magenta-hover);
  --color-primary-active: #b8005c;

  /* Secondary (accents, hovers) */
  --color-secondary: var(--mf-purple);
  --color-secondary-dark-1: #7a00b0;
  --color-secondary-dark-2: #690098;
  --color-secondary-light-1: var(--mf-purple-hover);
  --color-secondary-light-2: #b94deb;
  --color-secondary-alpha-50: rgba(139, 0, 200, 0.50);

  --color-accent: var(--mf-purple);
  --color-small-accent: var(--mf-purple);

  /* Backgrounds */
  --color-body: var(--mf-ink);
  --color-box-body: var(--mf-ink-2);
  --color-box-body-highlight: var(--mf-ink-3);
  --color-box-header: var(--mf-ink-2);
  --color-page-content: var(--mf-ink);
  --color-content-bg: var(--mf-ink-2);
  --color-footer: var(--mf-ink);
  --color-nav-bg: var(--mf-ink-2);
  --color-nav-hover-bg: var(--mf-ink-3);
  --color-secondary-bg: var(--mf-ink-2);
  --color-active: rgba(226, 0, 116, 0.12);
  --color-menu: var(--mf-ink-2);
  --color-card: var(--mf-ink-2);
  --color-markup-code-block: var(--mf-ink-3);
  --color-markup-table-row: var(--mf-ink-2);
  --color-markup-table-row-alt: var(--mf-ink-3);
  --color-input-background: var(--mf-ink-3);
  --color-input-border: var(--mf-border);
  --color-input-border-hover: var(--mf-border-strong);
  --color-input-toggle-background: var(--mf-ink-3);
  --color-light: rgba(255, 255, 255, 0.04);
  --color-light-mimic-enabled: rgba(255, 255, 255, 0.04);
  --color-light-border: var(--mf-border);
  --color-hover: var(--mf-ink-3);
  --color-active-line: rgba(139, 0, 200, 0.12);

  /* Text */
  --color-text: var(--mf-fg);
  --color-text-dark: #ffffff;
  --color-text-light: #d8d8de;
  --color-text-light-1: #b8b8c0;
  --color-text-light-2: var(--mf-muted);
  --color-text-light-3: #7c7c84;

  /* Borders */
  --color-secondary-button: var(--mf-border-strong);
  --color-secondary-hover: rgba(255, 255, 255, 0.06);
  --color-secondary-active: rgba(255, 255, 255, 0.10);
  --color-light-secondary: var(--mf-border);
  --color-input-text: var(--mf-fg);

  /* Status (mantenemos semantica de Gitea) */
  --color-red: #ff5c7a;
  --color-orange: #ff9a3c;
  --color-yellow: #f5c542;
  --color-olive: #b5cc18;
  --color-green: #3ddc97;
  --color-teal: #1dd1a1;
  --color-blue: #4aa3ff;
  --color-violet: var(--mf-purple);
  --color-purple: var(--mf-purple);
  --color-pink: var(--mf-magenta);
  --color-brown: #a8927a;
  --color-grey: #9a9aa2;
  --color-black: #0a0a0c;

  --color-diff-added-row-bg: rgba(61, 220, 151, 0.10);
  --color-diff-added-word-bg: rgba(61, 220, 151, 0.25);
  --color-diff-removed-row-bg: rgba(255, 92, 122, 0.10);
  --color-diff-removed-word-bg: rgba(255, 92, 122, 0.25);
}

/* Body background con gradientes de marca */
body {
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(139, 0, 200, 0.25), transparent 60%),
    radial-gradient(900px 500px at 100% 110%, rgba(226, 0, 116, 0.22), transparent 55%),
    var(--mf-ink) !important;
  font-family: "TeleNeo", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Top navbar sutilmente translúcido */
.full.height > #navbar,
#navbar {
  background-color: rgba(20, 20, 20, 0.85) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--mf-border);
}

/* Botones primarios */
.ui.primary.button,
.ui.primary.buttons .button {
  background: linear-gradient(135deg, var(--mf-magenta) 0%, var(--mf-purple) 100%) !important;
  border: none;
  color: #fff;
}
.ui.primary.button:hover,
.ui.primary.buttons .button:hover {
  background: linear-gradient(135deg, var(--mf-magenta-hover) 0%, var(--mf-purple-hover) 100%) !important;
  filter: brightness(1.05);
}

/* Inputs */
.ui.input > input,
.ui.form input:not([type]),
.ui.form input[type="text"],
.ui.form input[type="email"],
.ui.form input[type="password"],
.ui.form textarea,
.ui.form select {
  background: var(--mf-ink-3) !important;
  border: 1px solid var(--mf-border) !important;
  color: var(--mf-fg) !important;
  border-radius: 10px !important;
}

/* Cards / segments */
.ui.segment,
.ui.card,
.ui.cards > .card {
  background: rgba(28, 28, 31, 0.85);
  border: 1px solid var(--mf-border);
  border-radius: var(--mf-radius);
}

/* Repository header */
.repository .header-wrapper {
  background: var(--mf-ink-2);
  border-bottom: 1px solid var(--mf-border);
}

/* Tabs activos */
.ui.menu .active.item {
  color: var(--mf-magenta) !important;
  border-color: var(--mf-magenta) !important;
}

/* Links */
a, a:hover {
  color: var(--mf-magenta);
}
a:hover {
  color: var(--mf-magenta-hover);
}

/* Scrollbar */
::-webkit-scrollbar-thumb {
  background: var(--mf-border-strong);
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--mf-purple);
}
::-webkit-scrollbar-track {
  background: transparent;
}