/* fremforge theme — overrides Forgejo's default color tokens + typography.
 *
 * Forgejo exposes CSS custom properties for theming (`:root` block); we
 * override the subset that's brand-meaningful and leave the rest at
 * upstream defaults. Source-of-truth color tokens:
 * fremforge/graphics/logo/fremforge-design-system.html.
 *
 * Loaded after the upstream theme by header.tmpl so these win on cascade.
 */

:root {
  /* Typography — Inter for UI, Recursive for code. Loaded by
   * fremforge-fonts.css (loaded immediately before this file). */
  --fonts-regular: 'Inter', system-ui, -apple-system, sans-serif;
  --fonts-monospace: 'Recursive', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Brand color tokens (light theme defaults). */
  --forge-green: #468A2D;
  --forge-green-deep: #2F5F1F;
  --forge-green-tint: #E5F0DD;
  --ember: #E8791F;
  --ember-deep: #B85A0F;
  --ember-tint: #FDEDDC;
  --birch: #FAF9F5;
  --anvil: #0F1419;
  --anvil-soft: #1B2128;
  --ink: #14181A;
  --neutral-200: #E8EBED;
  --neutral-300: #D5D8D8;
  --neutral-600: #5C6770;
  --neutral-700: #40474D;

  /* Forgejo theme overrides. Forgejo's upstream theme files
   * (`web_src/css/themes/`) define the --color-* namespace; we
   * override the subset we care about. Anything not overridden falls
   * back to the upstream default. */
  --color-primary: var(--forge-green);
  --color-primary-light-1: #59A338;
  --color-primary-light-2: #6CBC44;
  --color-primary-light-3: #80D650;
  --color-primary-light-4: #A8E47F;
  --color-primary-light-5: var(--forge-green-tint);
  --color-primary-light-6: #F0F7E9;
  --color-primary-light-7: #F8FBF4;
  --color-primary-dark-1: #3C7A26;
  --color-primary-dark-2: var(--forge-green-deep);
  --color-primary-dark-3: #1A3712;
  --color-primary-dark-4: #102108;
  --color-primary-dark-5: #060D03;
  --color-primary-dark-6: #030701;
  --color-primary-dark-7: #000000;
  --color-primary-contrast: #FFFFFF;

  --color-secondary: var(--ember);
  --color-secondary-dark-1: var(--ember-deep);
  --color-secondary-dark-2: #884408;
  --color-secondary-light-1: #ED9447;
  --color-secondary-light-2: #F2AF6F;
  --color-secondary-light-3: var(--ember-tint);

  --color-accent: var(--ember);
  --color-link: var(--forge-green);
  --color-link-dark-1: var(--forge-green-deep);
  --color-link-dark-2: #1A3712;

  --color-text: var(--ink);
  --color-text-dark: var(--ink);
  --color-text-light: var(--neutral-600);
  --color-text-light-1: #6F7A82;
  --color-text-light-2: #7A8085;
  --color-text-light-3: #8B9095;

  --color-body: var(--birch);
  --color-bg: var(--birch);
  --color-box-body: #FFFFFF;
  --color-box-body-highlight: #F8FBF4;
  --color-box-header: var(--birch);
  --color-card: #FFFFFF;
  --color-light: #EFEEE9;
  --color-light-mimic-enabled: #EFEEE9;

  --color-border: var(--neutral-200);
  --color-border-light: #EFEEE9;
  --color-border-secondary: var(--neutral-300);

  --color-success: var(--forge-green);
  --color-success-bg: var(--forge-green-tint);
  --color-success-border: #A8E47F;
  --color-success-text: var(--forge-green-deep);

  --color-warning: var(--ember);
  --color-warning-bg: var(--ember-tint);
  --color-warning-border: #F2AF6F;
  --color-warning-text: var(--ember-deep);

  --color-error: #DC2626;
  --color-error-bg: #FEE2E2;
  --color-error-border: #FCA5A5;
  --color-error-text: #991B1B;

  --color-info: #2563EB;
  --color-info-bg: #DBEAFE;
  --color-info-border: #93C5FD;
  --color-info-text: #1E40AF;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-text: #EFEEE9;
    --color-text-dark: #EFEEE9;
    --color-text-light: #AEB3B5;
    --color-text-light-1: #9BA0A2;
    --color-text-light-2: var(--neutral-700);
    --color-text-light-3: var(--neutral-600);

    --color-body: var(--anvil);
    --color-bg: var(--anvil);
    --color-box-body: var(--anvil-soft);
    --color-box-body-highlight: #1F262D;
    --color-box-header: var(--anvil-soft);
    --color-card: var(--anvil-soft);
    --color-light: #252B30;
    --color-light-mimic-enabled: #252B30;

    --color-border: #252B30;
    --color-border-light: #1F262D;
    --color-border-secondary: var(--neutral-700);

    --color-primary-light-5: #2A4F1B;
    --color-primary-light-6: #1F3914;
    --color-primary-light-7: #142309;

    --color-success-bg: #1F3914;
    --color-success-border: #2A4F1B;
    --color-warning-bg: #3A1E0A;
    --color-warning-border: #5C2F0F;
    --color-error-bg: #3F1212;
    --color-error-border: #5C1A1A;
    --color-info-bg: #14213F;
    --color-info-border: #1A2F5C;
  }
}

/* Logo box — give the SVG room without changing layout. */
.ui.menu .item.brand img,
.ui.dropdown .menu .item img.image,
img.ui.avatar.image[alt='logo'] {
  height: 28px;
  width: auto;
}

/* Body uses Inter via the var. Recursive for any <code>/<pre>. */
body,
button,
input,
optgroup,
select,
textarea {
  font-family: var(--fonts-regular);
}

code,
kbd,
pre,
samp,
.monospace,
.markdown code,
.markdown pre {
  font-family: var(--fonts-monospace);
}