/*
 * CEL theme for Forgejo. Palette and type follow the cel.com and
 * document-factory style guides (celconnectivity.gitlab.io/docs/STYLE_GUIDE.md,
 * document-factory/STYLE-GUIDE.md).
 *
 * It extends the built-in light theme and only overrides variables, so
 * upstream fixes keep coming in on upgrades. Functional colors (diff
 * red/green, danger, status) are left alone.
 */
@import "./theme-forgejo-light.css";

:root {
  /* cel-purple: primary (buttons, links, active tabs). No blue. */
  --color-primary: #655E7A;
  --color-primary-contrast: #FFFFFF;
  --color-primary-dark-1: #5A546E;
  --color-primary-dark-2: #4A4459; /* cel-purple-dark */
  --color-primary-dark-3: #433E51;
  --color-primary-dark-4: #3B3748;
  --color-primary-dark-5: #343040;
  --color-primary-dark-6: #2F2B3B;
  --color-primary-dark-7: #2B2838; /* cel-dark */
  --color-primary-light-1: #77708C;
  --color-primary-light-2: #8A83A0; /* cel-purple-light */
  --color-primary-light-3: #A39DB5;
  --color-primary-light-4: #BDB8CB;
  --color-primary-light-5: #D6D3E0;
  --color-primary-light-6: #EAE8F0;
  --color-primary-light-7: #F4F0FA; /* cel-purple-light-plus */
  --color-primary-alpha-10: #655E7A19;
  --color-primary-alpha-20: #655E7A33;
  --color-primary-alpha-30: #655E7A4B;
  --color-primary-alpha-40: #655E7A66;
  --color-primary-alpha-50: #655E7A80;
  --color-primary-alpha-60: #655E7A99;
  --color-primary-alpha-70: #655E7AB3;
  --color-primary-alpha-80: #655E7ACC;
  --color-primary-alpha-90: #655E7AE1;

  /* cel-red: accent only, not a fill */
  --color-accent: #D0202E;
  --color-small-accent: #FBEAEB; /* cel-red-light */

  /* Text */
  --color-text: #262626;         /* cel-body */
  --color-text-light: #555555;   /* cel-text */
  --color-text-light-1: #555555;
  --color-text-light-2: #6E6E6E;
  --color-text-light-3: #888888; /* cel-muted, placeholders */
  --color-input-text: #262626;

  /* Borders */
  --color-secondary: #DEDEDE;         /* cel-border */
  --color-secondary-dark-1: #DEDEDE;
  --color-secondary-dark-2: #CCCCCC;  /* cel-border-strong */
  --color-secondary-dark-3: #CCCCCC;
  --color-input-border: #CCCCCC;
  --color-input-border-hover: #888888;

  /* Surfaces */
  --color-box-header: #F5F7FA;   /* cel-off-white */
  --color-header-wrapper: #F5F7FA;
  --color-footer: #F5F7FA;
  --color-markup-table-row: #F5F7FA;
  --color-nav-bg: #FFFFFF;
  --color-nav-hover-bg: #EAE8F0;

  /* Roboto only */
  --fonts-proportional: "Roboto", "Liberation Sans", Arial, sans-serif;
}

/* Purple rule under the top bar, so it doesn't run into the red logo. */
#navbar {
  border-bottom: 3px solid var(--color-primary);
}

#navbar .item {
  font-weight: 500;
}

/* Tab bars (repo Code/Issues/PRs, settings tabs) */
.ui.secondary.pointing.menu .item {
  color: var(--color-text-light);
  font-weight: 500;
}
.ui.secondary.pointing.menu .active.item,
.ui.secondary.pointing.menu .active.item:hover {
  color: var(--color-text);
  font-weight: 700;
  border-color: var(--color-primary);
}

/* 3px red top border on the sign-in box and other segments */
.ui.attached.header.top,
.ui.top.attached.segment {
  border-top: 3px solid var(--color-accent);
}