/* Forgejo theme "spontaneamente" – Spontaneamente brand (light).
   Builds on the stock Forgejo light theme and only overrides variables + a few shapes,
   so it keeps working across Forgejo upgrades. Brand kit: /work/spontest/branding/BRAND.md */
@import url("./theme-forgejo-light.css");

:root {
  /* Font: Jost (self-hosted, @font-face in spontaneamente-base.css) */
  --fonts-proportional: "Jost", "Futura", "Century Gothic", -apple-system, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial;

  /* Primary = brand red #B8261F, hover #8E1C17 */
  --color-primary: #B8261F;
  --color-primary-contrast: #ffffff;
  --color-primary-dark-1: #A3221C;
  --color-primary-dark-2: #8E1C17;
  --color-primary-dark-3: #821A15;
  --color-primary-dark-4: #741712;
  --color-primary-dark-5: #66140F;
  --color-primary-dark-6: #58110D;
  --color-primary-dark-7: #4A0E0B;
  --color-primary-light-1: #DB3833;
  --color-primary-light-2: #E25C58;
  --color-primary-light-3: #F08A85;
  --color-primary-light-4: #F4B9B6;
  --color-primary-light-5: #F8D3D1;
  --color-primary-light-6: #FCEDEC;
  --color-primary-light-7: #FEF6F5;
  --color-primary-alpha-10: #B8261F19;
  --color-primary-alpha-20: #B8261F33;
  --color-primary-alpha-30: #B8261F4B;
  --color-primary-alpha-40: #B8261F66;
  --color-primary-alpha-50: #B8261F80;
  --color-primary-alpha-60: #B8261F99;
  --color-primary-alpha-70: #B8261FB3;
  --color-primary-alpha-80: #B8261FCC;
  --color-primary-alpha-90: #B8261FE1;
  --color-primary-hover: #8E1C17;
  --color-primary-active: #741712;
  --color-accent: #DB3833;
  --color-small-accent: #F4B9B6;
  --color-highlight-fg: #F4B9B6;
  --color-highlight-bg: #FCEDEC;

  /* Text: ink #17181C, greys #45464C / #5A5B61 */
  --color-text-dark: #000000;
  --color-text: #17181C;
  --color-text-light: #45464C;
  --color-text-light-1: #4F5056;
  --color-text-light-2: #5A5B61;
  --color-text-light-3: #66676D;

  /* Warm neutrals: borders #ECE7E2, inputs #CFC8C1, backgrounds #FBF7F4 / #F1EDE9 */
  --color-secondary: #ECE7E2;
  --color-secondary-dark-1: #E4DED8;
  --color-secondary-dark-2: #D9D2CB;
  --color-secondary-dark-3: #CFC8C1;
  --color-secondary-dark-4: #B8AFA7;
  --color-secondary-light-1: #F1EDE9;
  --color-secondary-light-2: #F5F1EE;
  --color-secondary-light-3: #F8F4F1;
  --color-secondary-light-4: #FBF7F4;
  --color-secondary-bg: #F1EDE9;
  --color-body: #ffffff;
  --color-box-header: #FBF7F4;
  --color-box-body: #ffffff;
  --color-box-body-highlight: #F1EDE9;
  --color-header-wrapper: #FBF7F4;
  --color-header-wrapper-transparent: #FBF7F400;
  --color-menu: #ffffff;
  --color-button: #F1EDE9;
  --color-hover: #F1EDE9;
  --color-active: #ECE7E2;
  --color-light-border: #17181C1f;
  --color-input-text: #17181C;
  --color-input-border: #CFC8C1;
  --color-input-border-hover: #B8AFA7;
  --color-nav-bg: #ffffff;
  --color-nav-hover-bg: #FCEDEC;
  --color-footer: #14251D;
  --color-label-bg: #FCEDEC;
  --color-label-hover-bg: #F8D3D1;
  --color-label-active-bg: #F4B9B6;
  --color-label-text: #17181C;

  /* Shapes: softer corners (cards 16–20px, inputs 12px) */
  --border-radius: 8px;
  --border-radius-medium: 12px;
  --border-radius-large: 20px;
}

/* Headings in Jost bold */
h1, h2, h3, h4, .ui.header { font-family: var(--fonts-regular); }
.ui.header, h1, h2 { font-weight: 700; }

/* Navbar: white with hairline border, larger round logo + wordmark */
#navbar { border-bottom: 1px solid #ECE7E2; }
#navbar-logo img { width: 40px !important; height: 40px !important; }
@media (min-width: 768px) {
  #navbar-logo::after {
    content: "Spontaneamente";
    margin-inline-start: 10px;
    font-weight: 700;
    font-size: 17px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #17181C;
  }
}

/* Pill buttons (grouped/attached buttons keep their stock corners, their rules are more specific) */
.ui.button, .ui.basic.button { border-radius: 999px; font-weight: 600; }
.ui.primary.button, .ui.primary.buttons .button { background: #B8261F; }
.ui.primary.button:hover, .ui.primary.buttons .button:hover { background: #8E1C17; }

/* Inputs: 12px corners, warm border, brand focus ring */
.ui.form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(.search),
.ui.form textarea,
.ui.form select {
  border-radius: 12px;
}
.ui.form input:focus, .ui.form textarea:focus, .ui.form select:focus,
.ui.input > input:focus {
  border-color: #B8261F !important;
  outline: 3px solid #F4B9B6;
  outline-offset: 1px;
}

/* Login / auth pages: warm background, rounded card */
.page-content.user.signin,
.page-content.user.link-account,
.page-content.user.forgot.password,
.page-content.user.activate { background: #FBF7F4; padding-top: 40px; padding-bottom: 40px; }
.page-content.user .ui.attached.header.top { border-radius: 20px 20px 0 0; background: #ffffff; font-size: 22px; font-weight: 700; padding: 20px 24px; }
.page-content.user .ui.attached.segment:last-child,
.page-content.user .ui.attached.segment.bottom { border-radius: 0 0 20px 20px; }
.page-content.user .ui.attached.segment { box-shadow: 0 20px 50px rgba(80, 10, 8, .08); }
.page-content.user .ui.form input:not([type="checkbox"]):not([type="radio"]) { border-width: 1.5px; padding-top: 10px; padding-bottom: 10px; }
.page-content.user .ui.primary.button { padding: 14px 28px; font-size: 16px; }

/* Links */
a:hover { color: var(--color-primary-hover); }