/* Plott brand skin for Gitea.
   Colours come from the Plott design system's foundation tokens. Gitea's own
   theme variables are reassigned rather than overridden per component, so the
   brand follows Gitea's light and dark themes instead of fighting them. */

:root {
  --plott-brand: #836550;
  --plott-brand-strong: #533b2d;
  --plott-brand-hover: #6f5344;
  --plott-brand-active: #5c4436;
  --plott-brand-muted: #f0e7df;
  --plott-brand-muted-fg: #6b4f3d;
  --plott-border-warm: #e8e2d5;
}

/* Dark keeps the same hue but lifts it, because the logo brown goes muddy on
   a dark surface. These are the design system's dark-mode brand values. */
:root,
.theme-gitea-light,
.theme-gitea-auto {
  --color-primary: #836550;
  --color-primary-contrast: #ffffff;
  --color-primary-dark-1: #6f5344;
  --color-primary-dark-2: #5c4436;
  --color-primary-dark-3: #533b2d;
  --color-primary-dark-4: #45311f;
  --color-primary-light-1: #94765d;
  --color-primary-light-2: #a68a72;
  --color-primary-light-3: #c0aa97;
  --color-primary-light-4: #d9cabb;
  --color-primary-light-5: #f0e7df;
  --color-primary-alpha-30: #8365504d;
  --color-primary-alpha-40: #83655066;
  --color-primary-alpha-50: #83655080;
  --color-primary-alpha-60: #83655099;
  --color-primary-alpha-70: #836550b3;
  --color-primary-alpha-80: #836550cc;
  --color-primary-alpha-90: #836550e6;
  --color-primary-hover: #6f5344;
  --color-primary-active: #5c4436;
  --color-secondary: #f2f2f2;
  --color-secondary-dark-1: #e6e6e6;
}

@media (prefers-color-scheme: dark) {
  .theme-gitea-auto {
    --color-primary: #cba98d;
    --color-primary-contrast: #201a14;
    --color-primary-dark-1: #d9bda5;
    --color-primary-dark-2: #e0c4a8;
    --color-primary-light-1: #b8937a;
    --color-primary-light-2: #a68a72;
    --color-primary-hover: #d9bda5;
    --color-primary-active: #e0c4a8;
  }
}

.theme-gitea-dark {
  --color-primary: #cba98d;
  --color-primary-contrast: #201a14;
  --color-primary-dark-1: #d9bda5;
  --color-primary-dark-2: #e0c4a8;
  --color-primary-light-1: #b8937a;
  --color-primary-light-2: #a68a72;
  --color-primary-hover: #d9bda5;
  --color-primary-active: #e0c4a8;
}

/* The wordmark is wide, so the square slot Gitea reserves for a logo crops it.
   Widening the slot keeps the mark legible in the navbar. */
#navbar .logo,
.navbar .brand img,
img.logo {
  width: auto;
  max-height: 30px;
}

/* Announcement banner. Warm muted surface with a hairline, which the design
   system reserves for small brand-tinted areas rather than large fills. */
.plott-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--plott-brand-muted);
  color: var(--plott-brand-muted-fg);
  border-bottom: 1px solid var(--plott-border-warm);
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
}

.plott-banner a {
  color: var(--plott-brand-strong);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.plott-banner a:hover {
  color: var(--plott-brand-active);
}

@media (prefers-color-scheme: dark) {
  .theme-gitea-auto .plott-banner {
    background: #2c251d;
    color: #dcc3aa;
    border-bottom-color: #e6decd1f;
  }

  .theme-gitea-auto .plott-banner a {
    color: #e0c4a8;
  }
}

.theme-gitea-dark .plott-banner {
  background: #2c251d;
  color: #dcc3aa;
  border-bottom-color: #e6decd1f;
}

.theme-gitea-dark .plott-banner a {
  color: #e0c4a8;
}